recursal/MDN huggingface dataset:
<div>：内容划分元素
============

**HTML `<div>` 元素** (或 *HTML 文档分区元素*) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

尝试一下
----

作为一个“纯粹的”容器，`<div>` 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用`class`或是`id`属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用`lang` 属性）等等。

|  |  |
| --- | --- |
| 所属内容分类（Content categories） | Flow content, palpable content. |
| 允许的子元素 | Flow content.Or (in WHATWG HTML): If the parent is a `<dl>` element: one or more `<dt>` elements followed by one or more `<dd>` elements, optionally intermixed with `<script>` and `<template>` elements. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | Any element that accepts flow content.Or (in WHATWG HTML): `<dl>` element. |
| Permitted ARIA roles | Any |
| 所使用的 DOM API 接口 | `HTMLDivElement` |

属性
--

该元素支持所有全局属性。

**备注：** `align` 属性已废弃；不要再使用它了。你应当使用 CSS Grid 或 CSS Flexbox 来对齐、定位页面上的 `<div>` 元素。

使用说明
----

* `<div>` 元素应当仅在没有任何其他语义元素（比如 `<article>` 或 `<nav>`）可用时使用。
示例
--

### 一个简单的示例


```html
<div>
  <p>这里可以是任何内容，比如 &lt;p&gt;, &lt;table&gt;，一切由你作主！</p>
</div>
```


结果看起来像这样：

### 样式实例

本例使用 CSS 将样式应用于<div>，从而创建一个阴影框。注意使用<div>上的 `class`属性将名为“shadowbox”的样式应用于元素。

#### HTML


```html
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>
```


#### CSS


