<optgroup> - HTML（超文本标记语言）

<optgroup>
==========

\*\*HTML 元素 `<optgroup>` \*\*为`<select>` 元素中的选项创建分组。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 (en-US) | 无 |
| 允许的内容 | 0 或多个 `<option>` 元素 |
| 标签省略 | 开始标签是必须的。当该元素后面也跟着一个 <optgroup> 元素，或该元素的父元素没有其他内容时，结束标签可省略。 |
| 允许的父元素 | 一个 `<select>` 元素。 |
| Implicit ARIA role | `group` (en-US) |
| Permitted ARIA roles | No `role` permitted |
| DOM 接口 | `HTMLOptGroupElement` |

**备注：** Optgroup elements may not be nested.

属性
--

这个元素包含 global attributes (en-US)。

`disabled`

如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。

`label`

选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。

示例
--

```html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>
```

### 结果

规范
--

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

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

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

参见
--

* 其他表单相关的元素：`<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<option>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` 和 `<meter>`。


<div>：内容划分元素 - HTML（超文本标记语言）

<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>这里可以是任何内容，比如 <p>, <table>，一切由你作主！</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>
====

**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>
=======

**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>：无序列表元素
===========

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

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`属性：可设置单元格内容与同一字符对齐，例如'.'。


<button> - HTML（超文本标记语言）

<button>
========

**HTML `<button>` 元素**表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。

|  |  |
| --- | --- |
| 内容分类 (en-US) | Flow content (en-US), phrasing content (en-US), Interactive content (en-US), listed (en-US), labelable (en-US), and submittable (en-US) form-associated (en-US) element, palpable content. |
| 允许的内容 | Phrasing content (en-US). |
| 标签略写 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任意可容纳 phrasing content (en-US) 的元素。 |
| Permitted ARIA roles | `checkbox` (en-US), `link` (en-US), `menuitem` (en-US), `menuitemcheckbox` (en-US), `menuitemradio` (en-US), `radio` (en-US), `switch` (en-US), `tab` (en-US) |
| DOM 接口 | `HTMLButtonElement` |

属性
--

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

`autofocus`

一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。

`autocomplete`
非标准

该属性在 `<button>`上的使用并未标准化，只有 Firefox 允许。不像其他浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态（Firefox persists the dynamic disabled state ）。将此属性设置为`off` (i.e. `autocomplete="off"`) 关闭此特性。参见 Firefox bug 654072。

`disabled`

此布尔属性表示用户不能与 button 交互。如果属性值未指定，button 继承包含元素，例如`<fieldset>`；如果没有设置**disabled**属性的包含元素，button 将可交互。不像其他浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态。使用`autocomplete`属性可控制此特性。

`form`

表示 button 元素关联的 form 元素（它的表单拥有者）。此属性值必须为同一文档中的一个`<form>`元素的**id**属性。如果此属性未指定，<button>元素必须是 form 元素的后代。利用此属性，你可以将<button>元素放置在文档内的任何位置，而不仅仅是作为他们 form 元素的后代。

`formaction`

表示程序处理 button 提交信息的 URI。如果指定了，将重写 button 表单拥有者的`action`属性。

`formenctype`

如果 button 是 submit 类型，此属性值指定提交表单到服务器的内容类型。可选值：

* `application/x-www-form-urlencoded`: 未指定时的默认值。
* `multipart/form-data`: 如果使用`type`属性的`<input>`元素设置文件，使用此值。
* `text/plain`如果指定此属性，它将重写 button 的表单拥有者的`enctype`属性。

`formmethod`

如果 button 是 submit 类型，此属性指定浏览器提交表单使用的 HTTP 方法。可选值：

* `post`：来自表单的数据被包含在表单内容中，被发送到服务器。
* `get`：来自表单的数据以'?'作为分隔符被附加到 form 的**URI**属性中，得到的 URI 被发送到服务器。当表单没有副作用，且仅包含 ASCII 字符时使用这种方法。如果指定了，此属性会重写 button 拥有者的`method`属性。

`formnovalidate`

如果 button 是 submit 类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写 button 拥有者的`novalidate`属性。

`formtarget`

如果 button 是 submit 类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如 tab，window 或内联框架）的名称或关键字。如果指定了，它会重写 button 拥有者的`target` 属性。关键字如下：

* `_self`: 在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。
* `_blank`: 在一个新的不知名浏览上下文中加载响应。
* `_parent`: 在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按\_self 执行。
* `_top`: 在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按\_self 执行。

`name`

button 的名称，与表单数据一起提交。

`type`

button 的类型。可选值：

* `submit`: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
* `reset`: 此按钮重置所有组件为初始值。
* `button`: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。

`value`

button 的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。

注意
--

`<button>` 元素比 `<input>` 元素更容易使用样式。你可以在元素内添加 HTML 内容（像 `<em>`、`<strong>` 甚至 `<img>`），以及 `::after` 和 `::before` 伪元素来实现复杂的效果，而 `<input>` 只支持文本内容。

如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 `type` 属性设置成 `button`。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。

 IE7 在使用 `<button type="submit" name="myButton" value="foo">Click me</button>` 提交表单时存在一个 BUG，`POST` 提交的数据将是 `myButton=Click me` 而不是 `myButton=foo`（没有把 `value` 属性的值 `foo` 提交上去）。
 IE6 的 BUG 更糟糕，在提交表单的时候会把表单内所有的按钮都提交上去，同时还有和 IE7 一样的 BUG。
 IE8 已经修复了这个问题。

Firefox 出于使用方便的目的，会在获得焦点的按钮上添加一个细小的虚线框。这个边框由浏览器内部的样式表中的 CSS 定义，但如果有必要的话，你可以用 `button`::-moz-focus-inner` (en-US) { }` 重写这个样式。

Firefox 在默认情况下会在页面加载时让 `<button>` 保持动态禁用状态 ，这个行为在其他浏览器上是没有的。将 `autocomplete` 属性设置为 `off` 可以禁用这项特性。参见 Firefox bug 654072。

安卓系统上的 Firefox <35 会为每个按钮设置一个默认的 `background-image` 渐变背景（参见 Firefox bug 763671）。这项可以通过 `background-image: none` 禁用。

### 点击和焦点

点击 `<button>` 会让浏览器和操作系统（默认情况下）将焦点放在其上。 `<input>` 的 `type="button"` 和 `type="submit"` 也是一样的。

| 桌面浏览器 | Windows 8.1 | OS X 10.9 |
| --- | --- | --- |
| Firefox 30.0 | Yes | No (even with a `tabindex`) |
| Chrome 35 | Yes | Yes |
| Safari 7.0.5 | N/A | No (even with a `tabindex`) |
| Internet Explorer 11 | Yes | N/A |
| Presto (Opera 12) | Yes | Yes |

| 移动浏览器 | iOS 7.1.2 | Android 4.4.4 |
| --- | --- | --- |
| Safari Mobile | No (even with a `tabindex`) | N/A |
| Chrome 35 | No (even with a `tabindex`) | Yes |

示例
--

```html
<button name="button">Click me</button>
```

请注意上例中应用了 CSS。

规范
--

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

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

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

参见
--

Other elements that are used for creating forms: `<form>`, `<datalist>`, `<fieldset>`, `<input>`, `<label>`, `<legend>`, `<meter>`, `<optgroup>`, `<option>`, `<output>`, `<progress>`, `<select>`, `<textarea>`.


<nav> - HTML（超文本标记语言）

<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>：未阐明的注释（下划线）元素
=================

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` 属性添加非语义的下划线。


<audio> - HTML（超文本标记语言）

<audio>
=======

**`<audio>`** HTML 元素用于在文档中嵌入音频内容。`<audio>` 元素可以包含一个或多个音频资源，这些音频资源可以使用 `src` 属性或者 `<source>` 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 `MediaStream` 将这个元素用于流式媒体。

尝试一下
----

上述例子展示了 `<audio>` 元素的基本用法。与 `<img>` 元素类似，我们在 `src` 属性中添加了嵌入媒体的路径；也可以使用其他属性来规定一些功能，例如是否自动播放、是否循环播放、是否显示浏览器的默认音频控件等等。

在浏览器不支持该元素时，会显示 `<audio></audio>` 标签之间的内容作为回退。

属性
--

该元素包含 全局属性。

`autoplay`

布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。

**备注：** 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的自动播放指南。

`controls`

如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

`crossorigin`

枚举属性 展示音频资源是否可以通过 CORS 加载。支持 CORS 的资源可以被 `<canvas>` 元素复用而不污染。可选值如下：

`anonymous`

在发送跨域请求时不携带验证信息。换句话说，浏览器在发送`Origin:` HTTP 请求首部时将不携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给予源站信任（也就是说没有设置 `Access-Control-Allow-Origin:` 响应首部），那么图片就被认为是污染的，它就会被限制使用。

`use-credentials`

在发送跨域请求时携带验证信息。换句话说，在发送`Origin:` HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给予源站信任（通过设置`Access-Control-Allow-Credentials:` 响应首部）那么图片就被认为是污染的，它就会被限制使用。在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 `Origin:`请求首部），以保护 `<canvas>` 元素中未污染的内容。如果验证失败，它会表现的好像 **anonymous** 选项是选中的。查看 CORS settings attributes (en-US) 来获取更多信息。

`currentTime`

读取 `currentTime` 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时，`currentTime` 相对应的，能够被用于改变重播的时间。否则，设置 `currentTime` 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 `currentTime` 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 `currentTime` 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。`getStartDate()` 方法能够用于确定媒体时间轴的开始位置。

`disableRemotePlayback`
实验性

这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如 Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考 this proposed specification 来获取更多信息。

**备注：** 在 Safari 中，你能使用 `x-webkit-airplay="deny"` 作为兜底方案。

`duration` 只读

这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 `NaN`。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 WebRTC 连接的流），那么这个值将返回 `+Infinity`。

`loop`

布尔属性；如果声明该属性，将循环播放音频。

`muted`

表示是否静音的布尔值。默认值为 `false`，表示有声音。

`preload`

枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

* `none`: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
* `metadata`: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
* `auto`: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
* *空字符串* : 等效于`auto`属性。不同浏览器会有自己的默认值，规范建议的默认值为 `metadata`。

**备注：** `autoplay` 属性的优先级高于 `preload`。如果 `autoplay` 被指定，浏览器将显式地开始下载媒体以供播放。

* 浏览器并不被强制遵循该属性的规范，该属性只是一个建议与提示。

`src`

嵌入的音频的 URL。该 URL 应遵从 HTTP access controls (en-US). 这是一个可选属性；你可以在 audio 元素中使用 `<source>` 元素来替代该属性指定嵌入的音频。

事件
--

