HTML精华笔记

[来源] 达内    [编辑] 达内   [时间]2013-09-16

HTML精华笔记

获奖学员:山川
所获奖项:三等奖
软件
    可执行的桌面应用程序---.exe 
    web 类型的应用程序---B/S  
    手持设备 
    分布式 
    等 
 
结构 
    UI 层----显示和交互 
    业务层----JDBC 
    数据存储 层----Oracle、IO 
 
Web 类型的应用程序:网站、OA、CRM等 
需要的技术: 
    客户端技术:浏览器发出请求、显示页面---Web基础 
 
    服务器端技术:侦听、解析、返回页面---JSP+Servlet/PHP/ASP.NET 
 
Web 基础课程:html + CSS + JavaScript 
美工:效果图(jpg)/切图/切页面----修改 
 
索引--目录--应用 
 
HTML 课程 
一:html 概述和基础语法 
    1、html 是一种编写网页的解释性的标记语言,结合 CSS 和 JS 实现功能复杂的页面 
    2、解释性:翻译,非编译---代码有错误,可能导致效果错误 
    3、标记:用一对 <> 括起来的,显示时候会有特定的效果 
        封闭类型:成对出现,也叫双标记,比如 <h1></h1> 
        非封闭类型:只有一个标记,也叫单标记,比如 <br />(建议) 或者 <br>  
        属性:出现在开始标记里,用空格隔开,属性名称="属性值"或者一对单引号 
 
<br/> 
<img /> 
         
        比如 
            <h1 align="center" xx="">sss</h1> 
    4、术语:元素----标记 
 
 
 
    4、显示页面:用浏览器---IE、Google、Firefox、Opera、Safari 
 
二:html 文档的创建 
    1、文档的标准结构 
版本信息 
<html> 
    <head></head> 
    <body></body> 
</html> 
    2、版本:严格型、传统型、框架型 
    3、head:页面头元素---包含和页面整体信息相关的内容 
        title:为页面定义标题 
        meta:元数据 
        style:样式 
        script:脚本代码 
    4、body:文档的主体---各种文本以及各种标记 
 
三:文本标记 
    1、特殊文本----转义字符 
        空格      
        <    < 
        >    > 
    2、标题: h1---h6 
        h1---一号标题 
    3、段落:p----段落间距 
    4、换行:<br /> 
    5、分组元素: 
        <div></div>:独占一行 
        <span></span>:不会影响原有的布局 
    6、块级(block)元素和行内(inline)元素 
        块级元素:独占一行的元素,比如 h1/p/div 
        行内元素:和其他元素在同一行上,比如 span/a 
 
四:图像和链接 
    1、图像标记  <img /> 
        相对路径:<img src="images/a.jpg" /> 
        绝对路径:<img src="http://ssss/a.jpg" /> 
    2、超级链接 <a href="">click me</a> 
        <a href="users/login.html"></a> 
        href="http://www.xxx." 
        target="_blank" 
    3、不同页面之间的 
    4、同一个页面的不同部分之间的 
        <a href="#">XXXx</a>---回到顶端 
    5、锚点的定义和使用 
        实现选择性的在页面的不同位置之间跳转 
        <a name="xxx"></a>---锚点 
        <a href="#xxx">To XXX</a> 
 
 
五:列表: ul ol li 
    经常会使用嵌套的列表实现导航菜单 
    ---配合链接,实现导航目录效果 
 
<ul> 
    <li> 
        电器 
        <ul> 
            <li>小家电</li> 
            <li>白色家电</li> 
        </ul> 
    </li> 
    <li> 
        图书 
        <ul> 
            <li>考试用书</li> 
            <li>儿童读物</li> 
        </ul> 
    </li> 
</ul> 
 
 
六:表格:显示网格数据、布局 
    1、表格的基本结构:自上而下,从左到右 
        <table> 
        <tr>---table row 
        <td>---单元格 table defination 
    2、常用的属性 
        table:border/width/height/cellspacing/cellpadding 
        td:width/height/align/valign 
    3、表格的其他 
        为表格添加标题: <caption> 
        行分组:thead/tbody/tfoot 
            复杂分组的时候,可以有多个 tbody 
    4、不规则表格:设置 td 的跨行或者跨列 
        colspan = "3"---横着 
        rowspan = "3"---竖着 
    5、表格的嵌套:实现复杂布局时 
        table 写在 td 里 
     