```css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-div-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Semantic sectioning elements: `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`
* `<span>` element for styling of phrasing content
<th>
====

**HTML `<th>` 元素**定义表格内的表头单元格。这部分特征是由 `scope` 和 `headers` 属性准确定义的。

|  |  |
| --- | --- |
| 内容范畴 (en-US) | 无 |
| 允许内容 | 
流内容（除 header、footer、sectioning content 或 heading content 的继承。）
 |
| 遗漏标签 | 开始标签是必需要的，而结束标签有时可以省略：当其后是`<th>` 或 `<td>` (en-US) ，或者其后没有其他数据内容在其父元素内，。 |
| 允许的父级元素 | `<tr>` 元素 |
| 元素类型 | 任何 |
| DOM 接口 | `HTMLTableHeaderCellElement` (en-US) |

属性
--

该元素包含 全局属性

`abbr` 
已弃用

这个属性包含一个关于单元格内容的简单的介绍。一个用户代理（例如，语音阅读器）可能出现在描述之前。

**备注：** 不要使用这个属性，因为它已经在最新标准中过时。相对的，你可以把简短的描述放置于单元格内，把较长的描述内容放到 title 属性内。

`align` 
已弃用

这个枚举属性指定单元格内容的水平对齐方式。可能的值有：

* `left`: 单元格内容左对齐
* `center`: 单元格内容居中
* `right`: 单元格内容右对齐
* `justify` (仅文字内容): 内容拉伸以覆盖单元格
* `char` (仅文字内容): 内容相对`<th>`标签中的某个字符对齐（默认值是页面语言的小数点字符）。该字符由`char` 和`charoff` 属性定义。对齐方式的默认值是 `left`.

**备注：** 不要使用这个属性，因为它已经在最新标准中过时。

* `left`, `center`, `right` 或 `justify` 这些对齐效果，应该使用 CSS 的`text-align` 来实现。
* `char` 的对齐效果使用 CSS 的 `text-align` 实现， `char`亦同。未实现 in CSS3.

`axis` 
已弃用

这个属性包含了一个空间分隔的字符串的列表。每个字符串是一组单元格的 ID，而该表头适用于这个 ID。

**备注：** 不要使用这个属性，因为它已经在最新标准中过时。应该使用 `scope` 属性代替。

`bgcolor` 
非标准

这个属性定义了每列中每单元格的背景色。它由带有‘#’前缀的 6 位数的十六进制码组成，并在sRGB中被定义。这个属性可能会用到十六个预定义的颜色字符串儿之一。

**备注：** 不要使用这个属性，它不是标准属性且仅在某些版本的 Microsoft Internet Explorer 支持：`<th>` 元素应当用CSS来样式化。为了创造出同样的效果只需要使用CSS中的`background-color`属性就可以啦。

`char` 
已弃用

列中的内容与`<th>` 元素中的字母对齐。通常其值包含一个 (.) 来排列数字或者货币值。如果 `align`没有被设置为`char`，这个属性就会被忽略。

**备注：** 不要使用这个属性，因为它已经在最新标准中过时。为了达到同样的效果，你可以指定该字母为`text-align` 属性中的第一个值，或通过 CSS3 中的未实现。

`charoff` 
已弃用

这个属性用来将列数据移到 **char** 属性指定字母的右边。其值指定了移动的长度。

**备注：** 不要使用这个属性，因为它已经在最新标准中过时。

`colspan`

这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为`1` 。超过 1000 的值被视作 1000。

`headers`

这个属性包含了一个空间分隔的字符串的列表，每个与其他`<th>`元素相关联的`id` 属性一一对应。

`rowspan`

这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为`1.` 如果该值被设置为 `0`, 这个单元格就被扩展为 (`<thead>`，`<tbody>` 或`<tfoot>`) 中表格部分的最后一个元素。比 65534 大的值被视作 65534。

`scope`

这个枚举属性定义了表头元素 (在`<th>`中定义) 关联的单元格。它可能有以下值：

* `row`: 表头关联一行中所有的单元格。
* `col`: 表头关联一列中所有的单元格。
* `rowgroup`:表头属于一个行组并与其中所有单元格相关联。这些单元格可以被放在表头的左侧或右侧，取决于 `<table>` 元素中 `dir` 属性的值。
* `colgroup`: 表头属于一个列组并与其中所有单元格相关联。
* `auto`

`valign` 
已弃用

这个属性指定了单元格内文本的垂直对齐方式。这个属性可能有以下值：

* `baseline`: 将文本置于单元格底部并将其与字母的baseline对齐而不是与底部。若字母没有 `baseline` 以下的部分（即为无降部）那么 `baseline` 值起到的效果便和 `bottom` 相同。
* `bottom`: 将文本置于底部。
* `middle`: 将文本置于单元格中央。
* `top`: 将文本置于单元格顶部。

**备注：** 不要使用这个属性，因为它已经在最新标准中过时。使用 CSS `vertical-align`特性代替。

`width` 
已弃用

这个属性用来定义一个期望的单元格宽。额外的空间可以藉由cellspacing (en-US)和 cellpadding (en-US) 属性来增加，并且`<col>`元素的宽也可以创造额外空间。但是，如果一列宽太窄以至于无法恰当显示 某单元格时，它会被自动加宽。

**备注：** 不要使用这个属性，因为它已经在最新标准中过时。使用 CSS `width`属性代替。

示例
--

参考 `<table>` 中 `<th>`的示例内容。

规范
--

| Specification |
| --- |
| HTML Standard # the-th-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参阅
--

* Other table-related HTML Elements: `<caption>`, `<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>` (en-US), `<tfoot>`, `<thead>`, `<tr>`.
<track>
=======

**HTML `<track>` 元素** 被当作媒体元素—`<audio>` 和 `<video>`的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 WebVTT 格式 (en-US)（`.vtt`格式文件）— Web 视频文本字幕格式，以及指时序文本标记语言（TTML）格式。

`track` 给媒体元素添加的数据的类型在 `kind` 属性中设置，属性值可以是 `subtitles`, `captions`, `descriptions`, `chapters` 或 `metadata`。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个`media` 元素的任意两个 `track` 子元素不能有相同的 `kind`, `srclang`, 和 `label`属性。

尝试一下
----

使用上下文
-----

|  |  |
| --- | --- |
| **内容分类** | 无 |
| **允许的内容** | 无，它是一个 空元素。 |
| **标签省略** | 允许省略，因为他是一个空元素，所以开始标签必须存在，结束标记可以省略。 |
| **允许的父元素** | 媒体元素，流内容 (en-US)之前。 |
| **允许的 ARIA 角色** | 无 |
| **DOM 接口** | `HTMLTrackElement` (en-US) |

属性
--

该元素包含 全局属性 (en-US)。

`default`

该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个 track。每个媒体元素里面只有一个 `track` 元素可以有这个属性。

`kind`

定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 `subtitles`。下面是允许的关键字：

* `subtitles`
    + 字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
    + 字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。
* captions
    + 隐藏式字幕提供了音频的转录甚至是翻译。
    + 可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).
    + 适用于耳聋的用户或者当调成静音的时候。
* `descriptions`
    + 视频内容的文本描述。
    + 适用于失明用户或者当视频不可见的场景。
* `chapters`
    + 章节标题用于用户浏览媒体资源的时候。
* `metadata`
    + 脚本使用的 track。对用户不可见。

`label`

当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。

`src`

track 的地址。必须是合法的 URL。该属性必须定义。

`srclang`

track 文本数据的语言。它必须是合法的 BCP 47 语言标签。如果 `kind` 属性被设为 `subtitles`, 那么 `srclang` 必须定义。

用法说明
----

### 轨道数据类型

`track` 给媒体元素添加的数据的类型在 `kind` 属性中设置，属性值可以是 `subtitles`, `captions`, `descriptions`, `chapters` 或 `metadata`。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个`media` 元素的任意两个 `track` 子元素不能有相同的 `kind`, `srclang`, 和 `label`属性。

示例
--
```

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3">
   <!-- Fallback -->
   ...
