本系列适合作为HTML的复习文档。
本章为body标签下的各种内容，主要参考来源：
0 小常识
0.1 块元素&行内元素
块元素（block）；
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；行内元素（inline）；
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
1 段落&文本
1.1 标题标签
1.2 段落标签
1.3 文本标签
1.4 换行标签
1.5 水平线标签
1.6 特殊符号
1.1 标题标签
h——header
<h1></h1>
一般一个页面只能有一个<h1>，而<h2>~<h6>可以有多个。
<h1>代表的就是本页面的题目。
1.2 段落标签
p——paragraph
<p></p>
br——break
<br />
<br />是自闭和标签，用于段落内的换行。
1.3 文本格式标签
1.3.1 加粗标签
<b></b>
strong——strong/加强——强调语气
<strong></strong>
二者表现效果相同，但实际开发中，尽量使用 <strong>标签，它比<b>标签更有语义性。
不过，一般更爱用CSS的font-weight:bold。
1.3.2 斜体标签
<i></i>
cite——cite/块引用
<cite></cite>
em——emphasized/强调
<em></em>
表现效果实际也并无区别，要用的话，尽量用<em>。
不过，一般更爱用CSS的font-style:italic。
1.3.3 上标和下标标签
sup——superscripted/上标
<sup></sup>
sub——subscripted/下标
<sub></sub>
1.3.4 大小字号标签
<big></big>
<small></small>
实际开发中用CSS的字号来控制：font-size:18px。
1.3.5 删除线标签
<s></s>
常用CSS的text-decoration:line-through
1.3.6 下划线标签
<u></u>
常用CSS的text-decoration:underline。
1.4 水平线标签
hr——horizon
<hr />
1.5 div标签
div——division
div标签，又称为“区隔标签”，用来为HTML文档内大块的内容提供结构和背景。标签内可放入<body>标签的任何内部标签。
1.6 特殊符号
空格—— 
其他如货币等特殊符号，可直接输入，也可写它们对应的代码。
<pre>
§ 分节符 §
© 版权符 ©
® 注册商标 ®
™ 商标 ™
€ 欧元 €
£ 英镑 £
¥ 日元 ¥
° 度 °</pre>
2 列表
2.1 有序列表；
2.2 无序列表；
2.3 定义列表；
2.1 有序列表
ol——ordered list
li——list
<ol type=“a/A/i/I”>
<li></li>
<li></li>
<li></li>
</ol>
<ol>内部不能存在任何其它标签。
<ol>与<li>标签配合使用，不能单独使用。<li>标签数量不限。
列表在HTML中有type属性，但实际中是用CSS如ol{list-style-type: lower-roman ;}来控制的。
2.2 无序列表
ul——unordered list
li——list
<ul type="disc/circle/square">
<li></li>
</ul>
无序列表的使用极其广泛，基本上凡是列表型展示信息的地方都用到了它。
配合CSS样式使用。
2.3 定义列表
dl——definition list
dt——definition term
dd——definition description
<dl>
<dt>要解释的名词</dt>
<dd>该名词的具体解释/会显示文本缩进效果</dd>
</dl>
3 表格
3.1 基本结构/必备
table——table/表格
tr——table row/表格行
td——table data cell/表格单元格
==================================
<table>
<tr>
<td>行1单元格1</td>
<td>行1单元格2</td>
</tr>
<tr>
<td>行2单元格1</td>
<td>行2单元格2</td>
</tr>
</table>
3.2 完整结构
caption——caption/表格标题
th——table header/表头单元格
<!--以下为单纯为语义化而设的标签-->
thead——表头
tbody——表身
tfoot——表脚
=======================================
<table>
<caption>标题</caption>
<thead>
<tr>
<th>表头单元格</th>
</tr>
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
3.3 合并行&和并列
rowspan属性//合并行
colspan属性//和并列
<td rowsoan="合并的行数"> //td——标准单元格
<td colspan="合并的列数">
rowspan——合并行，将其它行的单元格向右方挤了一个格。
4 图片标签
4.1 图像img标签
img——
src——source/源文件 - 图像路径
alt——
title——
====================================
<img src="路径" alt="图片描述/给搜索引擎看" title="图片描述/给用户看"/>
4.2 相对路径&绝对路径
相对路径
- /image/icon1.png
- ../image/icon1.png
绝对路径 - c:/webpage/image/icon1.png
做网站时，采用相对路径。
4.3 图片的格式
4.3.1 位图
- 位图简介
- 位图，又称“点阵图像”；
- 通常分为8位/28（即256）、16位、24位（又称“真彩色”，基本是人眼可分辨颜色的极限；常用）和32位（也是224种颜色，只是增加了28阶颜色的灰阶，即8位透明度）
- 位图格式——3种格式：“.jpg”、“.png”、“.gif”
- JPG可以很好处理大面积色调的图像，如照片、图画等；
- PNG支持透明信息，可用来处理一些logo、banner、简单线条构图；
- GIF只支持256色以内的图像，通常只适合表达动画效果/或者用SVG动画或CSS3来实现。
4.3.2 矢量图
- 矢量图简介
- 矢量图，又称“向量图”；以一种数学描述的方式来记录图像内容；
- 放大缩小不会失真；难以表现色彩层次丰富的图像
- 矢量图格式——“.ai”、“.cdf”、“.fh”、“.swf”等
- “.ai” 静帧的矢量文件格式；
- “.cdf” 常见于工程图
- “.swf” 指的其实是flash
5 超链接/hyperlink
a——
<a href="链接地址" target="窗口打开方式">超链接文字</a>
5.1 href
5.1.1 内部链接&外部链接
- 内部页面链接
使用相对路径； - 锚点链接
指向当前页面某部分的链接。
<a href="#music">推荐音乐</a>
#music是某个元素的id名。
name是HTML中的标准，id是XHTML中的标准；
在web2.0的网页中使用id属性，极少使用name属性。
5.1.2 外部链接
指外部页面链接
5.2 target
target属性值
- _self 默认；在当前窗口打开
- _blank 在新窗口打开
- _top
- _parent
6 表单（重要！）
6.1 form标签
<form name="表单名称" action="表单提交地址" method="提交方法 - get/post" target="显示方式 - 同a标签里的target属性" enctype="编码方式 - 默认即可 不需设置">
<input type="text" value="这是一个文本框"/><br/>
<textarea></textarea><br/>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</form>
表单对象，即放在<form>标签内的各种标签；
有3种：① input；②textarea；③select和option。
6.1.1 name属性
6.1.2 action属性
- 邮件形式
action="mailto:xxx@xxx.com"
6.1.3 method属性
- get
默认值，安全性较差，所有表单域的值直接显示出来 - post
实际开发常用，除可见的处理脚本程序外，所有信息都可以隐藏
6.1.4 target属性
6.1.5 enctype属性
application/x-www-form-urlencoded
multipart/form-data MIME编码，“上传文件”选择该值。
一般采用默认值就可以，enctype属性不需要设置。
6.2 input标签
<input type="表单类型" /> //自闭合标签
6.2.1 text & password——单行&密码文本框
<input type="text/password" value="文本框内默认文字" size="文本框长度/以字符为单位" maxlength="最多输入字符数"/>
====================================================
账号：<input type="text" size="15" maxlength="10"/><br/>
密码：<input type="password" size="15" maxlength="10"/>
value size maxlengh是可选的
6.2.2 radio——单选按钮
<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"/>
================================================
实例
你是：
<input type="radio" name="Question2" value="90"/>90后
<input type="radio" name="Question2" value="00"/>00后
<input type="radio" name="Question2" value="else"/>其他
name和value属性必写；
name值不同，则不在同一组别中；
value用来向后端传数据；
6.2.3 checkbox——复选框
<input type="checkbox" value="复选框取值" checked="checked"/>
==============================
实例
你喜欢的水果：<br />
<input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">苹果</label><br />
<input id="checkbox2" type="checkbox" /><label for="checkbox2">香蕉</label><br />
<input id="checkbox3" type="checkbox" /><label for="checkbox3">西瓜</label><br />
<input id="checkbox4" type="checkbox" /><label for="checkbox4">凤梨</label>
checked属性表示该选项在默认情况下已被选中，可以有多个选项被选中
HTML中的复选框是没有文本的，需要加入label标签，并且用label标签的for属性指向复选框的id。
6.2.4 button——普通按钮
<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
==========================
单击按钮弹出对话框：<br/>
<input type="button" value="按钮" onclick="alert('你点击了按钮！')">
一般配合JS来实现
6.2.5 submit & reset——提交&重置按钮
<input type="submit/reset" value="显示在按钮上的文字"/>
均是对当前所在form标签而言的；可以看做是具有特殊功能的普通按钮。
submit：将表单内容提交给服务器；
reset：清除用户在表单中输入的信息。
6.2.6 image——图像域
<input type="image" src="图像的路径"/>
====================================
账号：<input type="text"/><br/>
密码：<input type="text"/><br/>
<!--3个牛逼SP-->
<input type="image" src="images/登陆按钮.jpg"/>
但实际开发中，图片往往传输数据大，要尽量少用图片；更多用CSS3来实现。
6.2.7 hidden——隐藏域
<input type="hidden" value="10"/>
有时候我们想要在页面传送一些数据，但是又不想让用户看见，这个时候我们可以通过一个隐藏域来传送这样的数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。
在动态页面（如ASP.NET入门）中，会看到它真正的用处。
尽量不要使用hidden来传递敏感信息，如密码、手机号码等。
6.2.8 file——文件域
<input type="file"/>
当使用文件域file时，必须在form的标签中说明编码方式enctype=“multipart/form-data”。这样，服务器才能接收到正确的信息。
文件域file在HTML入门没有太多东西要讲的，在后端技术教程（即ASP.NET入门教程）中我们会详细讲解。
6.3 textarea标签
<textarea rows="行数" cols="列数">多行文本框默认内容</textarea>
不能使用value属性来建立在文本域中显示的初始值；
3种文本框总结
- input标签下
- 单行文本框text
- 密码文本框password
- textarea标签下
- 多行文本框textarea
6.4 select & option标签——下拉列表
<select multiple="multiple" size="可见列表项的数目">
<option value="选项值" selected="selected">选项显示的内容</option>
……
<option value="选项值">选项显示的内容</option>
</select>
6.4.1 select标签的两个属性
- multiple属性
可选属性，只有一个属性值"multiple"；
默认情况下下拉列表只能选择一项，当设置multiple=“multiple”时，下拉列表可以选择多项；
想要选取多项，使用“Ctrl+鼠标左键”即可。//？？？ - size属性
用来定义下拉列表展开之后可见选项的数目，有些浏览器只支持4以上的数。
6.4.2 option标签的两个属性
- value属性
用来向后端传数据。 - selected属性
只有一个属性值"selected"；
表示这个列表项是否选中，跟单选按钮radio的checked是一样的意思。
6.5 表单按钮 V.S button标签按钮
<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
<button>文本或img标签</button>
======================================================
实例（二者表示效果一样）
button标签按钮：<button>这是一个按钮</button><br/>
表单标签按钮：<input type="button" value="这是一个按钮"/>
在设计表单中，应该使用表单按钮<input type="button"/>，因为这涉及到提交数据到服务器。如果想让按钮设计得美观一点，并且不是在表单提交数据的情况下，那就使用button标签按钮。
真正的开发中，漂亮美观的按钮更多时候是用div标签来实现，并且结合CSS来修饰。
表单元素不一定都要放在form标签内。对于要与服务器进行交互（也可以说是跟网站后台进行交互）的表单元素就必须放在form标签内才有效。然后，如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。
7 多媒体
7.1 embed标签（HTML5新增）——插入音频、视频、动画
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>
flash文件：.swf
width和height使用px作为单位。
7.2 bgsound标签——插入背景音乐
bgsound——background sound
<bgsound src="背景音乐的地址/相对路径" loop="播放次数 - 2... / infinite / -1" />
使用bgsound设置背景音乐，没有操作界面;当窗口最小化时就自动暂停播放，窗口恢复时，继续播放。
bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
除了使用bgsound标签，还可使用embed标签和object标签。
8 浮动框架iframe
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>
HTML5已经舍弃了frameset标签（框架集标签）
scrolling属性的取值
- auto 默认，左对齐
- yes 总是显示滚动条
- no 总是不显示滚动条
8 标签语义表
标签名 英文全称 中文解释
div division 分割（块元素）
span span 区域（行内元素）
hr horizontal rule 水平线
a anchor 锚点，超链接
strong strong 强调（粗体）
em emphasized 强调（斜体）
sup superscripted 上标
sub subscripted 下标
br break 换行
fieldset fieldset 域集
legend legend 图例
caption caption （表格、图像等）标题