| 事件名称 | 触发时机 |
| --- | --- |
| `audioprocess` (en-US) | 一个 `ScriptProcessorNode` 的输入缓冲区已经准备开始处理。 |
| `canplay` | 浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容） |
| `canplaythrough` | 浏览器预测已经可以在不暂停的前提下将媒体播放到结束。 |
| `complete` | 一个 `OfflineAudioContext` 的渲染已经中止。 |
| `durationchange` | `duration` 属性发生了变化。 |
| `emptied` (en-US) | 媒体置空。举个例子，当一个媒体已经加载（或部分加载）的情况下话调用 `load()` 方法，这个事件就将被触发。 |
| `ended` | 播放到媒体的结束位置，播放停止。 |
| `loadeddata` | 媒体的第一帧加载完成。 |
| `loadedmetadata` | 元数据加载完成。 |
| `pause` | 播放暂停。 |
| `play` | 播放开始。 |
| `playing`  | 因为缺少数据而暂停或延迟的状态结束，播放准备开始。 |
| `ratechange` (en-US) | 播放速度变化。 |
| `seeked` (en-US) | 一次*获取* 操作结束。 |
| `seeking` (en-US) | 一次*获取* 操作开始。 |
| `stalled` (en-US) | 用户代理试图获取媒体数据，但数据意外地没有进入。 |
| `suspend` (en-US) | 媒体加载挂起。 |
| `timeupdate` | 由 `currentTime` 指定的时间更新。 |
| `volumechange` (en-US) | 音量变化。 |
| `waiting` (en-US) | 因为暂时性缺少数据，播放暂停。 |

使用说明
----

浏览器对 文件类型 和 音频编码 (en-US) 的支持各有不同，你可以使用内嵌的 `<source>` 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：

```html
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="myAudio.mp4">link to the audio</a> instead.
  </p>
</audio>
```

我们提供了全面细致的 音频文件类型指南 和 这些类型可以使用的音频编码 (en-US)。此外，还有 视频编码支持指南。

其他使用说明：

* 如果你没有声明 `controls` 属性，音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 `HTMLMediaElement` API 创建自己的自定义控件。
* 为了更精确地控制你的音频内容，`HTMLMediaElement` 会触发多种不同的 事件 (en-US)。这也提供了一个查看音频获取过程的方式，你可以查看错误或检测什么时候可以开始播放或操作。
* 你还可以使用 Web Audio API 以从 JavaScript 代码直接生成和操纵音频流，而非流式播放已存在的音频文件。
* `<audio>` 元素不能像 `<video>` 元素一样附加副标题（subtitle）或说明标题（caption）。更多有用的信息和解决方法参见 Ian Devlin 的 WebVTT and Audio。

视频和音频内容 新手教程是一篇关于使用 HTML `<audio>` 的好文章。

### 使用 CSS 设置样式

`<audio>` 元素没有自带的固有视觉样式，除非如果声明了 `controls` 属性，则会显示浏览器的默认控件。

默认控件的 `display` 的默认值为 `inline`。将该值设为 `block` 通常会对定位和布局有好处，除非你想将控件放在文本块或类似元素中。

你可以使用作用于整个控件的属性来为其设置样式。例如可用 `border`、`border-radius`、`padding`, `margin` 等等。但你不能设置音频播放器中的单个组件（如改变按钮大小、改变图标或字体等）。控件在不同的浏览器中也有所不同。

如果在跨浏览器中得到一致的外观和体验，你需要创建自定义控件；自定义控件可以根据你的需求任意设置样式，还可以使用 JavaScript 和 `HTMLMediaElement` API 来设置更多功能。

视频播放器样式基础 (en-US) 提供了一些有用的样式技术，这篇文章围绕 `<video>` 而写，但大部分都可以用于 `<audio>`。

### 检测音轨添加和移除

你能够通过 `addtrack` (en-US) 和 `removetrack` (en-US) 事件来检测何时音轨从 `<audio>` 元素中添加和移除了。然而，这些事件并不是直接传递给 `<audio>` 元素自己的。相反，它们是发送给 `<audio>` 元素的`HTMLMediaElement` 中的音轨列表对象的。这些对象与添加进元素的音轨类型一一对应。

`HTMLMediaElement.audioTracks`

一个 `AudioTrackList` (en-US) 包含所有的媒体对象的音轨。你能在为 `addtrack` 事件添加监听，以在新音轨添加进元素时获得通知。

`HTMLMediaElement.videoTracks`

在该 `VideoTrackList` (en-US) 对象上添加监听，以在视频轨道被添加进元素时获得通知。

`HTMLMediaElement.textTracks` (en-US)

在该 `TextTrackList` (en-US) 对象上添加监听，以在文字轨道被添加进元素时获得通知。（也许用于字幕，译者猜测）

**备注：** 尽管是 `<audio>` 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。

举个例子，为了侦测何时音轨从一个 `<audio>` 元素中添加或者移除，你可以使用如下代码：

```js
var elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = function (event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function (event) {
  trackEditor.removeTrack(event.track);
};
```

这份代码监听音轨从目标元素中添加删除的事件，并且调用了一个轨道编辑器上的虚拟函数，来从编辑器上的可用音轨列表中注册和移除音轨。

你也可以使用 `addEventListener()` 来监听 `addtrack` (en-US) 和 `removetrack` (en-US) 事件。

示例
--

### 基本用法

下面的例子展示了使用 `<audio>` 元素来播放 OGG 文件的简单用法。它将根据 `autoplay` 属性的设置来自动播放——如果页面允许你这么做的话。它同时还包含一个兜底内容，以防止浏览器不支持 `<audio>` 元素。

```html
<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
```

如果想获得更多信息，包括何时自动播放生效，如何获取自动播放权限，并且通过何种方式，在何时应用自动播放才是合适的，请看我们的 autoplay guide。

### <audio> 元素与 <source> 元素

这个例子指出了在嵌套的 `<source>` 元素的 `src` 属性上设置嵌入音轨，而非直接在 `<audio>` 元素上设置。通过这种方法可以同时在 `type` 属性上包含文件的 MIME 类型，这通常很有用，因为浏览器就能立即决策：自己究竟是能够播放该文件，还是不在不能播放的文件上浪费时间。

```html
<audio controls>
  <source src="foo.wav" type="audio/wav" />
  Your browser does not support the <code>audio</code> element.
</audio>
```

### <audio> 与多个 <source> 元素

这个例子包含了多个 `<source>` 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素（Opus 后缀名）；如果不行，那就退而求其次去加载第二个 (Vorbis 后缀名)，最终退到了 MP3 格式：

```html
<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>
```

无障碍考虑
-----

语音形式的音频必须同时提供标题，以及确切描述其内容的文本。标题（Captions）是由 WebVTT 标准定义的，允许听力障碍的人群能够通过播放（文字）记录来理解音频内容。转录文字允许那些需要额外时间的人们，以适合他们的速度和格式回顾记录的内容。

如果使用自动标题服务，人工检查生成内容是很重要的，这确保了标题能够准确的描述源音频。

如何你的用户代理上的 `<audio>` 元素不直接支持 WebVTT。你必须寻找一个框架来为你提供这种能力，或者自己写代码来展示标题。一个选择是使用 `<video>` 元素，它是一定支持 WebVTT 的。

进阶的来讲，语音的副标题和转录文字应该同时描述音乐与音效，因为它们也是音频的重要信息，包含了情绪与音调。举例子，在下面的 WebVTT 中，中括号里提供了关于音调与情绪的信息给观看者；通过这种方式（给出音乐，语言之外的声音，以及另一些至关重要的声音的描述）能够帮助建立起音频的氛围。
```

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
```

给出其他内容（比如直接的下载链接）也是一种最佳实践，这能够作为一种用户浏览器不支持 `<audio>` 元素时的兜底方案。

```html
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="myAudio.mp4">link to download the audio</a> instead.
  </p>
</audio>
```

* MDN Subtitles and closed caption — Plugins (en-US)
* Web Video Text Tracks Format (WebVTT)
* WebAIM: Captions, Transcripts, and Audio Descriptions
* MDN Understanding WCAG, Guideline 1.2 explanations (en-US)
* Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0
技术总结
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、短语内容、嵌入内容。如果它有
 `controls` 属性：交互内容和可感知内容。
  |
| 允许的内容 | 如果元素拥有 `src` 属性：允许的内容为 0 个或更多 `<track>` 元素，跟随着不包含 `<audio>` 或 `<video>` 媒体元素的透明内容否则：允许的内容为零个或多个 `<source>` 元素，跟随着 0 个或多个 `<track>` 元素，跟随着不包含 `<audio>` 或 `<video>` 媒体元素的透明内容。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何能够作为容器的元素 |
| 隐式 ARIA 角色 | 没有对应的角色 |
| 允许的 ARIA 角色 | `application` (en-US) |
| DOM 接口 | `HTMLAudioElement` |

规范
--

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

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

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

参见
--

* Web media technologies
    + Media container formats (file types)
    + Guide to audio codecs used on the web (en-US)
* Web Audio API (en-US)
* `HTMLAudioElement`
* `<source>`
* `<video>`
* Learning area: Video and audio content
* Cross-browser audio basics


<aside> - HTML（超文本标记语言）

<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 章节与大纲


<select> - HTML（超文本标记语言）

<select>
========

**HTML `<select>` 元素**表示一个提供选项菜单的控件：

尝试一下
----

上述例子展示了 `<select>` 的典型用法。元素中设置了 `id` 属性以将其与 `<label>` 元素关联在一起，提高可及性（accessibility）。`name` 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 `<select>` 中的一个 `<option>` 元素定义。

每个 `<option>` 元素都应该有一个 `value` 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 `value` 属性，则 `value` 值默认为元素中的文本。你可以在 `<option>` 元素中设置一个 `selected` 属性以将其设置为页面加载完成时默认选中的元素。

`<select>` 元素有一些用于控制元素的特有属性，例如 `multiple` 规定了能不能同时选中多个选项，`size` 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 `required`, `disabled`, `autofocus` 等。

你还可以将 `<option>` 元素放在 `<optgroup>` 元素中以为下拉菜单创建不同的选项分组。

在 原生表单部件 中查看更多示例。

属性
--

包括下列全局属性。

`autocomplete`

一个 `DOMString`，为 用户代理 提供自动填充功能的线索。关于该值的完整列表以及如何使用自动填充的详细信息，请参阅 HTML 自动完成属性。

`autofocus`

这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。

`disabled`

这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 `fieldset`；如果没有父元素设置了 `disabled` 属性，那么默认该表单对象可用。

`form`

`<select>` 所关联的`<form>` (它的"表单拥有者")。其值必须是在同一文档中的 `<form>` 元素的`id`（如果没有设置这个属性， `<select>` 元素则与其任何存在的祖先 `<form>` 元素关联）。
 这个属性让你将 `<select>` 元素与文档中任意位置的 `<form>` 元素相关联，而不仅仅是包含 `<select>` 元素的 `<form>` 元素。这个属性还可以覆盖元素的祖先 `<form>` 元素。

`multiple`

这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。

`name`

该属性规定了控件的名称。

`required`

一个布尔值属性，表示必须选中一个有非空字符串值的选项。

`size`

如果控件显示为滚动列表框（如声明了 `multiple`），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。

**备注：** 根据 HTML5 规范，默认值应该为 1；但是，在实践中，这样会影响到一些网站，同时其他浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。

使用笔记
----

### 选择多个选项

在桌面电脑中，有几种方式在设置了 `multiple` 属性的 `<select>` 元素中选中多个选项：

鼠标用户可以按住 `Ctrl`, `Command`, 或 `Shift` 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。

**警告：** 以下所述的通过键盘选择多个不连续选项的方法目前只在 Firefox 有效（译者注：Chrome 81 也已支持）。**另请注意**：在 macOS 中， `Ctrl` + `Up` 和 `Ctrl` + `Down` 组合键会与系统默认用于任务管理和应用窗口的组合键冲突。所以如果要使用这些组合键，你需要关掉系统默认的组合键。