</video>
```

规范
--

| Specification |
| --- |
| HTML Standard # the-track-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参阅
--

* WebVTT text track format (en-US)
<ul>：无序列表元素
===========

HTML **`<ul>`** 元素表示一系列无序的列表项目，通常渲染为项目符号列表。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容，如果 `<ul>` 元素的子元素包含至少一个 `<li>` 元素，则为
 可感知内容。
  |
| 允许的内容 | 0 或多个 `<li>` 元素、`<script>` 和 `<template>` 元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受流式内容的元素。 |
| 隐式 ARIA 角色 | `list` |
| 允许的 ARIA 角色 | `directory` (en-US)、`group` (en-US)、`listbox`、`menu` (en-US)、`menubar` (en-US)、`none` (en-US)、`presentation` (en-US)、`radiogroup` (en-US)、`tablist` (en-US)、`toolbar` (en-US)、`tree` (en-US) |
| DOM 接口 | `HTMLUListElement` (en-US) |

属性
--

此元素包含全局属性。

`compact` 
已弃用

非标准

此布尔属性提示列表是否需要被渲染为更紧凑的样式。用户代理决定如何解释这个属性，且并非所有浏览器都支持它。

**警告：** 不要使用这个属性，因为它已经被废弃了：请使用 CSS 来更改样式。如果想达到与 `compact` 属性相同的效果，将 CSS 属性 `line-height` 的值设为 `80%` 即可。

`type` 
已弃用

非标准

用于设置列表的着重号样式，定义于 HTML3.2 和过渡版本 HTML 4.0/4.01 中的可用值有：

* `circle`
* `disc`
* `square`

存在第四种定义于 WebTV 接口的着重号样式，但并不是所有浏览器都支持：`triangle`。

如果未设置此 HTML 属性且没有 CSS `list-style-type` 属性作用于这个元素，用户代理会决定使用哪种着重号样式，一般来说这也和嵌套的层级数有关。

**警告：** 不要使用这个属性，它已经被废弃了：请使用 CSS `list-style-type` 属性作为代替。

使用说明
----

* `<ul>` 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形。虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 `list-style-type` 属性。
* `<ul>` 和 `<ol>` 元素可以嵌套任意深度。此外，嵌套列表可以不受限制地在 `<ol>` 和 `<ul>` 之间交替使用。
* `<ol>` 和 `<ul>` 元素二者都代表一组数据，不过它们彼此是有区别的，`<ol>` 元素中的顺序是有意义的。如果想确定到底需要使用哪一个列表元素，可以试着去改变数据的顺序。如果想表达的语义改变了，就需要使用 `<ol>` 元素，否则该使用 `<ul>` 元素。
示例
--

### 简单的示例


```html
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>
```


以上 HTML 将输出：

### 嵌套列表


```html
<ul>
  <li>第一项</li>
  <li>
    第二项
    <!-- 注意，关闭的 </li> 标签没有放置在这里！-->
    <ul>
      <li>第二项第一子项</li>
      <li>
        第二项第二子项
        <!-- 第二个嵌套的无序列表也一样！-->
        <ul>
          <li>第二项第二子项第一子子项</li>
          <li>第二项第二子项第二子子项</li>
          <li>第二项第二子项第三子子项</li>
        </ul>
      </li>
      <!-- 为包含第三个无序列表的 li 关闭 </li> 标签 -->
      <li>第二项第三子项</li>
    </ul>
    <!-- 关闭的 </li> 标签在这里！ -->
  </li>
  <li>第三项</li>