七:表单 
    1、表单:承载表单上元素(如文本框、按钮等),数据的录入和交互,提交到服务器端 
        其他数据 
        <form action="login.jsp" method="post"> 
            ????? 
            保存 
        </form> 
        其他数据 
    2、表单上的元素: 
    3、input :输入框---type取值的不同,不同类型 
        <input type="text" /> 
        <input type="password" /> 
        <input type="radio" />--互斥的单选效果 
        <input type="checkbox" />--多选 
        <input type="submit" />--提交按钮 
        <input type="reset" />--重置,恢复到初始状态 
        <input type="button" value="普通按钮" /> 
        <input type="file" />---选择本地文件,备于上传 
        <input type="hidden" />--隐藏域,不显示----常用来记载不希望用户看见的关键数据,隐秘数据(加密完毕再存入)  
 
 
    4、input 元素的属性 
        name 属性:提交数据用,名称 
        value 属性:提交的值--文本框(初始值)、单选或者多选框(提交的值) 
        名值对:提交数据到服务器端,比如:second.html?uu=john&sex=m&role=sa 
 
    5、label标记:使用for属性和某个元素发生关联,for的值必须是关联控件的 id 值 
 
    6、select:下拉框或者列表框  size="n" 
        option元素:选项 
     
    7、textarea:多行文本域 
 
    8、表单控件的分组元素:fielsetset/legend 
 
八:浮动框架 
    <iframe src="其他页面的URL"></iframe> 
    当前页面上嵌入其他页面,常用于广告页面










一、CSS 概述     
    1、CSS 的作用:定义网页的外观,统一的方式,实现内容(数据)和表现(样式)分离 
 
    2、CSS 的基础语法: 
        样式属性名称1:值1;样式属性名称2:值2 
        width:100px;height:200px; 
         
        提出来定义: 
            样式选择器 
            { 
                样式声明; 
            } 
 
    3、CSS 的定义方式: 
        方式一:内联方式---CSS 样式定义在 html 元素的 style 属性里---重用性和可维护度不好  
        方式二:内部样式表---CSS 样式定义在 head 里的 style 元素里 
        方式三:外部样式表---CSS 样式定义在单独的 .css 文件里,html 页面上用 link 引入-----优先推荐使用  
 
        a.html----准备多套样式,类似于皮肤的切换 
            s1.css---红色 
            s2.css---蓝色 
            s3.css--黑白色 
 
    4、特征    css(级联/层叠 样式表) 
继承:子元素可以使用父元素的某些样式---字体相关、背景相关 
    <body style="color:red" > 
        111 
        <p>text</p> 
    </body> 
 
不重复----并集 
重复定义-----优先级 
        内联 >  内部或者外部(以最后一次定义的为准,覆盖前面的相同部分) 
         
 
二、选择器的定义---灵活的决定使用样式声明 
    1、元素选择器,如 h1/div/p---以html中标记的名称-----为同一类元素定义样式 
 
    2、样式类 
        css:     .name {} 
        html:    <任元素 class="name"  
------多种元素相同的样式 
 
    3、分类 
        CSS:     input.txt {} 
        html:      <input class="txt" 
    同一种元素下的细分 
        <input type="text" /> 
        <input type="button" /> 
 
    4、ID选择器-----对页面上某个元素的唯一定义 
        CSS:     #idvalue {} 
        html:    <元素 id="idvalue" 
 
    5、派生选择器---利用html元素的层次关系,选中某种结构下的元素 
        CSS:    ul li a{XXX} 
        html:  <ul><li><a>... 
 
    6、选择器分组----为n多元素定义相同的样式部分 
        CSS:       input,a.link,#title,.s1   {XXX} 
 
    7、伪类----有不同的状态 
        :link---未访问过的 
        :hover---悬浮,悬停 
        :active---按下 
        :visited---访问过的 
        CSS:    某种选择器:link/hover 
 
    8、扩展---各种样式选择器----不重复的取并集,重复的依靠优先级 
        选择器的优先级:范围越小,优先级越高 
<div> 
    <a id="link1" class="s1"></a> 
</div> 
div a {} 
#link1 {} 
a.s1 {} 
 
 
三:各种样式属性 
    尺寸单位:pt/px/cm/mm/%/.. 
    颜色单位:red/#ff0000 
 
四:尺寸 
    width 
    height 
    overflow:visible/hidden/scroll/auto(建议)---设置内容溢出时如何处理 
 
