I love you three thousand

# 常用元素

本文档包括以下元素：

  • 与文本有关的元素
  • 列表元素
  • 链接元素
  • 图像元素
  • 表格元素

# 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>

← 表单元素 →