HTML 笔记大全(30页).doc
-1.2.3. HTML 笔记大全-第 30 页4. HTML的简介HTML: 超文本标记语言，网页语言。超文本标记语言：超出文本的范畴。标记：HTML所有操作都是通过标签实现的。标签就是标记。<标签>HTML的后缀.htm 或者.html 。HTML规范：开始<html>结束</html>。成对出现。特殊的标签单个出现<br/>换行。内容：1.<head>设置相关内容</head> <title>标题</title> 2.<body>显示在页面上的内容</body> 3.标签成对出现<head></head> 4.标签不区分大小写。 5.有些标签没有结束标签，在标签内结束，<hr/>水平线。HTML的核心思想（*）网页很多数据，不同的数据需要显示的效果不一样，这个时候需要使用标签把要操作的数据（包装起来），通过修改标签的属性值实现标签数据样式的变化。一个标签相当于一个容器，想要修改容器内的样式，只需要改变容器的属性值，就可以实现容器内数据的样式变化。HTML最常用的标签5. 文字标签和注释标签*文字标签：修改文字的样式- <font></font>属性 size:文字的大小范围1-7 超出默认为7。 color：文字颜色 两种表示：1.英文单词：red green 。 2.使用16进制表示#ffffff *注释标签：<!- html的注释 -> 。6. 标题标签，水平线标签和特殊字符标题标签：大小依次变小自动换行<h1></h1><h2></h2><>水平线标签：<hr/> 属性：*Size:水平线粗细 *Color:颜色代码<hr size=”5” color=”blue”/><br/><br/>换2行。特殊字符: <:< >:> 空格： & : &7. 列表标签 展示效果 <dl>传智播客 <dt>传智播客</dt> 财务部 <dd>财务部</dd> 学工部 <dd>学工部</dd> 人事部 <dd>人事部 </dd> </dl>*<dl></dl>:表示列表范围 *<dt></dt>:表示上层内容*<dd></dd>:表示下层内容*<dd></dd>:表示下层内容*<ol></ol>:有序列表的范围 属性type:设置排序方式 1（默认）a i。 *在ol标签里面<li>具体内容</li>代码：<ol><li>财务部</li><li>学工部</li><li>人事部</li></ol>*<ul></ul>:有序列表的范围属性type: 实心圆circle 空心圆disc 实心方块square ,默认disc5、 图像标签（*）<img src=”图片的路径” width=” height=” alt=” 图片上显示的文字”/>-src:图片的路径-width:图片的宽度 height：图片的高度 alt：图片上显示的文字。6、 路径的介绍*绝对路径 ： 完整的路径。*相对路径： 一个文件相对于类外一个文件的位置。*html文件和图片在同一个路径下，直接把名字写在路径下。*图片在html下一层的路径， 把后面的路径拿过来用。*图片在html上一层的路径， ./加上图片的名字。././ 表示上2层路径。7、 案例联系*<pre>原样输出标签</pre>8、 超链接标签（*）*链接资源 <a href=”链接到资源的路径”> 顶部</a> href: 链接的资源的地址，里面的如果是空链接时”#”表示。 target:设置目标打开的方式，默认在当前页打开。 _blank : 在新的页面打开。 _self : 在当前页面打开。*定位资源 *如果想定位资源：定义一个位置<a name=”top”>顶部</a>*回到这个位置<a href=”#top”>回到顶部</a>9、 表格标签（*重要的很*）<table>表格的范围属性：border=”1” bordercolor=”blue” cellspacing=”0”width=”40”height=”40”.border:表格线 bordercolor:表格线颜色 cellspacing:单元格之间的距离。<tr align=”left”>表示行</tr> <td>在行标签的里面表示行里面的单元格</td>在tr和td标签下属性：显示方式 align: left center right*<th>表格实现居中加粗标签</th>*表格标题写着table里面*<caption>表格标题标签</ caption ><tr> * 表示几行。<td></td> * 表示每行的单元格。<td></td><td></td></tr></table>表格技巧：先数有几行有几行就有几个<tr></tr>，在数每行有多少个单元格<td></td>。*合并单元格跨行:rowspan=”几行”跨列:colspan=”几列”10、表单标签<form>表示定义一个表单的范围</form>* form里面的属性 *action=”路径”数据跳到页面。*method=”请求的方式”有以下2种。1. get和post,默认是get。2. get请求携带提交数据，安全性低，数据大小有限制。Post相反。*enctype:做文件上传需要设置这个属性。*输入项：可以输入内容和选择内容的部分。必须加一个name 属性。必须有一个value属性值-大部分的输入项使用<input type=”输入项类型”/>*普通输入项：<input type=”text”/><br/>*密码输入项：<input type=”password”/><br/>*单选输入项：<input type=”radio”/><br/>*文件输入项：<input type=”file”/> 上传用。- 在里面加属性：name=”-Name属性值一定要一样*实现默认选项 checked=”checked”放在想选择的属性上。*多选输入项：<input type=”checkbox”/><br/>- 在里面加属性：name=”-Name属性值一定要一样-必须有一个value属性值。必须加一个name 属性。*下拉输入项（不是在input标签里面的）。<select name=”birth”name=”mingzi” > <option value=”1992”>1992 selected=”selected”</option> * 选项 <option value=”1993”>1993</option> <option value=”1993”>1993</option></select>*实现默认选项 selected=” selected”放在想选择的属性上*文本域<textarea cols=”20” rows=”10”></textarea>*隐藏项（代码中有而在页面上不会显示）<input type=”hidden”/>*提交按钮<input type=”submit” value=”按钮上的字”/> ? 输入项name的值=输入的值*参数类似于key=value形式.*图片提交按钮：<input type=”image “src=”图片路径”/>*重置按钮(回到输入项的初始状态)<input type=”reset” value=”按钮上的字”/>*普通按钮<input type=”button” value=”按钮上的字”/>11、 案例：使用表单来实现注册页面。-使用表格实现页面效果。-超链接不想要她有结果 href=”#”-如果表格里面的单元格没有内容，使用空格作为占位符&nasp;-使用图片提交表单<input type=”image”src=”图片的路径”/>。12、 html中其他的常用标签的使用b：加粗s：删除线u：下划线i：斜体pre:原样输出sub:下标sup:上标div:自动换行显示块span:不会自动换行在一行显示块p:段落标签比br标签多换一行。13、 html的头标签的使用*html两部分组成head和body*在head里面的标签是头标签*title:表示游览器显示的内容。*meta:设置页面上的一些内容。<meta name=”keywords” content=”毕姥爷，熊出没，刘翔”>*content:内容的意思。<meta http-equiv=”refresh”content=”3”;url=”绝对定位的地址”/>refresh:刷新 后面3表示内容刷新的时间为3秒.*base标签：设置超链接的基本设置<base target=”_blank”/>*link标签：引入外部文件*明天css，可以使用link标签引入css文件。14、 框架标签的使用*<frameset>-row:按照行进行划分 *<frameset rows=”80,* ”>-cols:按照列划分*<frameset cols=”80,*”*<frame>-具体显示的页面-<frame name=”lower_left” src=”页面目录路径”>*使用框架标签的时候，不能写在body里面，使用框架标签，需要把body去掉。例子：<frameset rows=”80,*”> /把页面划分成上下2部分 <frame name=”top” src=”页面路径”> /上面页面<frameset cols=”180,*”> /把下面页面划分成左右2部分。<frame name=”lower_left”src=” 页面路径”> /左边页面<frame name=”lower_right”src=” 页面路径”> /右边页面 </frameset> </frameset> *如果在左边的页面设置超链接，让内容显示在右边的页面中n 设置超链接里面的属性，target值成名称n <a href=”页面的地址” target=”right”>超链接1</a>15、a 标签的扩展 - 百度是网络资源 -当a标签里面访问网路资源的时候，必须要家一个协议 http:表示一个网路的公共协议。 -如果加上http协议之后，自动识别访问资源是一个网络资源。 - 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。 - 如果不是公共协议，回去本地电脑支持这个协议的应用程序。1、 css的简介 * css:层叠样式表 * 层叠：一层一层的* 样式表：很多属性和属性值*使页面显示效果更加好*css将页面内容和显示样式进行分离，提高了显示功能。2、css和html的结合方式（4种结合方式） *.在每个html标签上面都有一个属性 style，把css和html结合在一起。 -<div style=”background-color:red;color:green;”> -<标签 style=”属性 :属性值; 属性 :属性值; 属性 :属性值;”>*.使用html的一个标签实现<style>标签，写在<head></head>里面。*<style type=”text/css”> css代码; </style>*<style type=”text/css”> div background-color:blue; color:red; </style>*.在style标签里面使用语句（在某些浏览器下不起作用） import url (css文件路径)；-第一步，创建一个css文件 <style type=”text/css”> improt url (div.css); </style>*.使用头标签link，引入外部css文件第一步，创建一个css文件-<link rel=”stylesheet”type=”text/css”href=”css文件路径”/>*第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式。*优先级（一般情况）由上到下，由外到内，优先级由低到高。* 后加载的优先级高。* 格式 选择器名称 属性名:属性值;属性名:属性值;.3、 css的基本选择器（3种）*要对哪个标签里面的数据进行操作 A:标签选择器 *使用标签名作为选择器的名称 div background-color:gray; color:white;B:class选择器 *每个html标签都有一个属性class -<div class=”haha”>aaaaa</div> .haha Background-color:orange; C:id选择器*每个html标签上面都有一个属性id-<div id=”hehe”>bbbbbbb</div>-#hehe Background-color:#333300; * 优先级 Style>id选择器>Class选择器>标签选择器4、 css的扩展选择器*关联选择器*<div><p> wwwwwwwww</p></div>*设置div标签里面的P标签，嵌套标签里面的样式*div p Background-color: green; *组合选择器 *<div>111111111</div> <p>222222222222</p> *把div和p标签设置成相同的样式，把不同的标签设置相同的样式 *div,p Background-color:orange; *伪元素选择器*css 里面提供了一些定义好的样式，可以拿过来使用* 比如超链接 *超链接的状态 原始状态 鼠标放上去的状态 点击 点击之后 :link :hover :action :visited 记忆的方法： lv ha 5、 css的盒子模型* 在进行布局前需要把数据封装到一块一块的区域内（div）(1) 边框Border :2px solid blue; / 粗细 虚线 蓝色border:统一设置上border-top下border-bottom左border-left右border-right(2) 内边距Padding:20px;padding:统一设置上padding -top下padding -bottom左padding -left右padding -right(3) 外边距Margin:20pxmargin:统一设置上margin -top下margin -bottom左margin -left右margin -right6、 css的布局的漂浮（了解）float: *属性值Left: 文本流向对象的右边。Right:文本流向对象的左边。7、 css的布局的定位（了解） position: *属性值 absolute: * 将对象从分档流中拖出。 * 可以是top、bottom 等属性进行定位。relative: * 不会将对象从分档流中拖出。 * 可以是top、bottom 等属性进行定位。8、 案例 图文 混排案例* 图片和文字在一起显示9、 案例 图像签名* 在图片上面显示文字1、 javascript的简介 *是基于对象和事件驱动的语言，应用于客户端。 -基于对象： *提供好了很多对象，可以直接拿过来使用。 -事件驱动： *html做网站静态效果，javascript动态效果。 -客户端：专门指的是浏览器。 * js的特点 1.交互性 信息的动态交互。 2.安全性-js不能访问本地磁盘的文件。 3.跨平台性-只能支持js的浏览器，都可以运行。*javascript和java的区别1. java是sun公司，现在是oracle；Js是网景公司。2. Javascript是基于对象的，java是面向对象的3. Java是强类型语言，js是弱类型语言。4. Javascript只需解析就可以执行，而java需要编译和解译才能执行。Js的组成（3部分） *ECMAScript: ECMA:欧洲计算机协会 制定的js语法和语句。 *Bom： 浏览器对象模型。 *Dom: 文档对象模型。2、 js和html的结合方式（2种） * 第一种：使用一个标签<script type=”text/javascript”>js代码；</script> * 第二种：使用script标签，引入一个外部js文件 *创建一个js文件，写js代码 - <script type=”text/javascript”src=”js路径”></script>。3、 js的原始类型和声明变量* java的基本数据类型 byte short int long float double char Boolean*定义变量都使用关键字var*js的原始类型有（5个）-string:字符串 * var str=”adc”;-number:数字类型 *var m=123;-boolean:true 和false * var flag=ture;-null *var data=new Data();*获取对象的引用，null表示对象引用为空，所有的对象的引用也是object .-undifined *定义一个变量，没有赋值。var aa; * typeof(); 查看当前变量的数据类型。4、 js的语句-java里面的语句*if判断 * switch语句 *for while do-while5、 js的运算符*+= : x+=y; =èx=x+y;*js里面不区分整数和小数。var j=123;alert(j/1000*1000);/ j/1000*1000 在java里面得到结果为0./ j/1000*1000 123/1000*1000=123*字符串的相加和相减的操作 var str=”123”; / alert(str+1); / 在java和js相同结果都是4561. alert(str-1); / js执行的是正常运算 122.l 提示：NaN：表示不是一个数字*Boolean类型也可以操作 *如果设置成true，相当于这个值是1. *如果设置成false，相当于这个值是0.*=和=的区别：* 做判断时* = :比较的只是数值。* = :比较的是数值和类型。*/*引入知识-直接向页面输出的语句（可以把内容显示在页面上）*document.write(“aaaa”);document.write(“<hr/>”);*可以向页面输出变量，固定值和html代码。6、 js 的数组*定义方式（3种） -第一种：var arr=1,2,3; var arr=1,4,ture; -第二种：使用内置对象Array var arr1=new Array (5); /定义一个数组，长度为5. arr10=”1”; -第三种：使用内置对象Array var arr2=new Array(3,4,5); /定义一个数组，数组里面元素3 4 5 . *数组里面有一个属性 Length:获取数组的长度。 *数组可以存放不同的数据类型的数据。7、js的函数 *js里定义函数方法有三种方式 *函数的参数列表里面，不需要写var，直接写参数名称第一种方式： *使用到一个关键字function *function 方法名（参数列表） 方法体; 返回值可有可无 /使用第一种方式创建函数 function test() alert(“qqqq”); /调用方法 /test(); / 定义一个有参数的方法 实现2个数的相加 function add1(a,b) var sum=a+b;alert(sum); add1( 2,3 );/ 有返回值的效果 function add2 (a,b,c) var sum1=a+b+c; return sum1; aler (add2(3,4,5); 第二种方式： *匿名函数 var add= function(参数列表) 方法体和返回值; * 代码 / var add3=function(m,n) aler (m+n); / 调用方法 add (5,6);8、 js的全局变量和局部变量 *全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用 *在放外部使用，在方法内部使用，在另外一个script标签中使用 * 局部变量：在方法内部定义一个变量，只能在方法内部使用 -游览器 自带调试工具F12. 9、script标签放的位置 *建议把script 标签放到</body>后面。10丶js的重载*什么是重载？ 方法名相同，参数列表不同 Js 是否有重载？1、 js的String对象* 创建String对象 * var str=”abc”; *方法和属性（文档） *属性length:字符串的长度 *方法(1) 与html相关的方法-bold():加粗-fontcolor():设置字符串的颜色-fontsize():设置字体的大小-link():将字符串显示成超链接 *str4.link(“hello.html”) -sub() sup: 下标和上标 (2) 与java相似的方法 -concat():连接字符串 var str1=”abc”;var str2=”dfg”; document.write(str1.concat(str2);-charAt():返回值指定指定的位置的字符串*var str3=”sdsadad”;doucument.write(str3.charAt(20); /字符位置不存在，返回空字符串 -indexof(): 返回字符串位置 * var str4=”sfdsasd”; document.write(str4.indexof(“w”); /字符不存在，返回值为-1。split ():切分字符串，成数组*var str5=”a-b-c-d”; var arr1 =str5.split(“-”);doucument .write(“length:”+arr1.length); -replace(): 替换字符串 * 传递2个参数： -第一个参数是原始数据 -要替换成的字符 *var str6=”abcd”; document.write(str6); document.write(“<br/>”); document.write(str6.replace(“a”,”Q”); -substr()和substring() *var str7=”sadasfasdaf”; /document.write(str7.substr(5,5); / 从第五个开始，向后截取五个字符。 *从第几个开始，向后截取几位 document.write(“<br/>”);document.write(“str7.substring(3,5)”); /从第几位开始到第几位结束。3,5） *从第几位开始，到第几位结束，但是不包含最后那一位。2、 js的Array对象 *创建数组（3种）-var arr1=1,2,3;-var arr2= new Array(3); /长度为3-var arr3=new Array（1，2，3）; /数组中的元素是1 2 3 *属性：length:查看数组的长度 *方法 -contat 方法: 数组的连接 *var arr11=1,2,3; var arr12=4,5,6; doucument.write(arr11.concat(arr12);- join(): 根据指定的字符串分割数组- *var arr13=new Array(3);- arr130=”a”;- arr131=”b”;- arr132=”c”;- document.write(arr13);- document.write(“<br/>)”;- document.write(arr13.join(“-”); -push():向数组末尾添加元素，返回数组的新的长度 *如果添加的是一个数组，这个时候把数组当作一个整体字符串加进去。 */ push方法 var arr14=new Array(3); arr140=”tom”; arr141=”luck”; arr142=”jack”; document.write(“old array:”+arr14);document.write (“<br/>”);document.write(“old length:”+arr14.length);document.write (“<br/>”);document.write(new length: +arr14.push(“zhangsan”);document.write (“<br/>”);document.write(“new array:”+arr14); var arr15=“aaa”,”bbb”,”ccc” ;var arr16=“www”,”qqq”;document.write(“old array:”+arr15);document.write (“<br/>”);document.write(“old lenth:”+arr15.length);document.write (“<br/>”);document.write(“new length:”+arr15.push(arr16);document.write (“<br/>”);document.write (“new array:”+arr15);for(var i=0;i<arr15.length;i+) alert(arr15i)- pop ():白哦是 删除最后一个元素，返回删除的那个元素 *var arr17=“zhangsan”,”lisi”,”wangwu”,”zhaoliu”; doucument.write(“old array:”+arr17); doucument.write(“</br>”); doucument.write(“return:”arr17.pop(); doucument.write(“</br>”); doucument.write(“new array:”+arr17); -reverse():跌倒数组中的元素顺序*var arr18=“zhangsan”,”lisi”,”wangwu”,”zhaoliu”;doucument.write(“old array:”+arr18);doucument.write(“</br>”);doucument.write(“new array:”+arr18.reverse();*js 里面获取当前时间 var data=new Data(); / 获取当前时间 var date=new Data() doucument.write (data); /转换成习惯的格式 doucument.write(“</hr>”); document.write (data.toLocaleString();* 获取当前年的方法 getFullYear(); 得到当前的年 *document.write(“year:”+data.getFullYear();* 获取当前年的方法 getMonth();得到当前月 *返回的是0-11月，如果想得到准确的值，加1 * var data1= data.getMonth()+1; document.write(“month:”+data1);* 获取当前星期的方法 getDay(): 星期，返回的是（06）* 获取当前日的方法 getData(): 得到当前的天 1-31 * document.write(“day:”+data.getDate();*获取当前小时 getHours(): 获取小时 * document.write(“hour:”+data.getHours();*获取当前分钟 getMinutes():