键盘用户可以这样选中多个连续的选项：

* 聚焦于 `<select>` 元素（如使用
 `Tab`
 ）
* 使用
 `Up`
 和
 `Down`
 方向键以从下向上或从上向下选择选项。
* 按住
 `Shift`
 键然后使用
 `Up`
 和
 `Down`
 方向键来增加或减少选中的方向。

键盘用户还可以这样选中多个不连续的选项：

* 聚焦于 `<select>` 元素（例如使用
 `Tab`
 ）。
* 按住
 `Ctrl`
 键，然后使用
 `Up`
 和
 `Down`
 方向键来改变聚焦的选项，聚焦的选项使用虚线轮廓高亮，和使用键盘聚焦链接的方式一样。
* 按下
 `Space`
 以选择或取消选择聚焦的选项。
应用 CSS 样式
---------

众所周知，`<select>`元素很难用 CSS 进行高效的设计。你可以像其他元素一样改变某些方面——例如，调整 盒模型、显示的字体 等，你还可以使用 `appearance` 属性来去除默认的系统外观。

但是，这些属性的表现在不同浏览器之间并不一致，而且有些事情难以很好地处理，例如在一列中顺序排列不同类型的表单元素。 `<select>`元素的内部结构复杂，难以控制。如果你想完全控制，你应该考虑使用一个在修改表单部件样式方面拥有强大能力的库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 WAI-ARIA 来提供语义。

有关样式`<select>`的更多有用信息，请参阅：

* Styling HTML forms
* Advanced styling for HTML forms
示例
--

### 基本选择

```html
<!-- 第二项会默认选中 -->
<select name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>
```

#### 结果

### 使用多选的进阶选择

下面的例子更加复杂，展示了可用在 `<select>` 元素上的更多功能：

```html
<label
 >Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>
```

你会看见：

* 可选中多个选项，因为我们使用了 `multiple` 属性。
* `size` 属性导致一次只有 4 行能显示；你可以滚动查看所有选项。
* 我们在其中使用了 `<optgroup>` 元素来将选项分成不同组别。这单纯是视觉上的分组，一般来说，分组由加粗的组名和缩进的选项组成。
* "Hamster"选项使用了`disabled` 属性，因此不能被选中。
技术概览
----

|  |  |
| --- | --- |
| 内容分类 | Flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element |
| 允许的内容 | Zero or more `<option>` or `<optgroup>` elements. |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | Any element that accepts phrasing content. |
| Implicit ARIA role | `combobox` (en-US) with **no** `multiple` attribute and **no** `size` attribute greater than 1, otherwise `listbox` |
| Permitted ARIA roles | `menu` (en-US) with **no** `multiple` attribute and **no** `size` attribute greater than 1, otherwise no `role` permitted |
| DOM 接口 | `HTMLSelectElement` (en-US) |

规范
--

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

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

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

参见
--

* 由 `<select>` 触发的事件：`change`、`input`
* `<option>` 元素
* `<optgroup>` 元素


<rb>: The Ruby Base element - 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>
======

**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> - HTML（超文本标记语言）

<xmp>
=====

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

概述
--

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

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

* 从 HTML3.2 开始反对使用本元素，同时它不再会在之后版本内被推荐使用。在 HTML5 规范内，本元素已经完全被移除。
* 建议你使用`<pre>` 元素，如果有特殊需求，你可以使用 `<code>` 元素。需要你注意的是，使用元素的时候，需要将内容中的"<"转义为"<"，以防止被浏览器当作正常标签解析。
* 通过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 **`<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>
============

**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 `<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>`


<image>：图像元素 - HTML（超文本标记语言）

<image>：图像元素
============

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

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

HTML `<image>` 元素是 `<img>` 元素的一个古老且支持不足的前身。**不应该使用它**。

某些浏览器会尝试将它自动转化为 `<img>` 元素，在也指定了 `src` 属性时可能会成功。

规范
--

这似乎并不是任何正式规范的一部分。它在 HTML+ Discussion Document - Dave Raggett, November 8, 1993 中被提及（第 5.9 节——图像），但在 1994 年的 HyperText Markup Language Specification - 2.0 的第一次修订中没有被纳入。

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

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

参见
--

* `<img>`：文档中显示图片的正确方式
* `<picture>`：文档中显示图片更强大的方式


<q> - HTML（超文本标记语言）

<q>
===

*HTML 引用标签* (**<q>**) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 `<blockquote>` 替代。

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), palpable content. |
| Permitted content | Phrasing content (en-US). |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parent elements | Any element that accepts phrasing content (en-US). |
| DOM interface | `HTMLQuoteElement` (en-US) |

**备注：** 大多数现代浏览器，会为 <q> 文本添加引号。旧浏览器可能需要使用 CSS 添加引号。IE、Edge 与 Firefox、Chrome 引号样式略有不同。

属性
--

<q>标签拥有 全局属性 (en-US).

`cite`

这个属性的值是 URL，意在指出被引用的文本的源文档或者源信息。这个属性重在解释这个引用的参考或者是上下文。

示例
--

### HTML 内容

```html
<p>
  Everytime Kenny is killed, Stan will announce
  <q cite="http://en.wikipedia.org/wiki/Kenny\_McCormick#Cultural\_impact">
    Oh my God, you/they killed Kenny! </q
 >.
</p>
```

规范
--

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

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

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

另见
--

* The `<blockquote>` element for long quotations.
* The `<cite>` element for source citations.


<area> - HTML（超文本标记语言）

<area>
======

简要
--

*HTML `<area>` 元素 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。*

* *内容分类 (en-US)* 流内容 (en-US), 短语内容 (en-US).
* *允许的内容*它是一个空的元素不允许嵌套任何子元素或者文本。
* *标签省略*只能允许有开始标签不允许有结束标签。
* *允许的父元素* <area>元素必须拥有一个<map>元素祖先元素，但不一定是直接的父元素。
* *DOM 接口* `HTMLAreaElement`
属性
--

该元素包括全局属性。

`accesskey`
已弃用

为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按 ALT 或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自 HTML5 以来是全局性的。

`alt`

在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在 HTML4 中，这个属性时必需的，但是可以是一个空的串 ("")。在 HTML5 中，这个属性只有在**href** 属性被使用的时候才是必需的。

`coords`

给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的**形状**属性。对于矩形或长方形，这个 **coords** 值为两个 X,Y 对：左上、右下。对于圆形，这个值是 `x,y,r`，这里的 `x,y` 是一对确定圆的中心的坐标而 `r` 则表示的是半径值。对于多边和多边形，这个值是用 x,y 对表示的多边形的每一个点：`x1,y1,x2,y2,x3,y3` 等等。HTML4 里，值可能是像素数量或者百分比，区别是不是有 % 出现; HTML5 里，只可能是像素的数量。

`download`

这个属性如果存在的话，表明作者想把超链接用于下载一个资源。请查看`<a>` 获得关于 `download`属性的完整描述。

`href`

area 的超链接，值为一个 URL. HTML4 里，这个值不管是不是有值都要明确指定出来。HTML5 里则不需要。

`hreflang`

指明链接资源的语言类型，值的范围参考BCP47. 这个属性只能在指明 href 属性之后使用。

`name`
已弃用

为可点击区域定义一个名字以使旧浏览器解析。

`media`

指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在 href 属性存在情况下使用。

`nohref`
已弃用

指明此区域没有超链接。在<area>中必须存在 nohref 或者 href。

**备注：** 此属性在 html5 中是废弃的，而忽略 href 属性就足够了。

`rel`

对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当 href 属性是 presen 时才使用该属性

`shape`

相关联的热点的形状。HTML 5 和 HTML 4 的规范定义了值 rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是 Internet Explorer 4 和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard\_inline } }。

`tabindex`
已弃用

用于指定浏览器 tab 键获取焦点的顺序。在 html5 中是全局属性。

`target`

本属性指明了在什么地方显示链接的资源。HTML4 里，这个值是一个 frame 的链接或者关键字。HTML5 里，它是一个浏览器上下文 (比如：标签，窗口或者内嵌的 frame) 的链接或者关键字。值的含义：

* `_self`: 在当前区域加载链接指向的资源。这个是默认值。
* `_blank`: 在新的未命名的窗口或者 tab 里加载超链接资源。
* `_parent`: 在父级加载超链接资源。HTML4 里，是当前 frame 的父级，HTML5 里是当前的浏览器上下文，如果当前环境没有父级，行为和`_self`一样。
* `_top`: HTML4 里：将响应加载到完整的原始窗口中，取消所有其他帧。在 HTML5 中：将响应加载到顶级浏览上下文 (也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与 self 相同本属性只能在指明 href 属性之后使用。

`type`

该属性指定了用于链接目标的 MIME 类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav 时，浏览器可能会添加一个小的扬声器图标。公认的 MIME 类型的完整列表，请参阅 http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当 href 属性存在时才使用该属性。

例子
--

```html
<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" nohref />
</map>
```

规范
--

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

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

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

注意
--

HTML 3.2, 4.0，和 HTML 5 规范中，不允许有 `</area>` 单闭合标签。

XHTML 1.0 规范要求有尾部的斜线：`<area />`.

**id**, **class**, 和**style** 属性和其他的 HTML4 属性一样，但是只有 Netscape 和 Microsoft 定义了这些属性。

Netscape 1–level 浏览器不能解析**target** 链接到 frames 的属性。

HTML 3.2 只定义了**alt**, **coords**, **href**, **nohref**, 和**shape**.


<b> - HTML（超文本标记语言）

<b>
===

**HTML 提醒注意（Bring Attention To）元素（`<b>`）**用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是**粗体（Boldface）元素**，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 `<b>` 元素用于显示粗体文字；替代方案是使用 CSS `font-weight` 属性来创建粗体文字。

|  |  |
| --- | --- |
| 内容分类 (en-US) | Flow content (en-US), phrasing content (en-US), palpable content. |
| 允许的内容 | Phrasing content (en-US). |
| 标签略写 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任意可容纳 phrasing content (en-US) 的元素 |
| Permitted ARIA roles | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

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

使用说明
----

* `<b>` 应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其他特别强调）。
* 不要将<b>元素与 `<strong>`、`<em>`或`<mark>`元素混淆。 `<strong>`元素表示某些重要性的文本，`<em>`强调文本，而`<mark>`元素表示某些相关性的文本。 `<b>`元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。
* 类似的，也不要用 `<b>` 元素来标记标题。如果需要表示标题，请使用 `<h1>` (en-US) 到 `<h6>` (en-US) 标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并*不一定*都是粗体。
* 通过在 `<b>` 元素上添加 `class` 属性来表示额外的语义信息是一个很好的方式（例如 `<b class="lead">` 来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 `<b>` 元素，无须改动 HTML。
* 以前 `<b>` 元素的意思就是让文本变成粗体。但从 HTML4 开始，不赞成标签表示带样式信息，于是 `<b>` 元素的含义发生了变化。
* 如果不是出于语义目的而使用 `<b>` 元素，那么让文本显示粗体更好的方式是使用将 CSS 的 `font-weight` 属性设置为 `"bold"`。
例子
--

```html
<p>
  This article describes several <b>text-level</b> elements. It explains their
  usage in an <b>HTML</b> document.
