recursal/MDN huggingface dataset:
<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>**) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 `<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>` 元素 在图片上定义一个热点区域，可以关联一个超链接。<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 提醒注意（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>
======

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

概述
--

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


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

另见
--

* `white-space`
* `overflow`
<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 &lt;article&gt;?
</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>
=========

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

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

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

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

规范
--

| Specification |
| --- |
| HTML Standard # noembed |
<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>`** 元素将文本标记为强调（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>
======

<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
<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>`** 元素代表一段独立的内容，可能包含 `<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>` 标签**表示计算或用户操作的结果。

|  |  |
| --- | --- |
| 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>`.
<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>`** 标签用来表示一个特定的时间段。该元素可包含 `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 <br> 元素**在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

|  |  |
| --- | --- |
| 内容分类 (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
===

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

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

属性
--

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

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

示例
--


```xml

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