五:边框 
    border:width style color;---4边框 
    border-top:1px solid red; 
    border-left:2px dotted blue; 
 
    border-left-width:2px; 
    border-left-style:dotted;---线型 
    border-left-color:blue; 
 
六、边距 
    盒子模型(框模型):元素的边框、内容、外边距以及内边距之间的定义 
    margin:外边距 
        margin:20px;---四个方向         
        margin:10px 20px 30px 40px; 
                       top  right  bottom left  
        margin:10px 20px;---值复制 
 
        margin-left:10px;---单个方向的边距 
        margin-top:20px; 
    padding:内边距 
        padding:1/2/4; 
        padding-left/right:; 
    定义边距,可能导致占用的总面积的增加 
    特别的取值: 
        margin:10px auto;----居中 
        auto:由浏览器自动计算左右的边距 
 
七:背景 
    1、背景色: background-color:颜色;---纯色 
    2、背景图片: 
        background-image:url(images/a.jpg); 
        background-repeat:repeat/no-repeat/repeat-x/repeat-y; 
        background-position:x y; 
        background-attachment:scroll/fixed;--附着方式---取值为fixed,背景图像固定,类似于水印的效果 
 
八:文本 
    color 
    font-size 
     
    font-weight:normal/bold; 
    text-align:left/center/right; 
    text-decoration:none/underline; 
    text-indent:12px;----仅首行缩进 
    line-height:20px;---行高 
 
九:表格 
    vertical-align:top/middle/bottom;----td里 
    border-collapse:separate/collapse;---边框合并 
    border-spacing:10px;---边框之间的边距; 
十:光标 
    cursor:default/pointer/help/....;---光标 
     
十一:浮动 
    1、页面默认情况下,采用流布局的模式 
    2、设置元素浮动,脱离原有的布局,原有的位置不再保留,后续元素补上 
        float:none/left/right; 
    3、清除浮动元素带来的影响     
        clear:left/right/both; 
 
十二:显示----元素的显示方式 
    每个 html 元素都有其默认的显示方式(块级、行内) 
    行内元素:高度和宽度---无效 
    块级元素:高度和宽度有效 
    display: 
        none---不显示,结合js代码实现动态显示效果 
        block---块级元素 
        inline---行内元素 
 
十三:列表的样式 
    list-style-type:none/circle/...; 
    list-style-image:url();----使用图片作为列表项的标识 
 
十四:定位











一、javascript 概述---js 
    1、是一种基于对象和事件驱动的解释性脚本语言,应用于网页的编程处理 
    2、JavaScript、JScript/VbScript----W3C 
    3、js的书写方式 
        直接写在 onxxx 事件中 
        <script>块中,onxxx 事件中调用---当前页面的重用 
        js 文件中,页面上先使用 <script src="">引入,onxxx 事件中调用---建议使用  
 
二、基础语法 
    1、变量 
        声明变量  var 名称 = 值; 
        变量的数据类型以赋值为准 
        标识符:不以数字开头的数字、字母、下划线和 $ ,不能和保留关键字重名 
 
    2、数据类型 
        基本类型:string/number/bool 
        特殊类型:null/undefined 
        复杂类型:Array/Date/Math/.... 
         
        String类型:字符串,一对双引号或者一对单引号,特殊字符使用转义符(\x,汉字对应一个 \uxxxx)  
 
    3、基本数据类型之间的转换 
        隐式转换:规则 
        显式转换:使用转换方法 
            parseInt/parseFloat/toString 
            NaN----not a number 
            isNaN("???")---bool,判断是否可以转化为数值:is not a number("??")---true  
 
    4、运算符与表达式 
        if(a == b)-----值 
        if(a === b)---严格相等-----值和类型 
        三元运算符 
 
    5、流程控制 
        默认情况下,顺序执行---改变其执行顺序 
        条件:if/else、switch/case 
        循环:for、while 
 
三、内置对象的使用 
    1、js中的对象:基于对象的语言,灵活的使用各种对象 
    2、常用的内置对象:String、Number、Math等 
    3、String对象 
        创建    var s = "mary"; 
        属性    var n = s.length; 
        方法    var s1 = s.substring(1,3); 
            toLowerCase/toUpperCase 
            split  1,2,3,4 
            substring 
            charAt 
            indexOf/lastIndexOf 
            replace/search/match---结合正则表达式使用、实现对string的操作 
            replace(/\d{3}/ ,"*") 
 
        正则表达式:js中,放置在 /中间/ 
        结合匹配标识用:g(global)i(ignour)m(multiline) 
            /gcd/gim 
 
    4、Array 对象 