</p>
Keywords are displayed with the default style of the
<b> element, likely in bold.</b>
```

### 结果

This article describes several **text-level** elements. It explains their usage in an **HTML** document.

Keywords are displayed with the default style of the <b> element, likely in bold.

规范
--

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

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

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

相关链接
----

* Others elements conveying text-level semantics: `<a>`, `<em>`, `<strong>`, `<small>`, `<cite>`, `<q>`, `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>`, `<samp>`, `<kbd>`, `<sub>`, `<sup>`, `<i>`, `<mark>`, `<ruby>`, `<rp>`, `<rt>`, `<bdo>`, `<span>`, `<br>`, `<wbr>`.
* Using <b> and <i> elements (W3C)


<nobr> - HTML（超文本标记语言）

<nobr>
======

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

概述
--

HTML `<nobr>` 元素阻止文本自动拆分成新行，所以它展示为长的一行，可能还需要滚动。这个标签不是标准的 HTML，并且不应该使用。反之应该使用 CSS 属性 `white-space`，像这样：

```css
<span style="white-space: nowrap">Long line with no breaks</span>
```

另见
--

* `white-space`
* `overflow`


<col> - HTML（超文本标记语言）

<col>
=====

**HTML `<col>` 元素** 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于`<colgroup>`元素内。

此元素允许使用 CSS 进行样式列，但只有少数属性将对该列产生影响（请参阅列表的CSS 2.1 规范）。

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | None; it is a void element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| Permitted parents | `<colgroup>` only, though it can be implicitly
 defined as its start tag is not mandatory. The
 `<colgroup>` must not have a
 `span` attribute.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTableColElement` (en-US) |

属性
--

该元素包含一些全局属性 全局属性 (en-US).

`align`
已弃用

This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:

* `left`, aligning the content to the left of the cell
* `center`, centering the content in the cell
* `right`, aligning the content to the right of the cell
* `justify`, inserting spaces into the textual content so that the content is justified in the cell
* `char`, aligning the textual content on a special character with a minimal offset, defined by the `char` and `charoff` attributes 未实现 (查看 Firefox bug 2212).If this attribute is not set, its value is inherited from the `align` of the `<colgroup>` element this `<col>` element belongs too. If there are none, the `left` value is assumed.

**备注：** Do not use this attribute as it is obsolete (not supported) in the latest standard.
 To achieve the same effect as the `left`, `center`, `right` or `justify` values:

* Do not try to set the `text-align` property on a selector giving a `<col>` element. Because `<td>` (en-US) elements are not descendant of the `<col>` element, they won't inherit it.
* If the table doesn't use a `colspan` (en-US) attribute, use the `td:nth-child(an+b)` CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the `text-align` property can be used.
* If the table does use a `colspan` (en-US) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial.
* To achieve the same effect as the `char` value, in CSS3, you can use the value of the `char` as the value of the `text-align` property 未实现.

`bgcolor`
非标准

定义列中对应的每个单元格的背景色。其值是 sRGB 定义的 6 位 16 进制代码之一，前缀为 '#'。也可以使用以下 16 个预定义的颜色字符

注意：不要使用这个属性，它是非标准的，并且只实现了 IE 浏览器中的部分版本：`<col>` 元素的样式应该使用 CSS. 在`<td>` (en-US)元素上使用 CSS 的 `background-color` 属性即可实现相同效果。

`char`
已弃用

This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If `align` is not set to `char`, this attribute is ignored.

**备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the `char`, in CSS3, you can use the character set using the `char` attribute as the value of the `text-align` property 未实现.

`charoff`
已弃用

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the **char** attribute.

**备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard.

`span`

该属性值为一个正整数，表示该 <col> 元素横跨的列数。默认值为 1

`valign`
已弃用

This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:

* `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`.
* `bottom`, which will put the text as close to the bottom of the cell as it is possible;
* `middle`, which will center the text in the cell;
* and `top`, which will put the text as close to the top of the cell as it is possible.

**备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard:

* Do not try to set the `vertical-align` property on a selector giving a `<col>` element. Because `<td>` (en-US) elements are not descendant of the `<col>` element, they won't inherit it.
* If the table doesn't use a `colspan` (en-US) attribute, use the `td:nth-child(an+b)` CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the `vertical-align` property can be used.
* If the table does use a `colspan` (en-US) attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial.

`width`
已弃用

This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form `0*`, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as `0.5*` also can be used.

示例
--

详见 `<table>` 页面 `<col>` 标签的示例。

规范
--

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

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

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

相关链接
----

* Other table-related HTML Elements: `<caption>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>` (en-US), `<tfoot>`, `<th>`, `<thead>`, `<tr>`;
* CSS properties and pseudo-classes that may be specially useful to style the `<col>` element:
    + the `width` property to control the width of the column;
    + the `:nth-child` pseudo-class to set the alignment on the cells of the column;
    + the `text-align` property to align all cells content on the same character, like '.'.


<table>：表格元素 - HTML（超文本标记语言）

<table>：表格元素
============

HTML **`<table>`** 元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容 |
| 允许的内容 | 按照这个顺序：
 1. 一个可选的 `<caption>` 元素
2. 零个或多个的 `<colgroup>` 元素
3. 一个可选的 `<thead>` 元素
4. 下列任意一个：
    * 零个或多个 `<tbody>`
    * 零个或多个 `<tr>`
5. 一个可选的 `<tfoot>` 元素
 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何支持流式内容的元素 |
| 隐含的 ARIA 角色 | `table (en-US)` |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLTableElement` |

属性
--

此元素包含所有的全局属性。

### 弃用的属性

`align`
已弃用

这个枚举 (en-US)属性指定了包含在文档中的表格必须如何对齐。可能含有如下值：

* `left`：表格将在文档左侧显示；
* `center`：表格将在文档中央显示；
* `right`：表格将在文档右侧显示；

设置 `margin-left`、`margin-right` 为 `auto`，或者将 `margin` 设置为 `0 auto` 来实现类似于 align 属性的效果。

`bgcolor`
已弃用

表格的背景颜色。它是一个 6 位的十六进制 RGB 编码，以 `'#'` 作为前缀。当然也可以使用下面已经被预先定义的颜色关键字。

为了实现相似的效果，可以使用 CSS 属性 `background-color`。

`border`
已弃用

这个整型属性定义了环绕表格外部的框的大小。如果设置为 0，这意味着 `frame` 属性被设置为空。

为了实现相似的效果，可以使用 CSS 简写属性 `border`。

`cellpadding`
已弃用

这个属性定义了一个单元格的内容和它的边框之间的空间，无论显示与否。如果 cellpadding 的长度是用像素定义的，这个像素大小的空间将被应用到单元格内容的所有四边。如果长度是用百分比值定义的，内容将被居中，总的垂直空间（顶部和底部）将代表这个值。对于总的水平空间（左边和右边）也是如此。

为了实现相似的效果，可以在 `<table>` 元素上使用属性值为 collapse 的 `border-collapse` 属性，在 `<td>` (en-US) 元素上使用属性 `padding`。

`cellspacing`
已弃用

这个属性定义了水平和垂直方向上两个单元格之间空间的大小，使用百分比或像素，包括了表格的顶部与第一行的单元格、表的左边与第一列单元格、表的右边与最后一列的单元格、表的底部与最后一行单元格之间的空间。

为了实现相似的效果，可以在 `<table>` 元素上使用 CSS 属性 `border-spacing`。`border-spacing` 在 `border-collapse` 设置为 collapse 时将无效。

`frame`
已弃用

这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。

为了实现相似的效果，可以使用 CSS 属性 `border-style` 和 `border-width`。

`rules`
已弃用

这个枚举属性定义了在一个表格中分隔线的显示位置。它可以有以下值：

* `none`，这表明没有分隔线将被显示；这是默认的值；
* `groups`，这将使得分隔线只显示在行组（row group，通过 `<thead>`、`<tbody>` 和 `<tfoot>` 元素定义）和列组（column group，通过 `<col>` 和 `<colgroup>` 元素定义）之间
* `rows`，这将使得分隔线在行之间显示；
* `cols`，这将使得分隔线在列之间显示；
* `all`，这将使得分隔线在列和行之间显示；

为了实现相似的效果，可以在适当的 `<thead>`、`<tbody>`、`<tfoot>`、`<col>` 或 `<colgroup>` 元素上使用 `border` 属性。

`summary`
已弃用

该属性定义了概括表格内容的替代文本。请使用 `<caption>` 元素代替。

`width`
已弃用

该属性定义了表格的宽度。请使用 CSS `width` 属性代替。

示例
--

### 简单的表格

```html
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>
```

### 更多简单示例

```html
<p>含有表头的表格</p>
<table>
  <tr>
    <th>姓</th>
    <th>名</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>含有表头、表尾和表格主体的表格</p>
<table>
  <thead>
    <tr>
      <th>表头内容 1</th>
      <th>表头内容 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格主体内容 1</td>
      <td>表格主体内容 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表尾内容 1</td>
      <td>表尾内容 2</td>
    </tr>
  </tfoot>
</table>

<p>有列组的表格</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>国家</th>
    <th>首都</th>
    <th>人口数量</th>
    <th>语言</th>
  </tr>
  <tr>
    <td>美国</td>
    <td>华盛顿</td>
    <td>3.09 亿</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>瑞典</td>
    <td>斯德哥尔摩</td>
    <td>900 万</td>
    <td>瑞典语</td>
  </tr>
</table>

<p>有列组和列的表格</p>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  </colgroup>
  <tr>
    <th>青柠</th>
    <th>柠檬</th>
    <th>橘子</th>
  </tr>
  <tr>
    <td>绿色</td>
    <td>黄色</td>
    <td>橙色</td>
  </tr>
</table>

<p>有标题的简单表格</p>
<table>
  <caption>
    美妙的标题
  </caption>
  <tr>
    <td>美妙的数据</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}
```

### 表格排序

#### 对表格的行进行排序

没有原生的方法对 HTML 表格的行（`<tr>`元素）进行排序。但是通过使用 `Array.prototype.slice()`、`Array.prototype.sort()`、`Node. removeChild()` 和 `Node.appendChild()`，你可以实现你自己的 `sort()` 函数来对 `<tr>` 元素的`HTMLCollection` 进行排序。

在下面的示例中，你可以看到具体如何这样做。我们把这个自定义方法附加到 <tbody> 元素上，这样它就会按照数值增加的顺序对表格单元格进行排序，并更新显示内容以适应需要。

##### HTML

```html
<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};
document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
```

##### 结果

#### 通过点击 th 元素对行进行排序

下面的示例给 `document` 中每个 `<table>` 的每个 `<th>` 元素添加了一个事件处理程序；它对所有 `<tbody>` 的行进行排序，排序的基础是行中包含的 `td` 单元格。

**备注：** 这个解决方案假设 `<td>` 元素是由原始文本填充的，没有子元素。

##### HTML

```html
<table>
  <thead>
    <tr>
      <th>数字</th>
      <th>字母</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
