标签参考：http://www.runoob.com/tags/html-reference.html
1. 简介
HTML是超文本标记语言。
HTML也称web页面。
HTML文档由标签和被标签的内容组成。
语法：<标签 属性="属性值">xxxxx</标签>
例：<p style="font-size:12px;text-align:center">这是一个段落</p>
2. 结构
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3. <meta>标签
<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
最常见的是使用charset属性制定文档编码：<meta charset="utf-8" />
下面讲一讲我遇到的http-equiv和content属性：
http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。
content 属性给出了与 http-equiv 或 name 属性相关的值。
例：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
这是一个文档兼容模式的定义：如果IE有安装Google Chrome Frame，那么就走安装的组件，如果没有就通知 Windows Internet Explorer 以最高级别的可用模式显示内容。
X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。
"IE=edge"：edge告诉IE以最高级模式渲染文档
"chrome=1"：IE 使用 Chrome Frame 渲染
4.特殊符号
特殊符号用字符实体表示,以“&”开始，以“；”结束：
空格
> >
< <
" "
© ©
5. 常用标签
HTML标签分为块级标签和行级标签；
块级标签又分为基本块级标签（h/p/hr)和用于布局的块级标签（表格、表单）；
块级标签——基本块级标签：
<h#></h#> 标题标签
<p></p> 段落标签，换行加空行
<hr/> 水平线标签
例：
1 <h1 align="center">居中</h1> 2 <hr color="dodgerblue" /> 3 <p> 4 <h2>二级标题</h2> 5 </p>
块级标签——用于布局
<ul>——无序列表
<li>
</ul>
<ol>——有序列表
<li>
</ol>
<dl>——定义列表
<dt></dt>
<dd></dd>
</dl>
例：
1 <p> 2 <h2>无序列表ul</h2> 3 <ul type="disc"> <!--列表样式为实心圆点--> 4 <li>星期一</li> 5 <li>星期二</li> 6 <li>星期三</li> 7 </ul> 8 <br/> 9 <h2>有序列表ol</h2> 10 <ol type="1"> <!--序号为数字--> 11 <li>星期一</li> 12 <li>星期二</li> 13 <li>星期三</li> 14 </ol> 15 <br/> 16 <h2>定义列表dl</h2> 17 <dl> 18 <dt>第一个标题项:</dt> 19 <dd>标题项的解释文字</dd> 20 <dt>第二个标题项:</dt> 21 <dd>标题项的解释文字</dd> 22 </dl> 23 </p>
结果：
这个图好糊随便看看
<table>——表格标签
<tr>
<td></td>
</tr>
</table>
例：
1 <table border="2"> <!--border定义边框线--> 2 <tr> 3 <td rowspan="2">1,1</td> <!--colspan跨列--> 4 <td>1,2</td> 5 </tr> 6 <tr> 7 <td>2,2</td> 8 </tr> 9 </table>
结果：
<form></form>——表单标签
网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。
基本格式：<form name="表单名" action="URL" method="get|post"></form>
例：
1 <form method="post" enctype="multipart/form-data"> 2 <!--enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码--> 3 <!--multipart/form-data:表单数据分为多部分提交--> 4 </form>
<div></div>——分区标签，换行不空行
行级标签
<a></a>——超链接标签
1 <a href="login.html">登陆</a>
<img>——图像标签
<img src="xx/xx.jpg" title="aa" style="border:none"/>
<input>——表单元素
格式：<input type="表项类型" name="表项名" value=""/>
1 <input type="submit" name="register" value="注册" />
<select></select>——表单元素
1 <select name=""> 2 <option value=""></option> 3 <option>aa</option> 4 <option>bb</option> 5 <option>cc</option> 6 </select>
<span></span>——范围标签，不换行
<br/>——换行
6.一个登陆demo：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>登陆</title> 6 </head> 7 <body> 8 <form method="post" enctype="multipart/form-data"> 9 10 <p> 11 <!--换行空行--> 12 <div>用户名：<input type="text" name="username" value="" /></div> <!--div换行不空行--> 13 <div>密 码：<input type="text" name="password" value="" /></div> 14 </p> 15 <p> 16 性 别： 17 <input type="radio" name="单选" value="男" />男 18 <input type="radio" name="单选" value="女" checked="checked" />女 <!--默认选项--> 19 </p> 20 <p> 21 职业： 22 <select name="work"> 23 <option value=""></option> 24 <option>学生</option> 25 <option>老师</option> 26 <option>医生</option> 27 </select> 28 </p> 29 <p> 30 上传头像： 31 <input type="file" name="files" /> 32 </p> 33 <p> 34 <input type="submit" name="register" value="注册" /> 35 </p> 36 </form> 37 </body> 38 </html>