# 常用元素
本文档包括以下元素：
- 与文本有关的元素
- 列表元素
- 链接元素
- 图像元素
- 表格元素
# 1. 与文本有关的元素
HTML 中的标题有六个级别，<h1> 用在主标题上，<h2> 用在子标题上，如果在子标题下还有分段，就可以使用元素 <h3> 。
在成段落的文字两段使用 <p> 元素的标签，就构成了 HTML 中的段落。默认情况下，浏览器在显示段落时会『另起一行』 ，且与后续/下面内容保持一定距离。
通过将文字包含在 <strong> 元素内，可以将文字显示为粗体。
<strong> 元素的『前身』<b> 元素 HTML5 不建议使用。
<em> 元素所包含的文字将显示为斜体。
<em> 元素的『前身』<i> 元素 HTML5 不建议使用。
<b>和<i>不建议使用是因为 HTML5 要求使用『语义化』元素。
浏览器在『翻译』HTML文件时，会有一个空白符压缩规则。当浏览器遇到两个或连个以上的连续空白符（空格、回车、tab）时，仅显示为一个空格。
页面效果中的换行符并非由文档内容中的 换行 决定，而是使用 <br/> 元素。显而易见，<br/> 元素是一个单标签元素。
<hr/> 元素会在界面上显示一条水平线。
# 2. 列表元素
HTML 提供了三种不同的列表
- 有序列表（ordered list）是指为其中每个项目编号的列表。
- 无序列表（un-ordered list）是指以点状符号作为开头的列表。
- 定义列表（defined list）是由一系列术语及其定义组成的列表。
使用 <ol> 元素创建有序列表，列表中的列表项使用 <li> 元素包含。显而易见，<li> 元素是 <ol> 元素的子元素。
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
<ol> 元素 type 属性可以用来定义编号类型（数字、字母、罗马数字等），不过最好利用 CSS 中的 list-style-type 属性来定义编号类型（后续讲解）。
使用 <ul> 元素创建无需列表，列表中的列表项使用 <li> 元素包含。
<ul> 元素 type 属性可以用来定义符号类型（圆形、正方形、菱形等），不过最好利用 CSS 中的 list-style-type 属性来定义编号类型（后续讲解）。
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
定义列表常用语描述名字及其相关定义。它由 <dl> 元素创建，其内部 <dt> 和 <dd> 元素成对出现。
<dt> 元素用来包含需要定义的名词。<dd> 元素用来包含名词解释。
<dl>
<dt>...</dt></dd>...</dd>
<dt>...</dt></dd>...</dd>
<dt>...</dt></dd>...</dd>
</dl>
可以在 <li> 元素中放入另一个列表来创建子列表。这也叫 列表的嵌套。
# 3. 链接元素
链接是由 <a> 元素创建的。用户可以点击 <a> 元素起始标签和结束标签之间的任何内容。使用它的 href 属性来指定要链接到的页面。
href 属性值可以使一个绝对 URL，也可以是一个相对 URL。
<a href="http://...">...</a>
默认情况下，链接文本在浏览器中显示为蓝色并带有下划线。
如果希望在新窗口打开链接，就需要再使用 <a> 元素的 target 属性，并把这个属性的值设置为 _blank 。
<a href="http://..." target="_blank">...</a>
# 4. 图像元素
使用 <img> 元素可以向页面中添加图像。<img> 元素是一个单标签元素，它必须使用两个属性：src 属性 和 alt 属性。
- src 属性
- 用来告诉浏览器到何处寻找所需的图像文件。它的值通常是一个网站内部相对 URL。
- alt 属性
- 用来对图片进行文本描述。在无法查看图像时（如网络问题），这段文字会显示在浏览器上。
- title 属性
- 用来提供图片的附加信息。大部分浏览器在光标悬停在图像时会以提示的方式显示 **title** 属性的值。
图像本身是有大小的，描述方式通常宽-高，单位是像素。默认情况下，<img> 所显示的图像在浏览器上所占据的空间大小就是图像本身的大小。
<img> 元素的 height 属性 和 width 属性可以人为指定图片，单位为像素。但是有图片变形的风险。
# 5. 表格元素
最基本的表格结构包含：
<table>元素<tr>元素<td>元素
<table border="1" cellspacing="0">
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
<table> 元素用来创建表格。表格的内容是逐行编写。
<tr> 元素表示每一行（table row）
表格中的每个单元格使用 <td> 元素表示（table data）。
<th> 元素和 <td> 元素用法一样，只不过它专用于表示表格的 列的标题 和 行的标题 。
<th> 元素有个 scope 属性，其值可以为 col | row，它可以用来『暗示』当前 <th> 是 列标题 还是 行标题 。
<table border="1" cellspacing="0">
<tr>
<th scope="col">列标题1</th>
<th scope="col">列标题2</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<table border="1" cellspacing="0">
<tr>
<th scope="row">行标题1</th>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th scope="row">行标题2</th>
<td>内容</td>
<td>内容</td>
</tr>
</table>
即使一个单元格中没有任何内容，你仍需要使用一个 <td> 表示这是一个空单元格，否则表格将无法正确显示。
有时你可能需要让表格中的某个单元格跨越多个列（横着发展）。你可以使用 <td> 元素的 colspan 属性来表明单元格所要跨越的列数。
有时你可能需要让表格中的某个单元格跨越多行（竖着发展）。你可以使用 <td> 元素的 rowspan 属性来表明单元格所要跨越的行数。
最『啰嗦』的 <table> 中其实分为 头-体-尾 三部分：
<table border="1" cellspacing="0">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
← 单标签元素与双标签元素 表单元素 →