[置顶] 网页课程内容回顾（HTML）
今天和大家分享我这段时间以来学习html的总结，以此来巩固，也希望对初学者能有所帮助。
开发工具：Sublime Text2或HBuilder
首先学习的当然是html的标签语言，其实w3cschool中都有。
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词
<meta charset="UIF-8">
<meta name="keyword" content="html5,css3">
<meta name="author" content="whqet">
<meta name="generater" content="sublime taxt2">
<title> 网页标题 <title>Document</title>
<pre class="html" name="code">使用css的几种方式
1.行内方式，使用标签的style属性
2.页内方式，使用style标签的方式
3.页外方式，使用link标签链接外部css
一般不建议使用行内方式，不利用后期的维护（优先级比较高） 尽量少使用页内方式，不利于后期的整站维护（比较直观很多实验的时候会用）
<style> 指定标签的行内样式，页面内部的css
<style>
p{
font-size: 12px; 字体大小
font-weight:bold; 字体变粗
font-style:italic; 字体变斜
color:red; 字体颜色
text-indent: 2em; 首行缩进
line-height: 1.5em; 行高
}
</style>
<link> 链接外部的css <link rel="stylesheet" herf="css.css">
<script>脚本，页内的脚本，链接外部的js
<script>
var a="hello world";
alert(a);
</script>
<script src="1.js"></script>
<script type="text/javascript"></script>
document.write("<h1>Hello World!</h1>")
</script>
<body> 显示网页里面的内容 <body> 网页内容 </body>
ol, ordered List (数字) 定义有序列表 ul, unordered List (小圆点) 定义无序列表 li, list item <ol style="list-style-type:lower-alpha"> a,b,c <ul style="list-style-type:square"> 小方块 ol: decimal 1阿拉伯数字(默认) lower-alpha a英文小写 upper-alpha A英文大写 lower-roman i罗马小写数字 upper-roman I罗马大写数字 ul: disc 实心圆(默认) circle 空心圆 square 实心正方形 none 不显示任何标记
普通链接 普通链接最重要的两个属性，href指定链接地址，target指定方式打开 <a href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" target="-blank">百度一下</a> <a href="<a target=_blank href="http://www.w3cschool.com.cn/">http://www.w3cschool.com.cn/</a>" target="-blank">使用w3cschool学习网页</a> 邮件链接 邮件链接可以调用本地的邮件客户端发送邮件，用的不多(现在一般用网页方式发送邮件) <a href="<a target=_blank href="mailto:[email protected]?subject=Hello%20again">mailto:[email protected]?subject=Hello%20again</a>">给庆哥发个邮件</a> 页内链接，创建一个在网页内部的导航 步骤：1、创建目标 <a name="abc"> </a> 2、跳转到该页 <a href="#abc"> </a> 菜单架构 我们经常使用ul、li、a的方式事件菜单 <ul> <li><a href="#abc">ASP</a></li> <li><a href="#abc">PHP</a></li> <li><a href="#abc">JSP</a></li> <li><a href="#abc">DELPHI</a></li> <li><a href="#abc">VS</a></li> <li><a href="#abc">AJAX</a></li> <li><a href="#abc">JQUERY</a></li> </ul>
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。 <figure> <figcaption>图像标题</figcaption> <img src="abcd.jpg" width="350" height="234" alt="" usemap="#abc"> </figure> 使用<map>标签定义地图，<map里>面使用<area>标签定义热区 area里面的shape shape="circle" coords="x,y,r"区域为圆形 圆心坐标和半径 shape="polygon" coords="x1,y1,x2,y2,x3,y3,..."区域为多边形 多边形所有顶点的坐标 shape="rectangle" coords="x1,y1,x2,y2"区域为矩形 矩形的左上右下两点的坐标
热区链接 在<img>标签里面使用<usemap>属性调用<map> <map name="#abc"> <area shape="circle" coords="95,115,80" href="<a target=_blank href="http://www.baidu.com">http://www.baidu.com</a>" alt=""> <area shape="polygon" coords="183,110,200,110,200,90,213,90,217,110,237,110" href="<a target=_blank href="http://www.csdn.net">http://www.csdn.net</a>" alt=""> <area shape="rectangle" coords="502,48,613,185" href="<a target=_blank href="http://www.sohu.com">http://www.sohu.com</a>" alt=""> </map>
<table>标签定义HTML表格 简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。 tr元素定义表格行，th元素定义表头，td元素定义表格单元。 更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。 col， column 列，栏目，通常表示一个列 row， row 行，通常表示一个行 span 跨度 span 标签，行内的容器 colspan td的属性，该td跨列数 cell 细胞，单间，单元格 space 空格 spacing 空间，间隔 cellspacing 单元格间隔 padding 填充 cellpadding 单元格的内填充 <table border="1"> <caption>信息表</caption> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>30</td> </tr> <tr> <td>李四</td> <td>男</td> <td>45</td> </tr> <tr> <td>李倩</td> <td>女</td> <td>18</td> </tr> <tr> <td colspan="3">有些属实，有些瞎编</td> </tr> </table>
![[置顶] 网页课程内容回顾（HTML）_第1张图片](http://img.e-com-net.com/image/info5/27b17e7fc68c4a22a261754acf7091cd.png)
设置表格的背景颜色 <style>
tr:nth-child(1){
background-color: rgba(200,0,0,.1)
}
tr:nth-child(2){
background-color: rgba(200,0,0,.2)
}
tr:nth-child(3){
background-color: rgba(200,0,0,.3)
}
tr:nth-child(4){
background-color: rgba(200,0,0,.4)
}
tr:nth-child(5){
background-color: rgba(200,0,0,.5)
} /*tr:nth-child(3n){
background-color: rgba(200,0,0,.1)
}
tr:nth-child(3n+1){
background-color: rgba(200,0,0,.2)
}
tr:nth-child(3n+2){
background-color: rgba(200,0,0,.3)
}*/
</style>
![[置顶] 网页课程内容回顾（HTML）_第2张图片](http://img.e-com-net.com/image/info5/3f6033430f42477dbb8387afce47c4bf.png)