创建数组 
    var a1 = new Array(3); 
    a1[0] = 12; 
    a1[1] = "mary"; 
    a1[2] = true; 
     
    var s2 = [12,"mary",true];//简写方式 
 
    var s3= new Array(); 
    a3[0] = [10,20]; 
    a3[1] = [30,40]; 
属性 
    length 
方法 
    XXX.toString()---使用 , 连接成一个字符串,常用于输出数组的内容显示 
    XXX.join("|")----使用 | 连接 
    concat----数组的加法 
    slice-----数组的截取 
    reverse 
    sort----默认情况下,按照字符比较 
        ----按照数值比较,先定义一个用于比较规则的方法,将方法作为参数传给 sort 
 
    5、Math 对象---直接使用不需要new 
        属性或者方法: Math.round() 
 
    6、Number 对象 
        toString 
        toFixed(n)---保留小数点后n位 
 
    7、正则表达式对象 
正则表达式本身就是一个纯文本的表达式,用来表示对文本的匹配,比如 \d{3}    [a-z]{2,5}        [a-zA-Z0-9]{4}  
不同的语言、环境下,有着不同的应用 
js中对于正则表达式的应用: 
    一:结合string 的对象方法:replace/search/match 
    二:直接使用正则表达式对象的方法 
        var  r = /\d{3}/;--r 是一个正则表达式对象 
        r.test(string)----bool 
        常用于验证界面的录入 
 
    8、Date 对象 
        创建     var r = new Date();--当前 
            var r = new Date("2013-12-23"); 
        方法 
            getXXX()--getDate()/getMonth 
            setXXX() 
            toXXX()---得到某种格式的字符串 
 
    9、方法 
        a、定义: function Name(x,y,z) 
            { 
                return XXX; 
            } 
        b、重载 
js不可以实现传统意义上的重载---js中,只要方法重名,以最后一次定义的为准 
    方法中可以使用 arguments 得到传入的参数的数组。模拟实现方法的重载 
        c、方法和 Function 对象 
        d、使用方法时 
方式一:方法,与功能相关----function sss(){} 
方式二:方法仅为某个方法里所使用,创建一个 Function对象即可-----适用于方法体简单 
    var f = new Function("参数1","参数2","方法体"); 
    使用匿名函数---适用于方法体复杂 
    var f = function(){}; 
 
    10、全局函数:所有js的对象均可使用 
        parseInt/parseFloat 
        isNaN 
        decodeURI/encodeURI 
xxxx.html?name=mary&age=17&sex=%45%65                eval:传入一个字符串,计算或者执行它  
         
四:DHTML 应用 dynamic 
    1、什么是 DHTML 应用:动态网页效果 
    2、对象模型 
        window 
            history 
            location 
            navigator 
            screen 
            event 
            document 
        对象模型分为两类:DOM(文档对象模型) 和 BOM(浏览器对象模型) 
    3、window 对象 
            对话框 
        window.alert() 
        window.confirm() 
        window.prompt() 
           打开新窗口 
        window.open(url,name,配置); 
        window.close(); 
           定时器相关 
        周期性 
        window.setInterval(func,time); 
        window.clearInterval() 
        一次性 
        window.setTimeout(func,time); 
        window.clearTimeout(); 
<img style="position:relavtive;left:10px;" 
img.src 
img.style.left += 10; 
         
    4.document对象 
        html 页面上的每个内容作为一个节点对象----整个文档是一颗节点树,document 对象代表的整个树,树根  
        DOM:文档对象模型 
        a、查询---找到文档中的某个节点对象 
方法一:document.getElementById("")---通过id找到对象或者null 
方式二:根据层次关系来查询 
    obj.parentNode 
    obj.childNodes---节点的数组 
    obj.firstChild/lastChild 
方式三:根据标签名称查找 
    document.getElementsByTagName("input")---节点的数组 
    obj.getElementsByTagName("input")[1] 
 
        b、读取信息或者修改信息----知道节点的类型 
方式一:将 HTML 标签对象化 
    <input     obj.value/type 
    <a    obj.href 
    <img    obj.src 