const allTables = document.querySelectorAll("table");
for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;
  for (const th of headerCells) {
    const cellIndex = th.cellIndex;
    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });
      tBody.append(...rows);
    });
  }
}
```

##### 结果

### 在小空间展示大型表格

网络上表格的一个普遍问题是，当内容量很大时，它们在小屏幕上的原生效果并不好，而且使它们可滚动的方法并不明显，特别是当标记可能来自 CMS，无法添加一个包装器时。

这个例子提供了一种在小空间中显示表格的方法。我们隐藏了 HTML 内容，因为它非常大，而且没有什么特别之处。在这个例子中，研究其 CSS 代码更有用。
```

<table>
  <thead>
    <tr>
      <th>1<sup>3</sup> 等于：
      <th>2<sup>3</sup> 等于：
      <th>3<sup>3</sup> 等于：
      <th>4<sup>3</sup> 等于：
      <th>5<sup>3</sup> 等于：
      <th>6<sup>3</sup> 等于：
      <th>7<sup>3</sup> 等于：
  <tbody>
    <tr>
      <td>row 1: 1
      <td>row 1: 8
      <td>row 1: 27
      <td>row 1: 64
      <td>row 1: 125
      <td>row 1: 216
      <td>row 1: 343
    <tr>
      <td>row 2: 1
      <td>row 2: 8
      <td>row 2: 27
      <td>row 2: 64
      <td>row 2: 125
      <td>row 2: 216
      <td>row 2: 343
    <tr>
      <td>row 3: 1
      <td>row 3: 8
      <td>row 3: 27
      <td>row 3: 64
      <td>row 3: 125
      <td>row 3: 216
      <td>row 3: 343
    <tr>
      <td>row 4: 1
      <td>row 4: 8
      <td>row 4: 27
      <td>row 4: 64
      <td>row 4: 125
      <td>row 4: 216
      <td>row 4: 343
    <tr>
      <td>row 5: 1
      <td>row 5: 8
      <td>row 5: 27
      <td>row 5: 64
      <td>row 5: 125
      <td>row 5: 216
      <td>row 5: 343
    <tr>
      <td>row 6: 1
      <td>row 6: 8
      <td>row 6: 27
      <td>row 6: 64
      <td>row 6: 125
      <td>row 6: 216
      <td>row 6: 343
    <tr>
      <td>row 7: 1
      <td>row 7: 8
      <td>row 7: 27
      <td>row 7: 64
      <td>row 7: 125
      <td>row 7: 216
      <td>row 7: 343
    <tr>
      <td>row 8: 1
      <td>row 8: 8
      <td>row 8: 27
      <td>row 8: 64
      <td>row 8: 125
      <td>row 8: 216
      <td>row 8: 343
    <tr>
      <td>row 9: 1
      <td>row 9: 8
      <td>row 9: 27
      <td>row 9: 64
      <td>row 9: 125
      <td>row 9: 216
      <td>row 9: 343
    <tr>
      <td>row 10: 1
      <td>row 10: 8
      <td>row 10: 27
      <td>row 10: 64
      <td>row 10: 125
      <td>row 10: 216
      <td>row 10: 343
    <tr>
      <td>row 11: 1
      <td>row 11: 8
      <td>row 11: 27
      <td>row 11: 64
      <td>row 11: 125
      <td>row 11: 216
      <td>row 11: 343
    <tr>
      <td>row 12: 1
      <td>row 12: 8
      <td>row 12: 27
      <td>row 12: 64
      <td>row 12: 125
      <td>row 12: 216
      <td>row 12: 343
    <tr>
      <td>row 13: 1
      <td>row 13: 8
      <td>row 13: 27
      <td>row 13: 64
      <td>row 13: 125
      <td>row 13: 216
      <td>row 13: 343
    <tr>
      <td>row 14: 1
      <td>row 14: 8
      <td>row 14: 27
      <td>row 14: 64
      <td>row 14: 125
      <td>row 14: 216
      <td>row 14: 343
    <tr>
      <td>row 15: 1
      <td>row 15: 8
      <td>row 15: 27
      <td>row 15: 64
      <td>row 15: 125
      <td>row 15: 216
      <td>row 15: 343
    <tr>
      <td>row 16: 1
      <td>row 16: 8
      <td>row 16: 27
      <td>row 16: 64
      <td>row 16: 125
      <td>row 16: 216
      <td>row 16: 343
    <tr>
      <td>row 17: 1
      <td>row 17: 8
      <td>row 17: 27
      <td>row 17: 64
      <td>row 17: 125
      <td>row 17: 216
      <td>row 17: 343
    <tr>
      <td>row 18: 1
      <td>row 18: 8
      <td>row 18: 27
      <td>row 18: 64
      <td>row 18: 125
      <td>row 18: 216
      <td>row 18: 343
    <tr>
      <td>row 19: 1
      <td>row 19: 8
      <td>row 19: 27
      <td>row 19: 64
      <td>row 19: 125
      <td>row 19: 216
      <td>row 19: 343
    <tr>
      <td>row 20: 1
      <td>row 20: 8
      <td>row 20: 27
      <td>row 20: 64
      <td>row 20: 125
      <td>row 20: 216
      <td>row 20: 343
</table>
```

当查看这些样式时，你会注意到表格的 `display` 属性已被设置为 `block`。虽然允许滚动，但表格失去了一些完整性，而且表格单元格会尽量变小。为了缓解这个问题，我们在 `<tbody>` 上将 `white-space` 设置为 `nowrap`。然而，我们没有对 `<thead>` 进行设置，以避免长标题迫使列的宽度超过显示数据所需的宽度。

为了在向下滚动时保持表头在页面上，我们在 `<th>` 元素上将 `position` 设置为 sticky。注意，我们**没有**将 `border-collapse` 设置为 `collapse`，因为如果我们这样做，表头就不能与表格的其他部分正确分开。

```css
table,
th,
td {
  border: 1px solid;
}

table {
  width: 100%;
  max-width: 400px;
  height: 240px;
  margin: 0 auto;
  display: block;
  overflow-x: auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}
```

#### 结果

无障碍考虑
-----

### 标题

提供一个清晰简洁地描述了表格的目的 `<caption>` 元素，有助于人们决定是否需要阅读表格的其他内容或跳过它。

这有助于借助辅助技术（如屏幕阅读器）进行导航的人、经历低视力状况的人和有认知问题的人。

* MDN：使用 <caption> 元素为表格添加标题
* 标题和总结 • Tables • W3C WAI Web Accessibility Tutorials
### 确定行和列的范围

头部元素的 `scope` 属性在简单情况下是多余的，因为范围是推断出来的。然而，一些辅助技术可能无法做出正确的推断，所以指定头的范围可能会改善用户体验。在复杂的表格中，可以指定范围以提供与标题相关的单元格的必要信息。

#### 示例

```html
<table>
  <caption>
    表格名称和值
  </caption>
  <tbody>
    <tr>
      <th scope="col">名称</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>
```

在 `<th>` 元素上提供声明 `scope="col"`，将有助于描述该单元格处于一列的顶部。在 `<th>` 元素上提供声明 `scope="row"`，将有助于描述该单元格是某一行的第一个。

* MDN：对于视力受损用户的表格
* 有两个头部的表格 • Tables • W3C WAI Web Accessibility Tutorials
* 有不标准头部的表格 • Tables • W3C WAI Web Accessibility Tutorials
* H63: 使用范围属性来关联数据表中的标题单元和数据单元 | W3C Techniques for WCAG 2.0
### 复杂表格

诸如屏幕阅读器等辅助技术可能难以解析那些复杂到标题单元不能以严格的水平或垂直方式关联的表格。这通常由 `colspan` (en-US) 和 `rowspan` (en-US) 属性的存在表示。

理想情况下，考虑用其他方式来展示表格的内容，包括将其分解成一系列较小的、相关的表格，而不必依赖 `colspan` 和 `rowspan` 属性。除了帮助使用辅助技术的人理解表的内容外，这也可能有利于有认知障碍的人，这些人可能难以理解表的布局所描述的关联。

如果表格不能被拆开，使用 `id` 和 `headers` (en-US) 属性的组合，以编程方式将每个表格单元与该单元所关联的标题相关联。

* MDN：对于视力受损用户的表格
* 有多级头部的表格 • Tables • W3C WAI Web Accessibility Tutorials
* H43: 使用 id 和 headers 属性将数据单元与数据表中的标题单元联系起来 | Techniques for W3C WCAG 2.0
规范
--

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

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

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

参见
--

* HTML 数据表格初步
* 可能特别有用的关于设定表格元素样式的 CSS 属性：
    + `width` 控制表格的宽度；
    + `border`、`border-style`、`border-color`、`border-width`、`border-collapse`、`border-spacing` 控制单元格边框，分隔线和框架方面；
    + `margin` 和 `padding` 设定特定的单元格内容样式；
    + `text-align` 和 `vertical-align` 定义文本和单元格内容的对齐方式。


<footer> - HTML（超文本标记语言）

<footer>
========

**HTML <footer> 元素**表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

尝试一下
----

* *内容分类 (en-US)* 流内容 (en-US), 可触内容。
* *允许的内容* 流内容 (en-US)，但是不能包含<footer>或者`<header>`。
* *标签省略* 不允许，开始标签和结束标签都不能省略。
* *允许的父元素*任何接收流内容 (en-US)的元素。注意<footer>元素必须不能是 `<address>`, `<header>` 或者另一个`<footer>` 元素的后代元素。
* *DOM 接口* `HTMLElement`
属性
--

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

使用说明
----

* <footer>元素内的作者信息应包含在`<address>` 元素中。
* <footer>元素不是章节内容，因此在outline中不能包含新的章节。
例子
--

```html
<footer>
  Some copyright info or perhaps some author info for an <article>?
