[b]自定义列表 [/b]     <dl></dl>：表示列表的范围         **在里面 <dt></dt>：上层内容         **在里面 <dd></dd>：下层内容   [b]有序列表 [/b]     <ol></ol>：有序列表的范围         --属性 type：设置排序方式，1(默认),a,i、、         **在ol标签里面 <li>具体内容</li>     [b]无序列表 [/b]     <ul></ul>：无序列表的范围         --属性 type：circle(空心圆)、disc(默认的实心圆)、square(实心方块)         **在ul标签里面 <li>具体内容</li>   [b]图像标签 [/b]     --属性：src、width、height、alt(图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容 或者是图片显示出错时显示的文字，但有些浏览器不显示，没有效果)         ** <img src="图片的路径"/>   [b]路径的介绍 [/b]     *分类：两类     **绝对路径 eg. http://www.baidu.com/b.jpg     ***三种相对路径 一个文件相对于另外一个文件的位置         --html文件和图片在同一个路径(目录)下，可以直接写文件名称         --在html文件中，使用与其在同一个路径下的img文件夹下的a.jpg文件 使用方法：img\a.jpg             **d:\htmlstudy\code\4.html             **d:\htmlstudy\code\img\a.jpg         --图片在html文件的上层目录中，此时图片使用方法：../c.png     ../表示上层路径                     [b]超链接标签 [/b]     **链接资源     -- <a href="链接到资源的路径">显示在页面上的内容</a>         **href：链接的资源的地址         **target：设置打开的方式，默认是在当前页打开             --_blank ：在一个新窗口打开             --_self ：在当前页打开 默认的     --<a href="#">链接标题</a>：当超链接不需要跳转到页面时，在href中添加#（占位符）就可以了     **定位资源         --如果想要定位资源：定义一个位置             <a name="top">顶部</a>         --回到这个位置                 <a href="#top">回到顶部</a>                         --原样输出标签：<pre>需要原样输入的内容</pre>             [b]表格标签 [/b]     *作用：可以对数据进行格式化，使数据显示更加清晰     *属性 border(表格线粗细) bordercolor(表格线颜色) cellspacing(单元格间距离) width height     *<table></table> ： 表示表格的范围     **在table里面，表示一行 <tr></tr>     --设置对齐方式 align ：left center right         ***在tr里面，表示一行里边的单元格 <td></td>         **使用th也可以表示单元格：表示可以实现居中和加粗     *表格的标题，放在table里边 <caption></caption>     *操作技巧：         **首先数有多少行，在数每行里面有多少个单元格        *合并单元格         **rowspan ：跨行（纵向合并）             <td rowspan="3" align="center">13</td>         **colspan ：跨列（横向合并）             <td colspan="3" align="center">表格练习</td>   [b]表单标签 [/b] *例如注册开心网时，可以提交数据到开心网的服务器，这个过程可以使用表单标签实现 * <form></form> ：定义一个表单范围 *属性：         ** action ：提交到的地址，默认提交到 当前的页面         ** method ： 表单的提交方式             --常用的有两种： get 和 post ，默认是get请求         ** get 和 post 的区别             1）get请求地址栏会携带提交的数据，post不会携带（数据在请求体里面）             2）get请求安全级别较低，post较高             3）get请求数据大小有限制，post没有限制         ** enctype ：一般请求下不需要这个属性，做文件上传时候需要设置这个属性     **输入项：可以输入内容或者选择内容的部分         --大部分的输入项可使用 <input type="输入项类型"/>         ********在输入项里面需要有一个name属性           ***普通输入项：<input type="text"/>         ***密码输入项：<input type="password"/>         ***单选输入项：<input type="radio"/>             --在里边需要属性 name             --name的属性值必须要相同             --必须要有一个value值             ****实现默认选中的属性                 ***checked="checked"         ***复选输入项：<input type="checkbox"/>             **在里边需要属性 name             **name的属性值必须要相同             **必须要有一个value值             ****实现默认选中的属性                 ----checked="checked"         ***文件输入项：<input type="file"/>         ***下拉输入项（不是在input标签里面的）             <select name="birth">                 <option value="0">请选择</option>                 <option value="1991">1991</option>                 <option value="1992">1992</option>                 <option value="1993">1993</option>             </select>             ****实现默认选中的属性                 ----selected="selected"         *** 文本域（如：注册账号时填写个人信息简介的方框）             <textarea cols="5" rows="20"></textarea>         ***隐藏项（不会显示在页面上，但是存在于 html代码里面）             <input type="hidden"/>         ***提交按钮             <input type="submit"/>             <input type="submit" value="按钮标题"/>             --提交之前地址：C:\Users\HappyDog\Desktop\index.html                **当在输入项里面写了name属性之后             --file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245               **?输入项name的值=输入的值&             **参数类似于key-value形式           ***使用（点击）图片来提交             <input type="image" src="图片路径"/>           ***重置按钮 ：回到输入项的初始状态             <input type="reset"/>             <input type="reset" value="按钮标题"/>           ***普通按钮（和js在一起使用的）             <input type="button" value=""/>   [b]案例：使用表单标签实现注册页面 [/b]     表格单元格内容为空时，一般用占位符（ (转义空格)）来填充   [b]html中的其他的常用标签的使用 [/b]     ** b(加粗) s(删除线) u(下划线) i(斜体) pre(原样输出) sub(下标) sup(上标) div(自动换行) span(在一行显示) p(段落标签)      [b]html的头标签的使用 [/b]     **html两部分组成 head 和 body     **在head里面的标签就是头标签     **title标签：表示在标签上显示的内容     **<meta>标签 ：设置页面的一些相关内容         --<meta name="keywords" content="" />         --<meta http-equiv="refresh" content="10;url=Test_form.html" />定时跳转到指定页面     **base标签 ：设置超链接的基本的设置         --可以统一设置超链接的打开方式 <base target="_blank" />     **link标签 ：引入外部文件   [b]框架标签的使用 [/b]     **<frameset>         **rows ：按照行进行划分             <frameset rows="80,*"> 分成上下两部分，上边80，下边任意         **cols ：按照列进行划分             <frameset cols="80,*"> 分成左右两部分，左边80，右边任意     **<frame> 具体显示的页面         **<frame name="lower_left" src="b.html">     *使用框架标签的时候，不能写在head和body里面，使用了框架标签，需要把body去掉，写在head外边       *如果在左边的页面超链接，想让内容显示在右边的页面中，可以设置超链接里面的target属性，将target的值设置为框架中的名字         **<a href="http://www.baidu.com" target="right">百度</a><br/>     <frameset rows="80,*">         <frame name="top" src="a.html">         <frameset cols="120,*">             <frame name="left" src="b.html">             <frame name="right" src="http://www.baidu.com">         </frameset>     </frameset> [b]知识总结[/b]     1）html操作思想：使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化     2）font标签 属性：size 取值范围1-7 color：十六进制数 #ffffff     3）标题标签 <h1></h1>......<h6></h6> ：从h1到h6字体越来越小，自动换行     4）注释   [b]CSS的简介 [/b]     **CSS：层叠样式表         ** 层叠：一层一层的         ** 样式表：很多的属性和属性值     **使页面显示效果更加好     **CSS将网页内容和显示样式进行分离，提高了显示功能   [b]CSS和html的结合方式（四种结合方式） [/b]   [b]  1）在每个html标签上面都有一个属性 style，把CSS和html结合在一起[/b]         -- <div style="background-color:red;color:green;" id="" class="" >天之道，损有余而补不足，是故虚胜实，不足胜有余。</div> [b]    2）使用html的一个标签实现 <style>标签，写在head里面 [/b]         -- <style type="text/css">                 css代码;          </style>       ----代码实现<head>                    <style type="text/css">                     div{                         background-color:blue;                         color:red;                     }                        </style>                 </head>                 <body>                        <div id="" class="">                         天之道，损有余而补不足，是故虚胜实，不足胜有余。                     </div>                 </body> [b]    3）在style标签里面 使用语句[/b]         @import url(css文件的路径)；                         -- 第一步：创建一个css文件         ---- <style type="text/css">                 @import url(div.css);          </style> [b]    4）使用头标签 link，引入外部css文件 放在<head></head>里边[/b]         -- 第一步：创建一个css文件         -- <link rel="stylesheet" type="text/css" href="css文件的路径"/>     ****第三种结合方式的缺点：在某些浏览器下不起作用，一般使用第四种方式     ****优先级（一般）         由上到下，由内到外，优先级由低到高。         后加载的优先级高     ****格式：选择器名称{属性名:属性值;属性名:属性值;......}   [b]css的基本选择器（三种） [/b]     **要对那个标签里面的数据进行操作  [b]   1）标签选择器 div {css代码} [/b]         --使用标签名作为选择器的名称         <head>                <style type="text/css">                 div{                     background-color:blue;                     color:red;                 }                </style>         </head>         <body>             <div>aaaaaa</div>          </body> [b]    2）class选择器 .名称 {} [/b]         **每个html标签都有一个属性 class         **<head>                    <style type="text/css">                     div.test{                         background-color:blue;                         color:red;                     }                        p.test{                         background-color:blue;                         color:red;                     }             可以简写为：                     .test{                         background-color:blue;                         color:red;                     }                 </style>          </head>         **<body>             <div class="test">aaaaaa</div>             <p class="test">bbbbbbbbb</p>          </body>       [b] 3）id选择器 #名称 {} [/b]         **每个html标签上面都有一个属性 id         --<div id="test">cccccccccc</div>         --<head>                    <style type="text/css">                     div#test{                         background-color:blue;                         color:red;                     }                        p#test{                         background-color:blue;                         color:red;                     }             可以简写为：                     #test {                         background-color:blue;                         color:red;                     }                 </style>          </head>         --<body>             <div id="test">aaaaaa</div>             <p id="test">bbbbbbbbb</p>          </body>     **优先级 style > id选择器 > class选择器 > 标签选择器   [b]css的扩展选择器(了解) [/b] [b]    1）关联选择器 嵌套标签的样式的设置[/b]         **<div><p>wwwwwwwwww</p></div>         **设置div标签里面p标签的样式，嵌套标签里面的样式         --<head>                    <style type="text/css">                     div p {                         background-color:blue;                         color:red;                     }                     </style>          </head>         --<body>             <div><p>wwwwwwwwww</p></div>             <p>aaaaaa</p>          </body> [b]    2）组合选择器 不同标签设置相同的样式[/b]         **<div>1111</div>          <p>2222</p>         **把div和p标签设置成相同的样式，把不同的标签设置成相同的样式         --<head>                    <style type="text/css">                     div,p {                         background-color:blue;                         color:red;                     }                     </style>          </head>         --<body>             <div>1111</div>             <p>2222</p>          </body> [b]    3）伪（类）元素选择器 [/b]         ** css里面提供了一些定义好的样式，可以拿过来使用         **比如 超链接             **超链接的状态                 --原始状态 鼠标放上去 点击 点击之后                  :link :hover :active :visited         代码实现：                <head>                    <style type="text/css">                     /*原始状态*/                     a:link {                         background-color:red;                     }                     /*悬停状态*/                     a:hover {                         background-color:green;                     }                     /*点击状态*/                     a:active {                         background-color:blue;                     }                     /*点击之后状态*/                     a:visited {                         background-color:gray;                     }                                                </style>          </head>         <body>             <a href="http://www.baidu.com">点击链接到百度网页</a>         </body>      css的盒子模型(了解) 对数据进行操作，需要把数据放到一个区域里面（div）    [b] 1）边框 border ：统一设置[/b]             也可以分别设置：上 border-top 下：border-bottom 左：border-left 右：border-right         --<head>                    <style type="text/css">                     div {                         width: 200px;                         height: 100px;                         border: 2px solid blue;                     }                     #div12 {                         border-right: 2px dashed yellow;                     }                 </style>          </head>         --<body>             <div id="div11">AAAAAAAAA</div>             <div id="div12">BBBBBBBBB</div>          </body>    [b] 2) 内边距 padding ：统一设置 内容距离上下左右四条边的距离[/b]             也可以分别设置：上下左右         <head>                    <style type="text/css">                     div {                         width: 200px;                         height: 100px;                         border: 2px solid blue;                     }                     #div21 {                         padding: 20px;                     }                     #div22 {                         padding-left: 30px;                     }                 </style>          </head>         <body>             <div id="div21">AAAAAAAAA</div>             <div id="div22">BBBBBBBBB</div>          </body>  [b]   3) 外边距 margin ：统一设置 div距离最外边四条边的距离[/b]                 也可以分别设置：上下左右。。。   css的布局的漂浮（了解） float ：left right   [b]css的布局的定位 (了解) [/b]     *position         **属性值：             --static：默认值，无特殊定位             --absolute：                 将对象从文档流中拖出，使用left,right,top,bottom等属性相对于其进行绝对定位             --relative：不会将对象从文档流中拖出，对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置。   [b]案例：图文混排案例 [/b]     **图片和文字在一起显示 案例：图像签名   javascript的简介：是基于对象和事件驱动的脚本语言，主要应用在客户端     *基于对象：提供好了很多对象，可以直接拿过来使用     *事件驱动：html做网站静态效果，javascript动态效果     *客户端：专门指的是浏览器     * js的特点：         1）交互性 信息的动态交互         2）安全性 js不能访问本地磁盘的文件         3）跨平台性 java里面跨平台性，虚拟机；只要能够支持js的浏览器，都可以运行         *javascript和java的区别：两者之间没有什么任何关系         1）java是sun公司，现在是Oracle；js是网景公司         2）java是面向对象的，js是基于对象的         3）java是强类型的语言，js是弱类型的语言             --比如：java里面 int i = "10";会报错             --js: var i = 10; var i = "10";都不报错         4）js只需要解析就可以执行，而java需要先编译成字节码文件，在执行       *js的组成（三部分）：         1）ECMAScript             -- ECMA ：欧洲计算机协会             --由ECMA组织制定的js语法，语句...         2）BOM             --broswer object model:浏览器对象模型         3）DOM             --document object model：文档对象模型             [b]js与html的结合方式（两种） [/b] [b]    1）使用一个标签 <script type="text/javascript"> js代码；</script>[/b] [b] [/b] [b]    2）使用script标签，引入一个外部的js文件[/b]         -- 创建一个js文件，写js代码         -- <script type="text/javascript" src="js的路径"></script>     注意：使用第二种方式的时候，就不要在script标签里面写js代码了，不会执行   [b]js的原始类型和声明变量 [/b]     *java的基本数据类型：byte short int long float double char bolean     *js定义变量 都是用关键字 var     *js的原始类型（五个）         --string 字符串 var str = "abc";         --number 数字类型 var m = 123;         --boolean true和false var flag = true;         --null var date = new Date();             **获取对象的引用，null表示对象引用为空，所有对象的引用也是object         --undifined 定义一个变量，但是没有赋值 var aa;     * typeof(变量名称) 查看当前变量的数据类型     [b]js的语句 [/b]     **java里面的语句 if判断("="表示赋值；"=="等于，表示判断) switch语句 循环语句（for while do-while）     **js里面的这些语句         --if判断语句         --switch(a) {             case 5: ...                     break;             case 6: ...                     break;             default:...             ........         }     **循环语句 for while do-while         --var i = 5;          while(i>0) {             alert(i);             i--;          }         --for(var i = 0;i<=5;i++){             alert(i);         }   [b]js的运算符 [/b]     **js里面不区分整数和小数         --var j = 123;          alert(j/1000*1000);          ** j/1000*1000 在java里面得到结果是0          ** 在js里面不区分整数和小数， 123/1000*1000 = 0.123*1000 = 123     **字符串的相加和相减的操作         --var str = "123";          alert(str + 1); 在java和js中的结果都是1231，做的是字符串的连接          alert(str - 1); 相减时候，执行减法的运算，如果str中不是数字，会提示NaN：表示不是一个数字     **boolean类型也可以操作         ***如果设置成true，相当于这个值是1；如果设置成false，相当于这个值是0；     ** == 和 === 区别         **都是做判断         ** == 比较的只是值； === 比较的是值和类型     **直接向页面输出的语句（可以把内容显示在页面上），可以向页面输出变量，固定值和html代码。Document.write("") 里面是双引号，如果设置标签的属性需要使用单引号。         -- document.write("aaaa");         -- document.write("<hr/>");             ***document.write("<table border='1' bordercolor='red'>");             ***document.write("</table>"); 练习：实现99乘法表   [b]js的数组 [/b]     *java里面的数组 定义 int[] arr = {1,2,3};     *js数组的定义方式（三种）         1）var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true]; 都可以         2）使用内置对象 Array对象             var arr1 = new Array(5); // 定义一个数组，数组的长度是5             arr1[0] = "1";             ......         3）使用内置对象 Array对象             var arr2 = new Array(3,4,5); // 定义一个数组，数组里的元素是3,4,5     * 数组里面有一个属性 length ：获取到数组的长度     * 数组的长度是可变的，数组可以存放不同的数据类型的数据。   [b]js的函数（方法） [/b]     **在js里面定义函数（方法）有三种方式 函数的参数列表里面，不需要写var，直接写参数名称         1）使用到一个关键字 function             *** function 方法名(参数列表) {                     方法体;                     返回值可有可无（根据实际需要）;              }             代码实现：// 使用第一种方式创建函数                             function test() {                                 alert("qqqqqq");                             }                             // 调用方法                             test();                               // 定义一个有参数的方法 实现两个数的相加                             function add1(a,b) {                                 var sum = a+b;                                 alert(sum);                             }                             add1(3,5);                               function add2(a,b,c) {                                 var sum1 = a+b+c;                                 return sum1;                             }                             alert(add2(7,8,9));         2）匿名函数             var add = function(参数列表) {                 方法体和返回值;             }             代码实现： var add3 = function(m,n) {                             alert(m+n);                         }                         // 调用方法                         add3(8,9);         3）一般也称为动态函数，用的少，了解即可             *使用到js里面的一个内置对象 Function             var add = new Function("参数列表","方法体和返回值");             var add4 = new Function("x,y","var sum;sum=x+y;return sum;");             alert(add4(9,10));             // 或者下边的代码             var canshu = "x,y";             var fangfati = "var sum;sum=x+y;return sum;";             var add4 = new Function(canshu,fangfati);             alert(add4(5,3));   [b]js的全局变量和局部变量 [/b]     **全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用         --在方法外部使用，在方法内部使用，在另一个script标签使用     **局部变量：在方法内部定义一个变量，只能在方法内部使用         --只能在方法内部使用，如果在方法的外部调用这个变量，提示出错         --ie自带了一个调试工具，ie8以上的版本中，键盘上的F12,再页面下方出现一个条 看控制台可以看到错误   [b]script标签应该放置的位置 [/b]     **建议把script标签放到</body>后面     **如果现在有这样一个需求：         --在js里面需要获取到input里面的值，如果把script标签放在head里面，会出现问题         --html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input的值，因为页面还没有解析到input那一行，肯定取不到   js的重载 js不存在重载，但是可以模拟实现     例子：function add11(a,b) {         return a+b;     }     function add11(a,b,c) {         return a+b+c;     }     function add11(a,b,c,d) {         return a+b+c+d;     }     alert(add11(2,2)); // NaN     alert(add11(2,2,3)); // NaN     alert(add11(2,2,4,5)); // 13   [b]js的String对象 [/b]     ** 创建String对象 var str = "abc'；     **方法和属性（文档）         --属性 length ：字符串的长度         --方法             1）与html相关的方法                 -- bold():加粗 fontcolor():设置字符串的颜色 fontsize():设置字体的大小 link():将字符串显示成超链接             2）与java相似的方法                 --concat():连接字符串 charAt():返回指定位置的字符串 indexOf():返回字符串位置 split():切分字符串 成数组 replace("",""):替换字符串--传递两个参数：第一个参数是原始字符，第二个参数是要替换成的字符 substr(5,3)从第五位开始，向后截取三个字符 substring(3,5) 从第三位开始包括第三位到第五位结束，不包括第五位 [3,5)   [b]js的Array对象 [/b]     **创建数组的三种方法         1）var arr1 = [1,2,3];         2）var arr1 = new Array(3); // 长度是三         3）var arr1 = new Array(1,2,3); // 元素是1,2,3         var arr = []; //创建一个空数组     **属性 length：查看数组的长度     **方法         concat();连接数组 join();根据指定的字符分割数组 push();向数组末尾添加元素，返回数组的新的长度**如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去 pop();删除并返回数组的最后一个元素 reverse();颠倒数组中的元素的顺序   [b]js的Date对象 [/b]     ** 在java里面获取当前时间         Date date = new Date();         // 格式化 //toLocaleString()         ** js里面获取当前时间         var date = new Date();         // 转换成习惯的格式 date.toLocaleString();   [b]js的Math对象 数学的运算[/b]     ** 里面的都是静态方法，使用可以直接使用 Math.方法();   [b]js的全局函数 [/b]     **由于不属于任何一个对象，直接写名称使用     ** eval(); 执行js代码(如果字符串是一个js代码，使用方法直接执行)         -- var str = "alert('1234');";          // alert(str); //alert('1234');          eval(str); // 1234     ** .....   [b]js的函数的重载 什么是重载？方法名相同，参数不同[/b]     *js不存在函数的重载，只会调用最后一个方法，但是可以通过其他方式模拟重载。js的函数把传递的参数保存到 arguments数组里面 可以利用判断arguments数组的长度 来对应返回不同的处理结果     模拟重载效果代码实现：     function add1() {         if(arguments.length ==2 ) {             return arguments[0] + arguments[1];         } else if ( arguments.length == 3) {             return arguments[0] + arguments[1] + arguments[2];         } else if ( arguments.length == 4) {             return arguments[0] + arguments[1] + arguments[2] + arguments[3];         } else {             return 0;         }     }     // 调用     alert(add1(1,2)); //3     alert(add1(1,2,3)); //6     alert(add1(1,2,3,4)); //10     alert(add1(1,2,3,4,5)); //0   [b]js的bom对象 [/b]     **bom ：broswer object model:浏览器对象模型     **有哪些对象？         -- navigator ：获取客户机的信息（浏览器的信息）         -- screen : 获取屏幕的信息         -- location ：请求的url地址             *** href属性                [b] 1）获取到请求的url地址 [/b]                     --document.write(location.href);          [b]       2）设置url地址 [/b]                     --页面上安置一个按钮，按钮上绑定一个事件，当点击这个按钮，页面可以跳转到另外一个页面                     <body>                     <input type="button" value="JumpBaidu" onclick="href1();"/>                     <script type="text/javascript">                         function href1() {                             //alert("aaaa");                             location.href = "http://www.baidu.com";                         }                         </script>                     </body>         -- history ：请求的url的历史记录             -- 创建三个页面（模拟上下历史的效果）                 1）创建一个页面a.html 写一个超链接 到 b.html                 2）创建 b.html 超链接到 c.html                 3）创建 c.html             -- 到访问的上一个页面                 history.back();                 history,go(-1);             -- 到访问的下一个页面                 history.forward();                 history.go(1);            -- window（重点掌握） 窗口对象 顶层对象（所有bom对象都是在window里面操作的）             **方法                 -- window.alert(); 简写为：alert(); 页面弹出一个窗口，显示内容                 -- confirm("显示的消息内容"); 确认提示框 有返回值 true和false                 -- prompt(); 输入的对话框（现在使用的不多） ，有两个参数：显示内容和默认值                 -- open("url地址","","窗口特征，比如窗口宽度和高度"); 打开一个新窗口                 -- close(); 关闭窗口（浏览器兼容性比较差）