</ul>
```


以上 HTML 输出：

### 无序列表中的有序列表


```html
<ul>
  <li>第一项</li>
  <li>
    第二项
    <!-- 注意，关闭的 </li> 标签没有放置在这里！ -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
    <!-- 关闭的 </li> 标签在这里 -->
  </li>
  <li>第三项</li>
</ul>
```


以上 HTML 将输出：

规范
--

| Specification |
| --- |
| HTML Standard # the-ul-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他列表相关的 HTML 元素：`<ol>`、`<li>` 和 `<menu>`
* 可能对 `<ul>` 元素的样式特别有用的 CSS 属性：
    + `list-style` 属性，用于选择显示序数的方法。
    + CSS 计数器，用于操作复杂的嵌套列表。
    + `line-height` 属性，用于模拟过时的 `compact` 属性。
    + `margin` 属性，用于控制列表的缩进。
<tfoot>
=======

HTML 元素 **`<tfoot>`** 定义了一组表格中各列的汇总行。

|  |  |
| --- | --- |
| 内容类别 | 无。 |
| 允许的内容 | 0 或多个`<tr>` 元素。 |
| 标签省略 | 开始标签是必需的。在父元素 `<table>` 没有后续内容的情况下，结束标签可被省略。 |
| 允许的父元素 | `<table>` 元素。`<tfoot>` 必须出现在一个或多个 `<caption>`，`<colgroup>`，`<thead>`, `<tbody>`，或 `<tr>` 元素之后。注意这是自 HTML5 起有的要求。`<tfoot>` 元素不能放在任何 `<tbody>` 或 `<tr>` 元素之后。注意，这与上述 HTML5 的标准相冲突。 |
| Permitted ARIA roles | 任意。 |
| DOM 接口 | `HTMLTableSectionElement` (en-US) |

属性
--

此元素包含 全局属性.

`align` 
已弃用

此枚举属性指定每个单元格内容所使用的水平对齐方式。可选值为：

* `left`，单元格内容左对齐
* `center`，单元格内容居中对齐
* `right`，单元格内容右对齐
* `justify`，插入空白调整单元格中的文本内容（译者注：即两端对齐）
* `char`，将文本内容与一个具有最小偏移量的特定字符对齐，字符和偏移量分别由`char` 和 `charoff` 属性定义。若此值未设置，则假定为 `left`。

**备注：** 此属性在最新标准中已被废弃（不支持），所以请勿使用。

* 为达到与`left`, `center`, `right`或`justify`相同的效果，请使用 CSS `text-align`属性。
* 为达到与 char 值相同的效果，在 CSS3 中可将 `char` 的值用作 `text-align` 的属性值。

`bgcolor` 
非标准

此属性定义了列内单元格的背景色。定义此属性使用'#'作为前缀，其后是定义于sRGB的 6 位十六进制码。也可使用 16 种预定义的色彩字符串之一。

**备注：** 请勿使用此属性，因为这并非标准，且只有某些特定版本的 Microsoft Internet Explorer（IE 浏览器）支持：`<tfoot>`元素应使用CSS设计。若想得到与**bgcolor**属性相似的效果，可在相关的 `<td>` (en-US)或`<th>`元素中使用CSS `background-color`属性。

`char` 
已弃用

此属性设置单元格对齐的基准字符。当对齐数字或货币值时，一个典型值会带有一个句点 (.)。如果`align`未设置为`char`，此属性将被忽略。

**备注：** 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。想要达到与`char`相同的效果，在 CSS3 中，可将`text-align`属性设置为`char`的属性值。

`charoff` 
已弃用

此属性用作表明列内数据对于对齐基准字符的偏移字符数，对其基准字符由`char`属性指定。

**备注：** 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。

`valign` 
已弃用

此属性指定表头（译者注：英文原文为 table header，疑似错误）中每一行内的文本的垂直对齐方式。此属性的可选值为：

* `baseline`，会使文本尽可能接近单元格底部，但并不向底部对齐，而将它们以字符基线对齐。如果所有字符的大小相同，此值与`bottom`的效果相同；
* `bottom`，设置文本向下对齐；
* `middle`，设置文本居中对齐；
* and `top`，设置文本向上对齐。

**备注：** 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）：使用 CSS 属性`vertical-align`作为替代。

示例
--

请查看`<table>`页面中`<tfoot>`的相关示例。

规范
--

| Specification |
| --- |
| HTML Standard # the-tfoot-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他 table 相关的 HTML 元素：`<caption>`, `<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>` (en-US), `<tbody>`, `<th>`, `<thead>`, `<tr>`;
* 在设计`<tfoot>`时可能会有特殊效果的 CSS 属性和伪类：
    + `:nth-child`伪类：设置列内元素的对齐方式；
    + `text-align`属性：可设置单元格内容与同一字符对齐，例如'.'。
<nav>
=====

**HTML `<nav>`元素**表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 (en-US) | 流式内容 (en-US), 区块内容 (en-US), 可视的内容。 |
| 允许的内容 | 流式内容 (en-US). |
| 忽略的标记 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 所有允许流式内容 (en-US)的元素 |
| 允许的 ARIA roles | None |
| DOM 接口 | `HTMLElement` |

属性
--

这个元素只包含全局属性 (en-US).

*使用说明*
------

* 并不是所有的链接都必须使用`<nav>`元素，它只用来将一些热门的链接放入导航栏，例如`<footer>`元素就常用来在页面底部包含一个不常用到，没必要加入`<nav>`的链接列表。
* 一个网页也可能含有多个`<nav>`元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表。
* 对于屏幕阅读障碍的人，可以使用这个元素来确定是否忽略初始内容。
示例
--


```xml
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