</footer>
```

规范
--

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

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

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

参见
--

* 其他 section 相关的元素：`<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<section>`, `<address>`;
* Sections and outlines of an HTML5 document.
* ARIA: Contentinfo role (en-US)


<noembed> - HTML（超文本标记语言）

<noembed>
=========

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

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

**`<noembed>`** 元素是个废除的和不标准的方式，用于向不支持 `<embed>` ，或者不支持作者希望的 嵌入式内容 的浏览器提供替代（或者“后备”）内容。这个元素在 HTML 4.01 起废除，以支持 `<object>`。后备内容应该插在 `<object>` 的开始和结束标签之间。

**备注：** 虽然这个元素仍旧在许多浏览器中有效，它已经废除了，并且不应使用。使用 `<object>` 来代替。

规范
--

| Specification |
| --- |
| HTML Standard # noembed |


<sub>：下标元素 - HTML（超文本标记语言）

<sub>：下标元素
==========

**HTML `<sub>` 元素**定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。

|  |  |
| --- | --- |
| 内容分类 (en-US) | 流式内容和短语内容 |
| 允许的内容 | 短语内容 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 可以包含短语内容的任意元素 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

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

用法注解
----

* 这个元素应该只用于排版目的，也就是改变文本的位置会改变含义，例如在数学中（*t2*，也可以考虑使用 MathML (en-US) 公式）或者化学符号（ `H2O`）。
* 这个元素不能用于样式上的目的，比如产品名称 LaTeX 的样式，这时应该使用 CSS样式： `vertical-align` 属性的 `sub` 值能实现相同效果。
示例
--

```html
<p>The chemical formula of water: H<sub>2</sub>O</p>
```

#### 结果

The chemical formula of water: H2O

规范
--

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

另见
--

* `<sup>` HTML 元素会产生上标。要注意，你不能同时使用它们，你需要 MathML (en-US) 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。
* `<msub>` (en-US), `<msup>` (en-US), 和 `<msubsup>` (en-US) MathML 元素。


<em>：强调元素 - HTML（超文本标记语言）

<em>：强调元素
=========

HTML **`<em>`** 元素将文本标记为强调（emphasis）格式。`<em>` 元素可以嵌套，嵌套层次越深，则强调的程度越深。

尝试一下
----

属性
--

此元素只包括全局属性。

使用说明
----

通常地，该元素会被浏览器展示为斜体文本，但是，它不应该仅仅用于应用斜体样式；为此目的，请使用 CSS `font-style` 样式。使用 `<cite>` 元素标记作品的标题（书籍、戏剧、歌曲等）；它通常也采用斜体样式，但具有不同的含义。使用 `<strong>` 元素标记比周围文本更重要的文本。

<i> vs. <em>
------------

新的开发人员看到多个元素产生相似的效果，经常被混淆。`<em>` 和 `<i>` 就是一对常见的例子，因为它们都对文字斜体化。它们的区别是什么？应该使用哪一个？

在默认情况下，它们的视觉效果是一样的。但语义是不同的。 `<em>` 标签表示其内容的着重强调，而 `<i>` 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 `<cite>`。）

这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是 CSS 样式所做的。

一个 `<em>` 的例子可能是："Just *do* it already!"，或："We *had* to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调。

一个 `<i>` 的例子可能是："The *Queen Mary* sailed last night"。在这里，没有对 "Queen Mary" 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 `<i>` 的例子可能是："The word *the* is an article"。

示例
--

在此示例中，`<em>` 元素用于突出显示两个成分列表之间的隐式或显式的对比。

```html
<p>
  冰淇淋是用牛奶、甜味剂和奶油制成的。而冷冻蛋奶冻则由牛奶、奶油、甜味剂和<em>蛋黄</em>制成。
</p>
```

### 结果

技术概要
----

|  |  |
| --- | --- |
| 内容类别 | 流式内容、短语内容和可感知内容。 |
| 允许的内容 | 短语内容。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容的元素。 |
| 隐式 ARIA 角色 | `emphasis (en-US)` |
| 允许的 ARIA 角色 | 任何角色 |
| DOM 接口 | `HTMLElement`。Firefox 在直至但不包含 Gecko 1.9.2（Firefox 4）的版本中为这个元素实现了
 `HTMLSpanElement` 接口。
  |

规范
--

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

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

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

参见
--

* `<i>`


<samp> - HTML（超文本标记语言）

<samp>
======

<samp> 元素用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。

|  |  |
| --- | --- |
| 内容分类 (en-US) | Flow content, phrasing content, palpable content. |
| 允许内容 | Phrasing content. |
| 遗漏标签 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级元素 | Any element that accepts phrasing content (en-US). |
| DOM 接口 | `HTMLElement` |

属性
--

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

DOM 接口
------

该元素实现了 `HTMLElement` 接口。

**备注：** 基于 Gecko 1.9.2 及以上，Firefox 还为该元素实现了HTMLSpanElement 接口。

示例
--

```html
<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>
```

### 结果

Regular text. `This is sample text.` Regular text.

规范
--

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

注意
--

可以使用 CSS 选择器 `samp` 定义规则来覆盖浏览器的缺省字体。不过，用户设置的偏好可能会优先于指定的 CSS 使用。

参见
--

* HTML Code Element


<source>：媒体或图像资源元素 - HTML（超文本标记语言）

<source>：媒体或图像资源元素
==================

HTML **`<source>`** 元素为 `<picture>`、`<audio>` 和 `<video>` 元素指定一个或多个媒体资源。它是一个空元素，这意味着它没有内容，也不需要关闭标签。鉴于浏览器对图像文件格式和媒体文件格式的支持不同，该元素通常用于以多种文件格式提供相同的媒体内容，以便与多种浏览器兼容。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 无；这是一个空元素。 |
| 标签省略 | 必须有一个开始标签，不可以有结束标签。 |
| 允许的父元素 |
 一个媒体元素（`<audio>` 或
 `<video>`）且必须放置在流式内容或 `<track>` 元素之前。

一个 `<picture>` 元素，且必须放置在 `<img>` 元素之前。 |
| 隐式 ARIA 角色 | 没有相应的角色 |
| 允许的 ARIA 角色 | 没有允许的 `role` |
| DOM 接口 | `HTMLSourceElement` (en-US) |

属性
--

此元素支持所有的全局属性，此外，还支持以下属性：

`type`

指定图像的 MIME 媒体类型或其他媒体类型，可选择包含 `codecs` 参数 (en-US)。

`src`

指定媒体资源的 URL。如果 `<source>` 的父节点是 `<audio>` 或 `<video>`，则必须指定该属性。如果父元素是 `<picture>` 则不允许指定该属性。

`srcset`

指定由逗号分隔的一个或多个图片 URL 及其描述符的列表。如果 `<source>` 的父节点是 `<picture>`，则必须指定该属性。如果父节点为 `<audio>` 或 `<video>` 则不允许指定该属性。

列表由逗号分隔的字符串组成，表示浏览器可能使用的一组图像。每个字符串由以下内容组成：

* 指定图像位置的 URL。
* 可选的宽度描述符——直接以 `"w"` 结尾的正整数，如 `300w`。
* 可选的像素密度描述符——直接以 `"x"` 结尾的正浮点数，如 `2x`。

列表中的每个字符串必须有一个宽度描述符或一个像素密度描述符才有效。这两个描述符不能同时使用；整个列表中只能统一使用一个描述符。列表中每个描述符的值都必须是唯一的。浏览器会根据这些描述符在给定时间点选择最合适的图像来显示。如果未指定描述符，默认值为 `1x`。如果还存在 `sizes` 属性，则每个字符串都必须包含一个宽度描述符。如果浏览器不支持 `srcset`，则将使用 `src` 作为默认图像源。

`sizes`

指定描述图片最终呈现宽度的源尺寸列表。如果 `<source>` 的父节点是 `<picture>`，则允许指定该属性。如果父元素是 `<audio>` 或 `<video>` 则不允许指定该属性。

列表由以逗号分隔的源尺寸组成。每个源尺寸都是媒体条件——长度对。在布局页面之前，浏览器会使用这些信息来确定 `srcset` 中要显示的图像。请注意，只有在随 `srcset` 提供宽度描述符而不是像素密度描述符的情况下，`sizes` 才会生效（例如，应使用 `200w` 而不是 `2x`）。

`media`

为资源的预期媒体指定媒体查询。

`height`

以像素为单位指定图片的固有高度。如果 `<source>` 的父元素是 `<picture>`，则允许指定该属性。如果父元素是 `<audio>` 或 `<video>` 则不允许指定该属性。

高度值必须是不含单位的整数。

`width`

以像素为单位指定图片的固有宽度。如果 `<source>` 的父元素是 `<picture>`，则允许指定该属性。如果父元素是 `<audio>` 或 `<video>` 则不允许指定该属性。

宽度值必须是不含单位的整数。

使用说明
----

`<source>`元素是**空元素**，这意味着它不仅没有内容，也没有结束标记。也就是说，在 HTML 中永远*不会*使用“`</source>`”。

浏览器会通过 `<source>` 元素列表来查找它所支持的格式。浏览器会使用它能显示的第一个格式。对于每个 `<source>` 元素：

* 如果未指定 `type` 属性，浏览器会从服务器检索媒体类型，并确定是否可以显示。如果媒体无法呈现，浏览器会检查列表中的下一个 `<source>`。
* 如果指定了 `type` 属性，浏览器会立即将其与可显示的媒体类型进行比较。如果不支持该类型，浏览器会跳过服务器查询，直接检查下一个 `<source>` 元素。

如果没有一个 `<source>` 元素提供可用的源：

* 如果是 `<picture>` 元素，浏览器将退回到使用 `<picture>` 元素的 `<img>` 子元素中指定的图片。
* 如果是 `<audio>` 或 `<video>` 元素，浏览器将恢复显示该元素的开头和结尾标记之间的内容。

有关网页浏览器支持的图像格式以及如何选择合适格式的信息，请参阅图像文件类型和格式指南。有关可使用的视频和音频媒体类型的详细信息，请参阅媒体类型和格式指南。

示例
--

### 将 `type` 属性与 `<video>` 搭配使用

本例演示了如何提供不同格式的视频：WebM 适用于支持 WebM 的浏览器，Ogg 适用于支持 Ogg 的浏览器，QuickTime 适用于支持 QuickTime 的浏览器。如果浏览器不支持 `<audio>` 或 `<video>` 元素，则会显示通知。如果浏览器支持该元素，但不支持任何指定格式，则会引发 `error` 事件，默认媒体控件（如果启用）将显示错误。有关使用哪些媒体文件格式及其浏览器支持的更多详情，请参阅我们的媒体类型和格式指南。

```html
<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  抱歉，你的浏览器不支持 HTML 视频。
</video>
```

### 将 `media` 属性与 `<video>` 搭配使用

本例演示了如何为超过一定宽度的视口提供替代源文件。当用户的浏览环境满足指定的 `media` 条件时，相关的 `<source>` 元素就会被选中。然后请求并呈现其 `src` 属性的内容。如果 `media` 条件不匹配，浏览器将转向列表中的下一个 `<source>`。下面代码中的第二个 `<source>` 选项没有 `media` 条件，因此在所有其他浏览上下文中都会选择它。

```html
<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)" />
  <source src="foo.webm" />
  抱歉，你的浏览器不支持 HTML 视频。
</video>
```

要了解更多示例，学习区的视频与音频内容一文是很好的资源。

### 将 `height` 与 `width` 属性与 `<picture>` 搭配使用

在本示例中，`<picture>` 元素中包含了三个带有 `height` 和 `width` 属性的 `<source>` 元素。媒体查询允许浏览器根据视口尺寸选择带有 `height` 和 `width` 属性的图片来显示。

```html
<picture>
  <source
 srcset="landscape.png"
 media="(min-width: 1000px)"
 width="1000"
 height="400" />
  <source
 srcset="square.png"
 media="(min-width: 800px)"
 width="800"
 height="800" />
  <source
 srcset="portrait.png"
 media="(min-width: 600px)"
 width="600"
 height="800" />
  <img
 src="fallback.png"
 alt="当浏览器不支持来源时使用的图片"
 width="500"
 height="400" />