方式二:元素中间的文本内容-----innerHTML 
    <a>text</a>    obj.innerHTML 
方式三:样式 
    简单样式 
    <p style="color:red;">p text</p> 
    obj.style.color = "red"; 
    obj.style.fontSize = "18pt"; 
    obj.style.backgroundColor = "silver"; 
    复杂的样式:建议在 样式表 中先定义好 
    obj.className = ""; 
 
        c、不知道节点对象的类型时----读取数据? 
        obj.nodeName----全大写方式,返回当前元素的标签的名称 
 
        d、增加新节点 
第一步:创建新的节点对象 
    document.createElement("a/input/p"); 
    <a></a>  <input />  <p></p> 
第二步:设置新对象的各信息 
第三步:加入 
    xxx.appendChild(newObj);---追加 
    xxx.insertBefore(newObj,refNode); 
 
        e、删除     
    XXX.removeChild(obj); 
    obj.parentNode.removeChild(obj); 
 
    5、HTML DOM:基于标准的DOM操作,进行封装,以实现代码的简化,比如: 
        var obj = new Option("JDBC","1"); 
        sel.options[1] = obj; 
主要讲解两种封装好的元素 
select + option 
 
table+tr+td 
    DOM方式: createElement(“tr”) 
    HTML DOM 方式: 
        table.insertRow(index); 
        row.insertCell(index); 
             
    6、history 对象:当前浏览器窗口的历史访问记录---确实有历史记录 
        history.back(); 
        history.forward(); 
        history.length; 
 
    7、screen 对象:代表的就是当前屏幕信息--只能读取,不能修改 
        var w = screen.width/availWidth;//ok 
        screen.width = 123; //error 
 
    8、location 对象:代表的是 URL 地址栏 
        实现对 URL的修改,实现从页面去往另一个页面 
        location.href = "url";--保留历史访问记录 
        location.replace("url");--替换,没有历史 
页面间 
    <a>----静态 
    window.open----一定打开新窗口 
    history.xxx()----受限于历史记录 
    location.href----保留历史记录 
    location.replace()----不保留 
     
    9、navigator 对象 
        js中,可以循环对象的所有的属性,如下: 
for(var p in navigator)//p代表对象的每个属性 
{ 
} 
     
    10、event 
a、事件分类 
    鼠标事件:onclick/onmouseover/onmouseout/ondblclick 
    键盘事件:onkeyup/onkeydown 
    状态事件:onblur/onfocus/onchange/onload/onunload 
 
b、如何定义事件 
    <元素标签中 onxxx = "function();"----静态 
    btnObj.onxxx = Function; ----动态 
 
c、事件可以被取消---常用于页面的提交时 
    onxxx = "return true;"---默认值,事件触发 
    onxxx = "return false;"---事件被取消 
 
d、事件有冒泡机制---当多层元素定义了相同的事件时,事件从最里层开始触发,层层向上 
 
e、event 对象:封装了和当前事件相关的所有信息 
    clientX/clientY----事件发生的点 
    srcElement/target---源元素对象,引发当前事件的元素 
    使用event对象时,可以直接在 html 页面或者js代码中使用 event 关键字获得对象----firefox 除外  
    firefox:只能在 html 页面上使用 event ,js 中不可用 
 
浏览器兼容问题:标准,特殊问题特殊处理(event) 
 
五:js中的面向对象基础 
    封装、继承、抽象、多态 
    封装:对象相关的数据和行为组织起来 
    数据:属性 
    行为:方法 
    1、使用 Object:使用简单,重用性差----适用于简单数据的封装 
        var obj = new Object(); 
        obj.name = "mary"; 
        obj.age = 18; 
        obj.isGra = true; 
    2、类似于 创建一个类:使用较为复杂,重用性好---适用于大多数情况下的封装 
创建类 
    function Student(n,a) 
    { 
        this.name = n; 
        this.age = a; 
    } 
 
        var p1 = new Student("mary",18); 
        var p2 = new Student("john",20); 
 
    3、为了传递到服务器端:JSON 
        var obj = { 
            "name":"mary", 
            "age":18 
        }; 
 
var p1 = {}; 
var p2 = {}; 
var array = new Array(); 
array[0] = p1; 
array[1] = p2;

网友评论 已有 1 条评论,查看更多评论»

评论内容:
验证码:
【网友评论仅供其表达个人看法,并不表明本站同意其观点或证实其描述。】

就业案例

最新开课信息