规范
--

| Specification |
| --- |
| HTML Standard # the-nav-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

更多
--

* 其他部分相关元素：`<body>`, `<article>`, `<section>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`;
* HTML5 的文档节段和纲要.
* ARIA: Navigation role (en-US)
<u>：未阐明的注释（下划线）元素
=================

HTML **`<u>`** 元素表示行内文本拥有一个非文本形式的注释，该注释需要以某种方式渲染出来。默认情况下渲染为一个实线下划线，可以用 CSS 替换。

**警告：** 此元素以前在旧版本的 HTML 中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，你应该应用包含 CSS `text-decoration` 属性设置为 `underline` 的样式。

尝试一下
----

有关何时适合使用 `<u>` 以及何时不使用 `<u>` 的详细信息，请参阅使用说明部分。

属性
--

这个元素仅包含全局属性。

使用说明
----

就像所有纯样式元素那样，原本的下划线元素（`<u>`）在 HTML 4 中被废弃。但是 `<u>` 在 HTML 5 中被恢复，并被赋予了一个新的语义：将文本标记为应用了某种形式的非文本注释。

**备注：** 在可能和超链接混淆的地方，避免使用默认样式的 `<u>` 元素，它们都默认用下划线装饰。

### 示例

`<u>` 元素的有效用例包括标注拼写错误、向中文文本中的专有名称添加专名号，以及其他形式的注释。

你**不**应该使用 `<u>` 为文字添加视觉上的下划线，或者表示书籍的标题。

### 要考虑使用的其他要素

在大多数情况下，你应该使用 `<u>` 以外的元素，例如：

* 用 `<em>` 来强调重点
* 用 `<b>` 来吸引对文字的注意
* 用 `<mark>` 来标记关键词或短语
* 用 `<strong>` 来表明文本具有重要意义
* 用 `<cite>` 来标记书籍或其他出版物的标题
* 用 `<i>` 来表示西方文本中的技术术语、音译、思想或船名

要提供文本注释（与使用 `<u>` 创建的非文本注释相对），请使用 `<ruby>` 元素。

要在没有任何语义含义的情况下应用下划线外观，请使用 `text-decoration` 属性的 `underline` 属性值。

示例
--

### 表示拼写错误

