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

资源描述

1. 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最惯用标签 2. 文字标签和注释标签 *文字标签：修改文字样式 - <font></font> 属性 size:文字大小范畴1-7 超过默以为7。 color：文字颜色两种表达：1.英文单词：red green 。 2.使用16进制表达#ffffff *注释标签： 。 3. 标题标签，水平线标签和特殊字符标题标签：大小依次变小自动换行<h1></h1><h2></h2><>…… 水平线标签：<hr/> 属性：**Size:水平线粗细 **Color:颜色代码<hr size=”5” color=”blue”/> <br/><br/>换2行。特殊字符： <:&lt； >:&gt；空格：&nbsp； & ： & 4. 列表标签展示效果 <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 ,默认disc 5、图像标签（******） <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></div> <p></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:20px margin:统一设立上margin -top 下margin -bottom 左margin -left 右margin -right 6、 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-while 5、 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. arr1[0]=”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、 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(“<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、 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); - arr13[0]=”a”; - arr13[1]=”b”; - arr13[2]=”c”; - document.write(arr13); - document.write(“<br/>)”; - document.write(arr13.join(“-”)); -push():向数组末尾添加元素，返回数组新长度 **如果添加是一种数组，这个时候把数组当作一种整体字符串加进去。 *// push办法 var arr14=new Array(3)； arr14[0]=”tom”； arr14[1]=”luck”； arr14[2]=”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(arr15[i]) } --- 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()：星期，返回是（0~6） *** 获取当前日办法 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());

展开阅读全文