</picture>
```

规范
--

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

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

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

参见
--

* `<audio>` 元素
* `<picture>` 元素
* `<video>` 元素
* 图像文件类型与格式指南
* 媒体类型与格式指南
* Web 性能


<dt> - HTML（超文本标记语言）

<dt>
====

简介
--

**HTML `<dt>` 元素** （或 *HTML 术语定义元素*）用于在一个定义列表中声明一个术语。该元素仅能作为 `<dl>` 的子元素出现。通常在该元素后面会跟着 `<dd>` 元素，然而，多个连续出现的 `<dt>` 元素都将由出现在它们后面的第一个 `<dd>` 元素定义。

* *内容分类 (en-US)* None.
* *允许的内容*流内容 (en-US)，但是不能包含 `<header>` 元素、`<footer>` 元素或者其他章节、标题内容。
* *标签省略*必须有开标签。如果该元素后面紧跟着另一个 <dd> 元素，或者父元素中没有更多内容，则可以省略闭标签。
* *允许的父元素*该元素需要出现在 `<dt>` 元素或者 `<dd>` 元素之前，并且在 `<dl>` 元素中。
* *DOM 接口* `HTMLElement` Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
属性
--

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

示例
--

查看示例请移步 定义列表示例 (en-US)。

规范
--

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

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

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

相关内容
----

* `<dd>`, `<dl>`


<figure>：可附标题内容元素 - HTML（超文本标记语言）

<figure>：可附标题内容元素
=================

HTML **`<figure>`** 元素代表一段独立的内容，可能包含 `<figcaption>` 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、
 可感知内容 |
| 允许的内容 | `<figcaption>` 元素，且紧随着流式内容；或紧随流式内容的 `<figcaption>` 元素；或流式内容。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 所有接受流式内容 (en-US)的元素 |
| 明确的 ARIA 角色 | figure (en-US) |
| 允许的 ARIA 角色 | 无子 figcaption 元素：any，否则没有允许的角色 |
| DOM 接口 | `HTMLElement` |

属性
--

此元素只包含全局属性。

使用说明
----

* 通常，`<figure>` 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。
* 通过在其中插入 `<figcaption>`（作为第一个或最后一个子元素），可以将标题与 `<figure>` 元素相关联。图中找到的第一个 `<figcaption>` 元素显示为图的标题。
示例
--

### 图像

```html
<!-- 只有图像 -->
<figure>
  <img
 src="/zh-CN/docs/Web/HTML/Element/figure/favicon-192x192.png"
 alt="The beautiful MDN logo." />
</figure>

<!-- 有标题的图像 -->
<figure>
  <img
 src="/zh-CN/docs/Web/HTML/Element/figure/favicon-192x192.png"
 alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>
```

### 代码段

```html
<figure>
  <figcaption>使用 <code>navigator</code> 获取浏览器的信息。</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>
```

### 引用

```html
<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>
```

### 诗歌

```html
<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>
```

规范
--

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

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

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

参见
--

* `<figcaption>` 元素


<output> - HTML（超文本标记语言）

<output>
========

**HTML `<output>` 标签**表示计算或用户操作的结果。

|  |  |
| --- | --- |
| Content categories (en-US) | 流式元素 (en-US)，短语元素 (en-US)，listed (en-US), labelable (en-US), resettable (en-US) form-associated element (en-US), palpable content. |
| 允许元素 | 短语元素 (en-US) |
| 省略标签 | 不允许，开始标签和结束标签都不能省略。 |
| 允许父元素 | 接受任何 短语元素 (en-US) |
| 允许 ARIA 角色 | Any |
| DOM 接口 | `HTMLOutputElement` (en-US) |

属性
--

这个标签具有 全局属性 (en-US)。

`for`

其他影响计算结果的标签的 ID，可以多个。

`form`

与当前标签有关联的 form（从属的表单）。该属性的值必须是当前文档内的表单元素的 ID。如果未指明该属性，output 标签必须是一个 form 的后代标签。该属性的用处在于可以让 output 标签脱离 form 标签，存在于一个网页文档的任意位置。

`name`

name 属性。

例子
--

```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>
```

规范
--

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

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

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

参见
--

* Other form-related elements: `<form>`, `<input>`, `<button>`, `<datalist>`, `<legend>`, `<label>`, `<select>`, `<optgroup>`, `<option>`, `<textarea>`, `<fieldset>`, `<progress>` and `<meter>`.


<iframe> - HTML（超文本标记语言）

<iframe>
========

**HTML 内联框架元素 (`<iframe>`)** 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

尝试一下
----

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为*父级浏览上下文*。顶级浏览上下文（没有父级）通常是由 `Window` 对象表示的浏览器窗口。

**警告：** 页面上的每个`<iframe>`都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的`<iframe>`，但是你最好还是先看看这么做会不会导致某些性能问题。

属性
--

该元素包含全局属性。

`allow`

用于为`<iframe>`指定其特征策略.

`allowfullscreen`

设置为`true`时，可以通过调用 `<iframe>` 的 `requestFullscreen()` 方法激活全屏模式。

**备注：** 这是一个历史遗留属性，已经被重新定义为 `allow="fullscreen"`。

`allowpaymentrequest`

设置为`true`时，跨域的 `<iframe>` 就可以调用 Payment Request API。

**备注：** 这是一个历史遗留属性，已经被重新定义为 `allow="payment"`.

`csp`
实验性

对嵌入的资源配置内容安全策略。查看 `HTMLIFrameElement.csp` (en-US) 获取详情。

`height`

以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为`150`。

`importance`
实验性

表示 `<iframe>` 的 `src` 属性指定的资源的加载优先级。允许的值有：

`auto` (default)

不指定优先级。浏览器根据自身情况决定资源的加载顺序

`high`

资源的加载优先级较高

`low`

资源的加载优先级较低

`name`

用于定位嵌入的浏览上下文的名称。该名称可以用作 `<a>` 标签与 `<form>` 标签的 `target` 属性值，也可以用作 `<input>` 标签和 `<button>` 标签的 `formtarget` 属性值，还可以用作 `window.open()` 方法的 `windowName` 参数值。

`referrerpolicy`

表示在获取 iframe 资源时如何发送 referrer 首部：

* `no-referrer`: 不发送 `Referer` 首部。
* `no-referrer-when-downgrade` (default): 向不受 TLS (HTTPS) 保护的 origin 发送请求时，不发送 `Referer` 首部。
* `origin`: referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 scheme, host, 以及 port。
* `origin-when-cross-origin`: 发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。
* `same-origin`: 对于 same origin（同源）请求，发送 referrer 首部，否则不发送。
* `strict-origin`: 仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。
* `strict-origin-when-cross-origin`: 当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。
* `unsafe-url`: 始终在 referrer 首部中包含源以及路径（但不包括 fragment，密码，或用户名）。**这个值是不安全的**, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。

`sandbox`

控制应用于嵌入在 `<iframe>` 中的内容的限制。该属性的值可以为空以应用所有限制，也可以为空格分隔的标记以解除特定的限制：

* `allow-downloads-without-user-activation`
实验性
: 允许在没有征求用户同意的情况下下载文件。
* `allow-forms`: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。
* `allow-modals`: 允许嵌入的浏览上下文打开模态窗口。
* `allow-orientation-lock`: 允许嵌入的浏览上下文锁定屏幕方向（译者注：比如智能手机、平板电脑的水平朝向或垂直朝向）。
* `allow-pointer-lock`: 允许嵌入的浏览上下文使用 Pointer Lock API.
* `allow-popups`: 允许弹窗 (例如 window.open, target="\_blank", `showModalDialog`)。如果没有使用该关键字，相应的功能将自动被禁用。
* `allow-popups-to-escape-sandbox`: 允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。
* `allow-presentation`: 允许嵌入的浏览上下文开始一个 presentation session (en-US)。
* `allow-same-origin`: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。
* `allow-scripts`: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
* `allow-storage-access-by-user-activation`
实验性
: 允许嵌入的浏览上下文通过 Storage Access API (en-US) 使用父级浏览上下文的存储功能。
* `allow-top-navigation`: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。
* `allow-top-navigation-by-user-activation`: 允许嵌入的浏览上下文在经过用户允许后导航（加载）内容到顶级的浏览上下文。

**备注：** 当被嵌入的文档与主页面同源时，强烈建议不要同时使用 `allow-scripts` 和 `allow-same-origin`。如果同时使用，嵌入的文档就可以通过代码删除 `sandbox` 属性，如此，就安全性而言还不如不用`sandbox`。

* 如果攻击者可以在沙箱化的 `iframe` 之外展示内容，例如用户在新标签页中打开内联框架，那么沙箱化也就没有意义了。建议把这种内容放置到独立的专用域中，以减小可能的损失。
* 沙箱属性 (sandbox) 在 Internet Explorer 9 及更早的版本上不被支持。

`src`

被嵌套的页面的 URL 地址。使用 `about:blank` 值可以嵌入一个遵从同源策略的空白页。在 Firefox（version 65 及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 `iframe` 的 `src` 属性（例如通过 `Element.removeAttribute()` ）会导致 `about:blank` 被载入 frame。

`srcdoc`

该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 `srcdoc` 属性，则会渲染 `src` 属性表示的内容。

`width`

以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是`300`。

### 不赞成使用的属性

下面这些属性已不赞成使用，并且可能不再被所有的浏览器支持。你应避免在新项目里面使用它们，也应尽量从旧项目中移除它们。

`align`
已弃用

此元素相对于周围元素的对齐方式。

`frameborder`
已弃用

值为`1`（默认值）时，显示此框架的边框。值为`0`时移除边框。此属性已不赞成使用，请使用 CSS 属性 `border` 代替。

`longdesc`
已弃用

表示框架内容的长描述的 URL。由于广泛的误用，该属性对于无图形界面的浏览器不起作用。

`marginheight`
已弃用

这个属性定义了框架的内容距其上边框与下边框的距离，单位是像素。

`marginwidth`
已弃用

这个属性定义了框架的内容距其左边框和右边框的距离，单位是像素。

`scrolling`
已弃用

这个属性控制是否要在框架内显示滚动条，允许的值包括：

* `auto`: 仅当框架的内容超出框架的范围时显示滚动条。
* `yes`: 始终显示滚动条。
* `no`: 从不显示滚动条。

### 非标准属性
非标准

`mozbrowser`
非标准

这个属性可以让 `<iframe>` 变得像顶级浏览器窗口，详情请参看 Browser API。这个属性**只能**在 WebExtensions 中使用。

**备注：** 查看 Firefox bug 1318532 了解如何在 Firefox 的 WebExtensions 中使用此属性。

脚本
--

内联的框架，就像 `<frame>` 元素一样，会被包含在 `window.frames` 伪数组（类数组的对象）中。

有了 DOM `HTMLIFrameElement` 对象，脚本可以通过 `contentWindow` 访问内联框架的 `window` 对象。 `contentDocument` (en-US) 属性则引用了 `<iframe>` 内部的 `document` 元素，(等同于使用 contentWindow.document），但 IE8-不支持。

在框架内部，脚本可以通过 `window.parent` 引用父窗口对象。

脚本访问框架内容必须遵守同源策略，并且无法访问非同源的 `window` 对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的 `window` 对象。跨域通信可以通过 window.postMessage 来实现。

定位和缩放
-----

作为一个可替换元素，可以使用 `object-position` 和 `object-fit` 来定位、对齐、缩放 `<iframe>` 元素内的文档。

示例
--

### 一个简单的 <iframe>

此示例将位于 https://example.org 的页面嵌入到 iframe 中。

#### HTML

```html
<iframe
 src="https://example.org"
 title="iframe Example 1"
 width="400"
 height="300">
</iframe>
```

#### 结果

无障碍环境
-----

使用 `iframe` 的 title 属性来标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。框架的标题应该清楚地描述框架的内容，例如：

```html
<iframe
 title="Wikipedia page for Avocados"
 src="https://en.wikipedia.org/wiki/Avocado"></iframe>