此示例使用 `<u>` 元素和一些 CSS 来显示包含拼写错误的段落，其中错误以通常用于此目的的红色波浪下划线样式表示。

#### HTML


```html
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
```


在 HTML 中，我们用 `<u>` 元素及 `spelling` 类来表示“wrnogly”一词的拼写错误。

#### CSS


```css
u.spelling {
  text-decoration: red wavy underline;
}
```


这个 CSS 表示当 `<u>` 元素使用类 `spelling` 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 `red dashed underline`。

#### 结果

用过任意目前比较流行的文字处理软件的人应该都对结果感到熟悉。

### 避免使用 <u>

大多数情况下，你实际上不想使用 `<u>`。以下是一些示例，显示在几种情况下你应该做什么。

#### 非语义下划线

要在不暗示任何语义含义的情况下为文本加下划线，请使用 `<span>` 元素并将 `text-decoration` 属性设置为 `underline`，如下所示。

##### HTML


```html
<span class="underline">今日特供</span>
<br />
胡萝卜鸡丁面
```


##### CSS


```css
.underline {
  text-decoration: underline;
}
```


##### 结果

#### 表示书名

书籍标题应使用 `<cite>` 元素而不是 `<u>` 甚至 `<i>` 来呈现。

##### 使用 cite 元素


```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```


##### 为 cite 元素添加样式

`<cite>` 元素的默认样式会以斜体显示文本，你可以使用 CSS 覆盖它：


```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```



```css
cite {
  font-style: normal;
  text-decoration: underline;
}
```

技术概要
----

|  |  |
| --- | --- |
| 内容类别 | 流式内容、短语内容、可感知内容。 |
| 允许的内容 | 短语内容 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容的元素。 |
| 隐式 ARIA 角色 | 无对应角色 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

规范
--

| Specification |
| --- |
| HTML Standard # the-u-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 通常应使用 `<span>`、`<i>`、`<em>`、`<b>` 或 `<cite>` 元素代替。
* 应当使用 CSS `text-decoration` 属性添加非语义的下划线。
<aside>
=======

**HTML `<aside>` 元素**表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 (en-US) | 流式元素、章节元素、可触摸内容。 |
| 允许的内容 | 流式元素. |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 所有元素接受流式元素。注意 `<aside>` 不能是`<address>` 元素的后代 |
| 允许的 ARIA 角色 | `feed` (en-US), `note` (en-US), `presentation` (en-US), `region` (en-US), `search` (en-US) |
| DOM 接口 | `HTMLElement` |

属性
--

此元素只有全局属性 (en-US)。

使用说明
----

* 不要使用 `<aside>` 元素去尾随括号内的文本，因为这种文本被认为是主要流内容的一部分。
示例
--


```html
<article>
  <p>
    迪斯尼电影<cite>海的女儿</cite>（<cite>The Little Mermaid</cite>）于 1989
    年首次登上银幕。
  </p>
  <aside>在首次发行期间，该片便收获了 8700 万美元的票房。</aside>
  <p>更多有关该电影的信息…</p>
</article>
```

规范
--

| Specification |
| --- |
| HTML Standard # the-aside-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Others section-related elements: `<body>`, `<article>`, `<section>`, `<nav>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`;
* 使用 HTML 章节与大纲
<rb>: The Ruby Base element
===========================

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**HTML Ruby Base**（`<rb>`）元素用于分隔`<ruby>`注释的基本文本组件（即正在注释的文本）。一个`<rb>`元素应该包装基本文本的每个单独的原子段。

|  |  |
| --- | --- |
| 内容范畴 | 无 |
| 允许内容 | 作为 `<ruby>` 元素的子元素。 |
| 标签省略 | 如果元素紧跟`<rt>`、`<rtc>`或`<rp>`元素或其他元素，则可省略结束标记 <rb>元素，或者如果父元素中没有其他内容。 |
| 允许的父元素 | `<ruby>`元素。 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

这个元素仅仅支持 全局属性 (en-US)。

用法注解
----

* Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 `<rb>` 元素用于分隔出 ruby 基本文本的每个片段。
* 虽然 `<rb>` 不是一个空元素，但是在源码中通常只包括每个元素的开始标签。因此 ruby 标记就不那么复杂，也更容易阅读。在渲染版本中，浏览器也可以填充完整的元素。
* 你需要为要注释的每个基本段（`<rb>`元素）包含一个`<rt>`元素。
示例
--

