HTML重点笔记大全专业资料.doc

1. HTML简介HTML：超文本标记语言，网页语言。超文本标记语言：超过文本范畴。标记：HTML所有操作都是通过标签实现。标签就是标记。HTML后缀.htm 或者.html 。HTML规范：开始结束。成对浮现。特殊标签单个浮现换行。内容：1.设立有关内容 标题 2.显示在页面上内容 3.标签成对浮现 4.标签不区别大小写。 5.有些标签没有结束标签，在标签内结束，水平线。HTML核心思想（*）网页诸多数据，不同数据需要显示效果不同样，这个时候需要使用标签把要操作数据（包装起来），通过修改标签属性值实现标签数据样式变化。一种标签相称于一种容器，想要修改容器内样式，只需要变化容器属性值，就可以实现容器内数据样式变化。HTML最惯用标签2. 文字标签和注释标签*文字标签：修改文字样式- 属性 size:文字大小范畴1-7 超过默以为7。 color：文字颜色 两种表达：1.英文单词：red green 。 2.使用16进制表达#ffffff *注释标签： 。3. 标题标签，水平线标签和特殊字符标题标签：大小依次变小自动换行水平线标签： 属性：*Size:水平线粗细 *Color:颜色代码换2行。特殊字符： :>； 空格： ； & ： &4. 列表标签 展示效果 传智播客 传智播客 财务部 财务部 学工部 学工部 人事部 人事部 *:表达列表范畴 *:表达上层内容*:表达下层内容*:表达下层内容*.*:有序列表范畴 属性type:设立排序方式 1（默认）a i。 *在ol标签里面详细内容代码：财务部学工部人事部*:有序列表范畴属性type：实心圆circle 空心圆disc 实心方块square ,默认disc5、 图像标签（*）-src:图片途径-width:图片宽度 height：图片高度 alt：图片上显示文字。6、 途径简介*绝对途径 ： 完整途径。*相对途径： 一种文献相对于类外一种文献位置。*html文献和图片在同一种途径下，直接把名字写在途径下。*图片在html下一层途径， 把背面途径拿过来用。*图片在html上一层途径， ./加上图片名字。././ 表达上2层途径。7、 案例联系*原样输出标签8、 超链接标签（*）*链接资源 顶部 href：链接资源地址，里面如果是空链接时”#”表达。 target:设立目的打开方式，默认在当前页打开。 _blank ：在新页面打开。 _self ： 在当前页面打开。*定位资源 *如果想定位资源：定义一种位置顶部*回到这个位置回到顶部9、 表格标签（*重要很*）表格范畴属性：border=”1” bordercolor=”blue” cellspacing=”0”width=”40”height=”40”.border:表格线 bordercolor:表格线颜色 cellspacing:单元格之间距离。表达行 在行标签里面表达行里面单元格在tr和td标签下属性：显示方式 align： left center right*表格实现居中加粗标签*表格标题写着table里面*表格标题标签 * 表达几行。 * 表达每行单元格。表格技巧：先数有几行有几行就有几种，在数每行有多少个单元格。*合并单元格跨行:rowspan=”几行”跨列:colspan=”几列”10、表单标签表达定义一种表单范畴* form里面属性 *action=”途径”数据跳到页面。*method=”祈求方式”有如下2种。1. get和post,默认是get。2. get祈求携带提交数据，安全性低，数据大小有限制。Post相反。*enctype:做文献上传需要设立这个属性。*输入项：可以输入内容和选取内容某些。必要加一种name 属性。必要有一种value属性值-大某些输入项使用*普通输入项：*密码输入项：*单选输入项：*文献输入项： 上传用。- 在里面加属性：name=”-Name属性值一定要同样*实现默认选项 checked=”checked”放在想选取属性上。*多选输入项：- 在里面加属性：name=”-Name属性值一定要同样-必要有一种value属性值。必要加一种name 属性。*下拉输入项（不是在input标签里面）。 1992 selected=”selected” * 选项 1993 1993*实现默认选项 selected=” selected”放在想选取属性上*文本域*隐藏项（代码中有而在页面上不会显示）*提交按钮 ?输入项name值=输入值*参数类似于key=value形式.*图片提交按钮：*重置按钮(回到输入项初始状态)*普通按钮11、 案例：使用表单来实现注册页面。-使用表格实现页面效果。-超链接不想要她有成果 href=”#”-如果表格里面单元格没有内容，使用空格作为占位符&nasp;-使用图片提交表单。12、 html中其她惯用标签使用b：加粗s：删除线u：下划线i：斜体pre:原样输出sub:下标sup:上标div:自动换行显示块span:不会自动换行在一行显示块p:段落标签比br标签多换一行。13、 html头标签使用*html两某些构成head和body*在head里面标签是头标签*title:表达游览器显示内容。*meta:设立页面上某些内容。*content:内容意思。refresh:刷新 背面3表达内容刷新时间为3秒.*base标签：设立超链接基本设立*link标签：引入外部文献*明天css，可以使用link标签引入css文献。14、 框架标签使用*-row:按照行进行划分 *-cols:按照列划分*frameset cols=”80,*”*-详细显示页面-*使用框架标签时候，不能写在body里面，使用框架标签，需要把body去掉。例子： /把页面划提成上下2某些 /上面页面 /把下面页面划提成左右2某些。 /左边页面 /右边页面 *如果在左边页面设立超链接，让内容显示在右边页面中n 设立超链接里面属性，target值成名称n 超链接115、a 标签扩展 - 百度是网络资源 -当a标签里面访问网路资源时候，必要要家一种合同 http:表达一种网路公共合同。 -如果加上http合同之后，自动辨认访问资源是一种网络资源。 - 当浏览器里面找到有关合同，一方面看这个合同是不是公共合同http。 - 如果不是公共合同，回去本地电脑支持这个合同应用程序。1、 css简介 * css:层叠样式表 * 层叠：一层一层* 样式表：诸多属性和属性值*使页面显示效果更好*css将页面内容和显示样式进行分离，提高了显示功能。2、css和html结合方式（4种结合方式） *.在每个html标签上面均有一种属性 style，把css和html结合在一起。 - -*.使用html一种标签实现标签，写在里面。* css代码; * div background-color:blue; color:red; *.在style标签里面使用语句（在某些浏览器下不起作用） import url (css文献途径)；-第一步，创立一种css文献 improt url (div.css); *.使用头标签link，引入外部css文献第一步，创立一种css文献-*第三种结合方式，缺陷：在某些浏览器下不起作用，普通使用第四种方式。*优先级（普通状况）由上到下，由外到内，优先级由低到高。* 后加载优先级高。* 格式 选取器名称 属性名:属性值;属性名:属性值;.3、 css基本选取器（3种）*要对哪个标签里面数据进行操作 A:标签选取器 *使用标签名作为选取器名称 div background-color:gray; color:white; B:class选取器 *每个html标签均有一种属性class -aaaaa .haha Background-color:orange; C:id选取器*每个html标签上面均有一种属性id-bbbbbbb-#hehe Background-color:#333300; * 优先级 Styleid选取器Class选取器标签选取器4、 css扩展选取器*关联选取器* wwwwwwwww*设立div标签里面P标签，嵌套标签里面样式*div p Background-color：green; *组合选取器 * *把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种） * 第一种：使用一种标签js代码； * 第二种：使用script标签，引入一种外部js文献 *创立一种js文献，写js代码 - 。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(“”);*可以向页面输出变量，固定值和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 标签放到背面。10丶js重载*什么是重载？ 办法名相似，参数列表不同 Js 与否有重载？1、 jsString对象* 创立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(“”); document.write(str6.replace(“a”,”Q”); -substr()和substring() *var str7=”sadasfasdaf”; /document.write(str7.substr(5,5)； / 从第五个开始，向后截取五个字符。 *从第几种开始，向后截取几位 document.write(“”);document.write(“str7.substring(3,5)”)； /从第几位开始到第几位结束。3,5） *从第几位开始，到第几位结束，但是不包括最后那一位。2、 jsArray对象 *创立数组（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(“)”;- document.write(arr13.join(“-”); -push():向数组末尾添加元素，返回数组新长度 *如果添加是一种数组，这个时候把数组当作一种整体字符串加进去。 */ push办法 var arr14=new Array(3)； arr140=”tom”； arr141=”luck”；arr142=”jack”；document.write(“old array:”+arr14);document.write (“”);document.write(“old length:”+arr14.length);document.write (“”);document.write(new length：+arr14.push(“zhangsan”);document.write (“”);document.write(“new array:”+arr14); var arr15=“aaa”,”bbb”,”ccc” ;var arr16=“www”,”qqq”;document.write(“old array:”+arr15);document.write (“”);document.write(“old lenth:”+arr15.length);document.write (“”);document.write(“new length:”+arr15.push(arr16);document.write (“”);document.write (“new array:”+arr15);for(var i=0;iarr15.length;i+) alert(arr15i)- pop ():白哦是 删除最后一种元素，返回删除那个元素 *var arr17=“zhangsan”,”lisi”,”wangwu”,”zhaoliu”; doucument.write(“old array:”+arr17); doucument.write(“”); doucument.write(“return:”arr17.pop(); doucument.write(“”); doucument.write(“new array:”+arr17); -reverse():跌倒数组中元素顺序*var arr18=“zhangsan”,”lisi”,”wangwu”,”zhaoliu”;doucument.write(“old array:”+arr18);doucument.write(“”);doucument.write(“new array:”+arr18.reverse();*js 里面获取当前时间 var data=new Data()； / 获取当前时间 var date=new Data() doucument.write (data)； /转换成习惯格式 doucument.write(“”); 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()： 获取分钟* document.write(“minute:”+data.getMinutes();*获取当前秒 getSeconds()： 获取秒* document.write(“second:”+data.getSeconds();