```

如果没有标题，他们就只能浏览每一个框架来获取需要的内容。这非常耗时间，也很容易让人迷惑，尤其是当页面中包含很多框架或者互动内容如音视频等的时候。

规范
--

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

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

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


<section> - HTML（超文本标记语言）

<section>
=========

**HTML <section> 元素**表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式元素，章节元素，短语元素。 |
| 允许的内容 | 流式元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 接受流式元素的任何元素。请注意，`<section>` 元素不能是 `<address>` 元素的后代。 |
| 隐含的 ARIA 角色 |
 当该元素包含可访问的名称时，认为其是
 region (en-US)，否则为
 No corresponding role。
  |
| 允许的 ARIA 角色 | `alert` (en-US), `alertdialog` (en-US),
 `application` (en-US), `banner` (en-US),
 `complementary` (en-US),
 `contentinfo` (en-US), `dialog` (en-US),
 `document` (en-US), `feed` (en-US),
 `log` (en-US), `main` (en-US),
 `marquee` (en-US), `navigation` (en-US),
 `search` (en-US), `status` (en-US),
 `tabpanel` (en-US) |
| DOM 接口 | `HTMLElement` |

属性
--

此元素只包含全局属性。

使用说明
----

如上所述，`<section>` 是一个通用的分节元素，只有在没有更具体的元素来代表它的时候才可以使用。举个例子，一个导航菜单应该被包裹在 `<nav>` 元素中，但搜索结果列表或地图显示及其控件并没有特定的元素，可以放在 `<section>` 里面。

注意事项：

* 当该元素的内容可以作为一个独立的作品在多个媒体上发表，使用 `<article>` 是一个更好的选择。
* 当内容包含代表与主要内容一同展示的有用的切入信息，但不是直接的一部分（如相关链接，作者简历等），请使用 `<main>`。
* 当内容代表文档中的主要内容区域，请使用 `<main>`。
* 将该元素作为一个样式包装时，请使用 `<div>`。一般来说，`<section>` 应该出现在文档大纲中。

再次重申，每个 `<section>` 都应该被标识出来，通常是将标题（`<h1>` (en-US)-`<h6>` (en-US)元素）作为 `<section>` 元素的一个子元素。请看下面的例子，你可能会看到没有标题的 `<section>`。

示例
--

### 简单的使用示例

#### 之前

```html
<div>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</div>
```

#### 之后

```html
<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>
```

### 没有标题的使用示例

使用 `<section>`> 元素但不包含标题的情况，通常出现在 web 应用或用户界面的部分，而不是传统的文档结构中。在文档中，有独立的内容部分但没有标题来描述其内容，是没有任何意义的。标题对所有的读者都很有用，尤其是对使用屏幕阅读器等辅助技术的用户，同时标题也有利于搜索引擎优化。

在设置二级导航时，全局导航已经被包裹在 `<nav>` 元素中，此时可以使用 `<section>` 元素包裹一个上一个/下一个菜单作为二级导航。

```html
<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>
```

在设置控制应用程序的按钮栏时，需要将其作为文档中单独存在部分，但此时并不需要设置标题。

```html
<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>>
</section>
```

没有标题的内容不会出现在文档大纲中。但如果文档大纲中需要包含这样一个 HTML 块，又不希望影响页面效果，可以通过设置隐藏标题来实现

```html
<section>
  <h2 class="hidden">Controls</h2>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>>
</section>
```

确保使用一些辅助技术和对屏幕阅读器友好的 CSS 来隐藏它，就像这样。

```css
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
```

根据内容来包含标题也有助于 SEO，因此，这是一个可以考虑的选择。

规范
--

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

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

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

参见
--

* 相关元素：`<body>`、`<nav>`、`<article>`、`<aside>`、`<h1>` (en-US)、`<h2>` (en-US)、`<h3>` (en-US)、`<h4>` (en-US)、`<h5>` (en-US)、`<h6>` (en-US)、`<hgroup>`、`<header>`、`<footer>`、`<address>`
* Using HTML sections and outlines
* ARIA: Region role (en-US)
* Why You Should Choose HTML5 article Over section,by Bruce Lawson


<time>：（日期）时间元素 - HTML（超文本标记语言）

<time>：（日期）时间元素
===============

HTML **`<time>`** 标签用来表示一个特定的时间段。该元素可包含 `datetime` 属性，用于将日期转换为机器可读格式，从而获得更好的搜索引擎结果或自定义功能（如提醒）。

它可以代表以下含义之一：

* 24 小时时钟上的时间。
* 公历中的精确日期（可选时间和时区信息）。
* 有效时间长度。
尝试一下
----

属性
--

与所有其他 HTML 元素类似，此元素支持全局属性。

`datetime`

该属性表示此元素的时间和/或日期，并且属性值必须符合下文所描述的格式。

使用说明
----

该元素用于以机器可读格式显示日期和时间。例如，它可以帮助用户代理将事件添加到用户的日历中。

在使用公历之前的日期时不应使用该元素（因为这些日期的计算比较复杂）。

*日期时间值*（机器可读的日期时间值）是该元素的 `datetime` 属性的值，必须采用正确的格式（见下文）。如果元素没有 `datetime` 属性，**它就不能有任何元素后代**，*日期时间值*就是元素的子文本内容。

### 有效的日期时间值

有效的年份字符串

`2011`

有效的年月字符串

`2011-11`

有效的日期字符串

`2011-11-18`

有效的日期字符串（不包含年份）

`11-18`

有效的周字符串

`2011-W47`

有效的时间字符串

`14:54`

`14:54:39`

`14:54:39.929`

有效的本地日期时间字符串

`2011-11-18T14:54:39.929`

`2011-11-18 14:54:39.929`

有效的全球日期时间字符串

`2011-11-18T14:54:39.929Z`

`2011-11-18T14:54:39.929-0400`

`2011-11-18T14:54:39.929-04:00`

`2011-11-18 14:54:39.929Z`

`2011-11-18 14:54:39.929-0400`

`2011-11-18 14:54:39.929-04:00`

有效的时长字符串

`PT4H18M3S`

示例
--

### 简单示例

#### HTML

```html
<p>演出于 <time datetime="2018-07-07T20:00:00">20:00</time> 开始。</p>
```

#### 结果

### `datetime` 示例

#### HTML

```html
<p>演出于 <time datetime="2001-05-15T19:00">5 月 15 日</time>开始。</p>
```

#### 结果

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、短语内容、可感知内容。 |
| 允许的内容 | 短语内容。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容的元素。 |
| 隐式 ARIA 角色 | `time (en-US)` |
| 允许的 ARIA 角色 | 任何 |
| DOM 接口 | `HTMLTimeElement` (en-US) |

规范
--

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

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

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

参见
--

* `<data>` 元素，可用于表示其他类型的值。


<br> - HTML（超文本标记语言）

====

**HTML
 元素**在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

|  |  |
| --- | --- |
| 内容分类 (en-US) | Flow content (en-US), phrasing content (en-US). |
| 允许的内容 | 无，这是一个空元素. |
| 标签略写 | 必须有一个开始标签，并且一定不能有结束标签。在 XHTML 中将元素写为 `<br />`。 |
| 允许的父元素 | 任意可容纳 phrasing content (en-US) 的元素。 |
| Permitted ARIA roles | 任意 |
| DOM 接口 | `HTMLBRElement` |

属性
--

此元素的属性包括全局属性 (en-US)。

`clear`
已弃用

指定换行后下一行文本开始位置。

注意
--

不要用 `<br>` 来增加文本之间的行间隔；应使用 CSS `margin` 属性或`<p>` 元素。

示例
--

```html
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
```

The HTML above outputs:

规范
--

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

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

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

参见
--

* `<address>` element
* `<p>` element


<s> - HTML（超文本标记语言）

<s>
===

**HTML `<s>` 元素** 使用删除线来渲染文本。使用 `<s>` 元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 `<s>` ；为此，提倡使用 `<del>` 和 `<ins>` 元素。

|  |  |
| --- | --- |
| 内容分类 (en-US) | 短语内容 (en-US) or 流式内容 (en-US) |
| 允许的内容 | 短语内容 (en-US) |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容 (en-US)的元素 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

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

**备注：** 直到 Gecko1.9.2（包含），Firefox 为这个元素实现了 `HTMLSpanElement` 接口。

示例
--

```xml
<s>Today's Special: Salmon</s> SOLD OUT<br>
<span style="text-decoration:line-through;">Today's Special:
  Salmon</span> SOLD OUT
```

### 结果

~~Today's Special: Salmon~~ SOLD OUT
 ~~Today's Special: Salmon~~ SOLD OUT

Accessibility concerns
----------------------

The presence of the `s` element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS `content` property, along with the `::before` and `::after` pseudo-elements.
```

s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}
```

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been struck out would adversely affect understanding.

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
规范
--

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

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

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

参见
--

* `<strike>` 元素，另一个 `<s>` 元素，已经废除并且不应再用于 Web 站点。
* `<del>` 元素用于代替，如果数据已经删除了。
* CSS `text-decoration`-line-through 属性也用于为 `<s>` 元素实现前者的视觉效果。


<address> - HTML（超文本标记语言）

<address>
=========

**HTML `<address>` 元素** 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。

尝试一下
----

由`<address>`元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。

`<address>`可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在`<article>`元素内，指明该文章的作者。

|  |  |
| --- | --- |
| 内容分类 | Flow content (en-US), palpable content. |
| 允许的内容 | Flow content (en-US), 但是不能嵌套`<address>元素`, 不能是头部内容 (`<hgroup>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US)), 不能是区块内容 (`<article>`, `<aside>`, `<section>`, `<nav>`), 不能是`<header>` 或 `<footer>`元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | Any element that accepts flow content (en-US), but always excluding `<address>` elements (according to the logical principle of symmetry, if `<address>` tag, as a parent, can not have nested `<address>` element, then the same `<address>` content can not have `<address>` tag as its parent). |
| 允许的 ARIA 角色 | 无 |
| DOM 接口 | `HTMLElement` 在 Gecko 2.0（Firefox 4）以前，Gecko 使用 `HTMLSpanElement` 接口实现这个元素 |

属性
--

此元素只有全局属性。

用法说明
----

* 当表示一个和联系信息无关的任意的地址时，请改用 `<p>` 元素而不是 `<address>` 元素。
* 这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在 `<time>` 元素之中）。
* 通常，`<address>` 元素可以放在 `<footer>` 元素之中（如果存在的话）。
示例
--

这个例子演示了如何使用 `<address>` 表示一篇文章的作者的联系信息。

```html
<address>
  You can contact author at
  <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br />
  If you see any bugs, please
  <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br />
  You may also want to visit us:<br />
  Mozilla Foundation<br />
  331 E Evelyn Ave<br />
  Mountain View, CA 94041<br />
  USA
</address>
```

### 结果

虽然 `<address>` 元素看起来只是使用了 `<i>` 或者 `<em>` 元素的默认样式来渲染其中的文本，但是当处理联系信息时使用它更为合适，因为它表达了额外的语义信息。

规范
--

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

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

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

参见
--

* Others section-related elements: `<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<footer>`, `<section>`, `<header>`;
* 使用 HTML 章节和大纲