在此示例中，我们提供了与“hanzi”等效的原始字符的注释：


```html
<ruby> <rb>漢</rb>字 <rp>(</rp><rt>han</rt>zi<rp>)</rp> </ruby>
```


请注意我们如何包含两个`<rb>`元素，以分隔 ruby 基本文本的两个独立部分。另一方面，注释由两个`<rt>`元素分隔。

请注意，我们也可以使用完全单独注释的两个基本文本部分来编写此示例。在这种情况下，我们不需要包含`<rb>`元素：

### 支持 ruby


```html
<ruby>
  漢 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
```


```
body {
  font-size: 22px;
}
```


输出看起来像这样：

### 不支持 ruby

当在不支持 ruby 的浏览器中呈现时，上面的 HTML 可能看起来像这样：
```

漢字 (han zi)
```


```
body {
  font-size: 22px;
}
```


**备注：** 有关更多示例，请参阅有关`<ruby>`元素的文章。

规范
--

| Specification |
| --- |
| HTML Standard # rb |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* `<ruby>`
* `<rt>`
* `<rp>`
* `<rtc>`
<span>
======

**HTML `<span>`** 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如**lang**。应该在没有其他合适的语义元素时才使用它。`<span>` 与 `<div>` 元素很相似，但 `<div>` 是一个 块元素 而 `<span>` 则是 行内元素 (en-US).

尝试一下
----

* *内容分类 (en-US)* 流内容 (en-US), 表述内容 (en-US).
* *允许的内容*短语元素
* *标签省略* 不允许，开始标签和结束标签都不能省略。
* *允许的父元素*任意可以包含 表述内容 (en-US) 或 流内容 (en-US) 的元素。
* *DOM 接口*`HTMLSpanElement` (在 HTML5, 之前是 `HTMLElement`)
属性
--

该元素仅包含 全局属性 (en-US)。

例 1
---


```html
<p><span>一些文字</span></p>
```

### 结果

例 2
---


```html
<li>
  <span>
    <a href="portfolio.html" target="\_blank">See my portfolio</a>
  </span>
</li>
```

### CSS


```css
li span {
  background: gold;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-span-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* HTML `<div>` 元素
<xmp>
=====

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

概述
--

`<xmp>` 标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现。HTML2 规范建议，本标签中的内容应该具有足够容纳每行 80 个字母的宽度。

**备注：** 请不要使用这个元素。

* 从 HTML3.2 开始反对使用本元素，同时它不再会在之后版本内被推荐使用。在 HTML5 规范内，本元素已经完全被移除。
* 建议你使用`<pre>` 元素，如果有特殊需求，你可以使用 `<code>` 元素。需要你注意的是，使用元素的时候，需要将内容中的"<"转义为"&lt;"，以防止被浏览器当作正常标签解析。
* 通过CSS样式表将 `font-family` 属性的值设置成为 generic-font，可以让任何其他任何标签获得等宽字体的样式。

属性
--

该元素支持全局属性。

DOM 接口
------

本元素支持`HTMLElement` 接口。

**备注：** Gecko 1.9.2 内核及更高版本已经兼容本元素，在火狐浏览器内本元素支持使用`HTMLSpanElement`接口。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参阅
--

* 可以使用`<pre>` 和 `<code>` 元素来代替本元素。
* `<plaintext>` 和 `<listing>` 元素和`<xmp>` 类似，都已被废弃。.
<hr>：主题分割（水平分割线）元素
==================

HTML **`<hr>`** 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。

尝试一下
----

在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但它目前被定义为是语义上而非表现层面上的术语。所以如果想画一条水平线，请使用适当的 CSS 样式来实现。

属性
--

该元素包含全局属性。

`align` 
已弃用

非标准

设置页面上分割线的对齐方式。如果没有指定任何值，默认值为 `left`。

`color` 
非标准

非标准

使用颜色名或十六进制设置分割线的颜色。

`noshade` 
已弃用

非标准

令分割线不包含阴影。

`size` 
已弃用

非标准

设置分割线高度的像素值。

`width` 
已弃用

非标准

使用像素或者百分比设置分割线的宽度。

示例
--

### HTML


```html
<p>这是文本的第一段。这是文本的第一段。这是文本的第一段。这是文本的第一段。</p>

<hr />

<p>这是文本的第二段。这是文本的第二段。这是文本的第二段。这是文本的第二段。</p>
```

### 结果

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容。 |
| 允许的内容 | 无，是一个空元素。 |
| 标签省略 | 必须有开始标签，不能有结束标签。 |
| 允许的父元素 | 所有接受流式内容的元素。 |
| 隐式 ARIA 角色 | `separator` (en-US) |
| 允许的 ARIA 角色 | `presentation` (en-US) 或 `none` (en-US) |
| DOM 接口 | `HTMLHRElement` (en-US) |

规范
--

| Specification |
| --- |
| HTML Standard # the-hr-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<p>`
<figcaption>
============

**HTML `<figcaption>` 元素** 是与其相关联的图片的说明/标题，用？于描述其父节点 `<figure>` 元素里的其他数据。这意味着 `<figcaption>` 在`<figure>` 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

|  |  |
| --- | --- |
| 内容分类 (en-US) | 无 |
| 允许的内容 | 流式内容 (en-US) |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | `<figure>` 元素；`<figcaption>` 元素必须是它的第一个或者最后一个子节点。 |
| DOM 接口 | `HTMLElement` |

属性
--

仅仅包含 全局属性 (en-US)

示例
--

`<figcaption>` 的示例，请查看 `<figure>` 页面。

规范
--

| Specification |
| --- |
| HTML Standard # the-figcaption-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* `<figure>` 元素。
<object>
========

**HTML `<object>` 元素**（或者称作 *HTML 嵌入对象元素*）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

尝试一下
----

* *内容分类 (en-US)* Flow content (en-US); phrasing content (en-US); embedded content (en-US), palpable content; if the element has a **usemap** attribute, interactive content (en-US); listed (en-US), submittable (en-US) form-associated (en-US) element.
* *允许内容* zero or more `<param>` elements, then Transparent content (en-US).
* *标签闭合* 不允许，开始标签和结束标签都不能省略。
* *允许的父级元素* Any element that accepts embedded content (en-US).
* *DOM 接口* `HTMLObjectElement` (en-US)
属性
--

元素包含全局属性 (en-US)。

`archive` 
已弃用

用来指名对象资源列表的以空格分隔的 URI 列表。

`border` 
已弃用

元素周围的边框的宽度，单位为像素。

`classid` 
已弃用

对象实现的 URI，可以同时与 **data** 属性使用，或者使用 **data** 属性替代。

`codebase` 
已弃用

解析 **classid**，**data** 或者 **archive** 中定义的相对路径的根路径，如果没有定义，默认为当前文档的 base URI。

`codetype` 
已弃用

**classid** 定义的 data 的内容类型。

`data`

一个合法的 URL 作为资源的地址，，需要为 **data** 和 **type** 中至少一个设置值。

`declare` 
已弃用

取值为布尔的属性可以设置这个元素为仅声明的格式。对象必须被随后的 `<object> 元素实例化。在` HTML5 中，完整的重复 <object> 元素，可以重用元素。

`form`

对象元素关联的 form 元素（属于的 form）。取值必须是同一文档下的一个 `<form>` 元素的 ID。

`height`

资源显示的高度，单位是 CSS 像素。

`name`

浏览上下文名称（HTML5），或者控件名称（HTML 4）。

`standby` 
已弃用

对象的实现和数据加载过程中，浏览器可以显示的信息。

`tabindex` 
已弃用

当前元素在文档 Tab 导航中的顺序。

`type`

**data** 指定的资源的 MIME 类型，需要为 **data** 和 **type** 中至少一个设置值。

`usemap`

指向一个 `<map>` 元素的 hash-name；格式为‘#’加 map 元素 `name` 元素的值。

`width`

资源显示的宽度，单位是 CSS 像素。

示例
--


```html
<!-- Embed a flash movie -->
<object data="move.swf" type="application/x-shockwave-flash"></object>

<!-- Embed a flash movie with parameters -->
<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar" />
</object>
```

规范
--

| Specification |
| --- |
| HTML Standard # the-object-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参阅
--

* `<embed>`
* `<param>`