recursal/MDN huggingface dataset:
<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 章节和大纲
<ins>
=====

简介
--


**HTML `<ins>` 元素**定义已经被插入文档中的文本。
尝试一下
----

* *内容 (en-US)分类*短语元素 或者 流式元素 。
* *允许内容* 透明内容模型。
* *标签闭合* 不允许，开始标签和结束标签都不能省略。
* *允许的父级标签*任意短语元素
* *允许的 ARIA 角色*任意
* *DOM 接口* `HTMLModElement` (en-US)
属性
--

该元素支持所有 全局特性 (en-US)，除此以外还支持下列属性：

`cite`

cite 属性的值指向一个文档的 URL，该文档解释了文本被插入或修改的原因。（目前该属性还没有被主流浏览器支持）

`datetime`

该特性指示的此修改发生的时间和日期，并且该特性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间，则该元素不具有相关联的时间标记。

示例
--


```html
<ins>这一段文本是新插入至文档的。</ins>
```

### 结果

这一段文本是新插入至文档的。

规范
--

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

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

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

参阅
--

* `<del>`
<strong>
========

总结
--

Strong 元素 (`<strong>`) 表示文本十分重要，一般用粗体显示。

使用环境
----

|  |  |
| --- | --- |
| 内容分类 | 流内容，语法内容 |
| 允许的内容 | Phrasing content (en-US) |
| 标签省略 | 不允许，必须同时有起始和结束标签 |
| 允许的父级元素 | 任何接受phrasing content (en-US)的元素，或者接受 flow content (en-US)的元素 |
| 规范文档 | HTML5, section 4.6.3; HTML 4.01, section 9.2.1 |

属性
--

只具有全局属性.

DOM 接口
------

实现了 `HTMLElement` 接口。

**备注：** 实现注意事项\*\*:\*\* 一直到 Gecko 1.9.2 (含), Firefox 对这个元素实现了 `HTMLSpanElement` 接口

举例
--


```html
<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>
```

效果
--
```

When doing x it is imperative to do y before proceeding.
```

### Bold vs. Strong

新的开发者经常感到疑惑，为什么在一个渲染的网站上会有这么多方式来表达同样的东西。Bold 和 Strong 可能就是这其中的一种。为什么使用<strong></strong>而不是<b></b>? 使用 strong 的话你不得不打更多的字母，却产生出和 b 同样的效果，对吧？

也许并不是；strong 是一个逻辑状态，而 bold 是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其他大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用 strong 呈现出的表现形式不同于单纯的加粗。因为 bold 是一个物理状态，他没有区分表现形式和内容。如果让 bold 做了加粗文本外的其他任何事情，都将会令人困惑而且也不符合逻辑。

同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。

### Emphasis vs. Strong

在 HTML4 时，Strong 简单地表示一个更强的强调 (emphasis)，而在 HTML5 中，这个元素被描述为表征“内容强烈的重要性 (strong importance for its contents) ”。这是一个重要的区别。Em 标签 (Emphasis) 用于改变一个句子的意思 (比如"我<em>\*喜欢</em>\*胡萝卜" 和"我喜欢<em>*胡萝卜</em>*"，分别强调喜欢和胡萝卜), Strong 用来对一个句子的部分增加重要性 (比如 "**警告！** 这**非常危险**。") Strong 和 Emphasis 都可以分别通过嵌套来增加相对重要性或强调重点。

规范
--

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

同样参见
----

* HTML bold element
* HTML em element
<acronym>
=========

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

HTML **`<acronym>`** 元素允许作者明确声明一个构成单词首字母缩略字或缩写的字符序列。

**警告：** 请不要使用该元素，而应使用 `<abbr>` 元素代替。

属性
--

该元素仅具有所有元素所共有的全局属性。

DOM 接口
------

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

示例
--


```html
<p>
  万维网（<acronym title="World Wide Web">WWW</acronym>）是因特网的组成部分。
</p>
```

### 结果

默认样式
----

尽管这个标签的目的纯粹是为了方便作者，但其默认样式因浏览器而异：

* Opera、Firefox、Chrome 和其他的一些浏览器在元素内容添加一条点状下划线。
* 一小部分浏览器不仅添加点状下划线，而且将其设为小型大写字母；为避免这种样式，可以在 CSS 中添加类似 `font-variant``: none` 的内容来处理这种情况。

因此强烈建议 Web 作者明确设置此元素的样式，或选择接受浏览器之间的差异。

规范
--

| Specification |
| --- |
| HTML Standard # acronym |

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

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

参见
--

* `<abbr>` HTML 元素
<strike>
========

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

HTML **`<strike>`** 元素在文本上放置水平的删除线。

**警告：** 这个元素在 HTML 4 和 XHTML 1 中废除了，并且在现存的 HTML 标准被弃用。如果语义上合适的话（也就是如果表示*删除*的内容），使用 `<del>` 来代替。在所有其他的情况中，使用 `
`。


|  |  |
| --- | --- |
| DOM 接口 | `HTMLElement` |

属性
--

这个元素包含全局属性。

示例
--


```html
&lt;strike&gt;: <strike>Today's Special: Salmon</strike> SOLD OUT<br />
&lt;s&gt;: 
Today's Special: Salmon
 SOLD OUT
```


代码结果为：

规范
--

| Specification |
| --- |
| HTML Standard # strike |

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

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

参见
--

* `
` 元素。
* `<del>` 元素应该在数据已经*删除*的情况下使用。
* CSS `text-decoration` 属性可以用于使用删除线来装饰文本。
<body>：文档主体元素
=============

**HTML `body` 元素**表示文档的内容。`document.body` 属性提供了可以轻松访问文档的 body 元素的脚本。

|  |  |
| --- | --- |
| 内容分类 | Sectioning root. |
| 允许的内容 | Flow content. |
| Tag omission | 
 The start tag may be omitted if the first thing inside it is not a space
 character, comment, `<script>` element or
 `<style>` element. The end tag may be omitted if
 the `<body>` element has contents or has a start tag,
 and is not immediately followed by a comment.
  |
| 允许的父元素 | 
 它必须是
 html 元素的直接子元素。
  |
| Permitted ARIA roles | None |
| DOM 接口 | `HTMLBodyElement`* `body` 元素接口 `HTMLBodyElement`
 。
* 你可以通过 `document.body` 属性访问
 `body` 元素。
 |

属性
--

此元素包含 全局属性 。

`alink` 
已弃用

超链接选中之后的文本颜色。*此方法不符合规范，请使用 CSS 的 `color` 属性和 `:active` 伪类替代。*

`background` 
已弃用

将 URI 所指向的图片作为背景。此方法不符合规范，请*使用* *CSS 的 `background` 属性替代。*

`bgcolor` 
已弃用

文档的背景颜色。此方法不符合规范，请使用 *CSS 的 `background-color` 属性替代。*

`bottommargin` 
已弃用

`body` 的底外边距。此方法不符合规范，请使用 *CSS 的 `margin-bottom` 属性替代。*

`leftmargin` 
已弃用

`body` 的左外边距。此方法不符合规范，请使用 *CSS 的 `margin-left` 属性替代。*

`link` 
已弃用

未访问过的超链接文本颜色。此方法不符合规范，请使用 *CSS 的 `color` 属性和 `:link` 伪类替代。*

`onafterprint`

用户完成文档打印之后调用的函数。

`onbeforeprint`

用户要求打印文档之前调用的函数。

`onbeforeunload`

文档即将被关闭之前调用的函数。

`onblur`

文档失去焦点时调用的函数。

`onerror`

文档加载失败时调用的函数。

`onfocus`

文档获得焦点时调用的函数。

`onhashchange`

文档当前地址的片段标识部分（以 (`'#'`) 开始的部分）发生改变时调用的函数。

`onlanguagechange` 
实验性

用户选择的语言发生改变时调用的函数。

`onload`

文档完成加载时调用的函数。

`onmessage`

文档接收到消息时调用的函数。

`onoffline`

网络连接失败时调用的函数。

`ononline`

网络连接恢复时调用的函数。

`onpopstate`

用户回退历史记录时调用的函数。

`onredo`

用户重做操作时调用的函数。

`onresize`

文档尺寸发生改变时调用的函数。

`onstorage`

存储内容（`localStorage` / `sessionStorage`）发生改变时调用的函数。

`onundo`

用户撤销操作时调用的函数。

`onunload`

文档关闭时调用的函数。

`rightmargin` 
已弃用

`body` 的右外边距。此方法不符合规范，请使用 *CSS 的 `margin-right` 属性替代。*

`text` 
已弃用

文本颜色。此方法不符合规范，请使用 *CSS 的 `color` 属性替代。*

`topmargin` 
已弃用

`body` 的上外边距。此方法不符合规范，请使用 *CSS 的 `margin-top` 属性替代。*

`vlink` 
已弃用

访问过的超链接的文本颜色。此方法不符合规范，请使用 *CSS `color` 属性和 `:visited` 伪类替代。*

例子
--


```html
<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>
```

规范
--

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

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

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

参见
--

* `<html>`
* `<head>`
<noscript>
==========

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 **HTML <noscript> 元素**中定义脚本未被执行时的替代内容。

|  |  |
| --- | --- |
| 内容分类 (en-US) | Metadata content (en-US), flow content (en-US), phrasing content (en-US). |
| 允许的内容 | 当脚本被禁用并且它是 `<head>`元素的后代时：以下顺序任意，零个或者多个`<link>`元素，零个或者多个`<style>`元素，零个或者多个`<meta>`元素。
当脚本被禁用并且它不是 `<head>` 元素的子元素时：任何 transparent content 都可以，但是在它的后代中必须没有 `<noscript>`元素。
否则：flow content 或 phrasing content。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 如果没有根元素 `<noscript>`，或者在`<head>`元素中（仅用于 HTML 文档）也没有根元素 `<noscript>`，允许任何 phrasing content (en-US) 元素。 |
| DOM 接口 | `HTMLElement` |

属性
--

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

示例
--


```html
<noscript>
  <!-- anchor linking to external file -->
  <a href="http://www.mozilla.com/">External Link</a>
</noscript>
<p>Rocks!</p>
```

### 允许脚本时的结果

Rocks!

### 禁用脚本时的结果

External Link

Rocks!

规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<caption>
=========

简介
--

**HTML `<caption>` 元素** (or *HTML 表格标题元素*) 展示一个表格的标题，它常常作为 `<table>` 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

|  |  |
| --- | --- |
| Content categories (en-US) | None. |
| Permitted content | Flow content (en-US). |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parent elements | A `<table>` element, as its first descendant. |
| DOM interface | `HTMLTableCaptionElement` (en-US) |

特性
--

本元素包含了所有 全局特性 (en-US)。

`align` 
已弃用

这个可枚举属性表明了 caption 相对于 table 应该如何排列。它可能有以下几个值：

* `left`, 展示在表格左边
* `top`, 显示在表格前面
* `right`, 显示在表格右边
* `bottom`, 显示在表格下面

**备注：** 不要使用这个属性，它已经被弃用：`<caption>` 元素应该使用 CSS设置样式。要得到类似`align`属性的效果，使用 CSS 属性 `caption-side` 和 `text-align`.

使用说明
----

当 `<table>` 元素是`<caption>` 的父元素，caption 是`<figure>` 元素的唯一后代的时候，使用`<figcaption>`元素替代 caption 元素

实例
--

请查看 `<table>` 页面获得 `<caption>`的例子

Specifications
--------------

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

Browser compatibility
---------------------

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

See also
--------

* 其他与 table 相关的 HTML 元素：`<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>` (en-US), `<tfoot>`, `<th>`, `<thead>`, `<tr>`;
* 可能对`<caption>` 元素有用的 CSS 属性：
    + `text-align`, `caption-side`.
<template>：内容模板元素
=================

HTML **内容模板**（`<template>`）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。

将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 **`<template>`** 元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

|  |  |
| --- | --- |
| Content categories | Metadata content, flow content, phrasing content, script-supporting element |
| Permitted content | No restrictions |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | `<body>`, `<frameset>`, `<head>`, `<dl>` and `<colgroup>` without a `span` attribute |
| Permitted ARIA roles | None |
| DOM interface | `HTMLTemplateElement` |

属性
--

此元素仅包含全局属性。

但， `HTMLTemplateElement` 有个属性： `content` , 这个属性是只读的`DocumentFragment` 包含了模板所表示的 DOM 树。

示例
--

首先我们从示例的 HTML 部分开始。


```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 现有数据可以可选地包括在这里 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```


首先，我们有一个表，稍后我们将使用 JavaScript 代码在其中插入内容。然后是模板，它描述了表示单个表行的 HTML 片段的结构。

既然已经创建了表并定义了模板，我们使用 JavaScript 将行插入到表中，每一行都是以模板为基础构建的。


```js
// 通过检查来测试浏览器是否支持 HTML 模板元素
// 用于保存模板元素的内容属性。
if ("content" in document.createElement("template")) {
  // 使用现有的 HTML tbody 实例化表和该行与模板
  let t = document.querySelector("#productrow"),
    td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 克隆新行并将其插入表中
  let tb = document.getElementsByTagName("tbody");
  let clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // 创建一个新行
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 克隆新行并将其插入表中
  let clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);
} else {
  // 找到另一种方法来添加行到表，因为不支持 HTML 模板元素。
}
```


结果是原始的 HTML 表格，通过 JavaScript 添加了两行新内容：
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

规范
--

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

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

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

参见
--

* Web components: `<slot>` (and historical: `<shadow>`)
* Using templates and slots
<progress>：进度指示元素
=================

概述
--

**HTML**中的 **`<progress>`** 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。

尝试一下
----

使用上下文
-----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、短语内容、可关联标签内容、可感知内容。 |
| 允许的内容 | 可感知内容，但其后代元素不能有 `<progress>` 元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 接受可感知内容的任何元素。 |
| 隐式 ARIA 角色 | `progressbar` (en-US) |
| 允许的 ARIA 角色 | 没有允许的角色（`role`） |
| DOM 接口 | `HTMLProgressElement` (en-US) |

属性
--

和其他的 HTML 元素一样，该元素具有全局属性.

`max`

该属性描述了这个`progress`元素所表示的任务一共需要完成多少工作。

`value`

该属性用来指定该进度条已完成的工作量。如果没有`value 属性`,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).


**备注：** 你可以使用`orient` (en-US)属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类`:indeterminate`可以用来匹配那些不确定的进度条。

DOM 接口
------

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

示例
--


```html
<progress value="70" max="100">70 %</progress>
```

### 结果

规范
--

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

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

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

参见
--

* `<meter>`
* `:indeterminate`
* `-moz-orient` (en-US)
* `::-moz-progress-bar`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`
<dl>
====

**HTML `<dl>` 元素** （或 *HTML* *描述列表元素*）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

尝试一下
----

在 HTML5 之前， <dl> 被大家以定义列表所熟知。

* *内容分类 (en-US)* Flow content (en-US)(流体内容), 如果`<dl>` 元素的子元素包含一个键值对，则显示其中内容。

1. *允许的内容*一：零组或多组 dom 结构，每组 dom 结构中包含一个或多个`<dt>` 元素，以及 一个或多个`<dd>`元素，可通过`<script>`元素和`<template>`元素进行混入。二：一组或多组`<div>`元素，可通过`<script>`元素和`<template>`元素混入。

* *标签省略* 不允许，开始标签和结束标签都不能省略。
* *允许的父元素*符合流内容的任何元素
* *DOM 接口* `HTMLDListElement` (en-US)
属性
--

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

示例
--

### 单条术语与描述


```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

### 多条术语、单条描述


```html
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

### 单条术语、多条描述


```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

### 多条术语、多条描述

同样的，该元素同样可以支持在一个列表中出现多条术语以及多条描述。

### 元数据

描述列表可以很方便的将元数据展示为键—值对列表：


```html
<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>
```


小技巧：通过 CSS3，我们可以很容易的在术语后面添加一个与内容无关的分隔符号，比如：


```css
dt::after {
  content: ": ";
}
```

### 在 `div` 元素中包装名称值组

WHATWG HTML 允许在 `<div>` 元素中的 `<dl>` 元素中包装每个名称 - 值组。当使用元数据时，或全局属性适用于整个组或用于样式时，这可能很有用。


```html
<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>
```

备注
--

请不要将该元素（也不要用 `<ul>` 元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。

要改变描述列表中描述的缩进量，请使用 CSS `margin` 属性。

规范
--

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

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

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

参见
--

* `<dt>`
* `<dd>`
<code>
======

摘要
--

**HTML `<code>` 元素**呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。

* *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* `HTMLElement` Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the `HTMLSpanElement` interface for this element.
属性
--

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

例子
--


```html
<p>Regular text. <code>This is code.</code> Regular text.</p>
```

### 结果

Regular text. `This is code.` Regular text.

(中文的等宽字和正常字看起来区别不大，因为汉字本身就是方块行。但是仍能看出几行文字之间的对齐差异)

注意
--

CSS 规则可以覆盖浏览器默认的 `code` 标签字体样式。但用户设置的浏览器字体选项可能会超过 CSS 的优先级，使之无效。

规范
--

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

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

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

参见
--

* `<samp>`
* `<kbd>`
* `<var>`
* `<pre>`
<bdi>
=====

**HTML** 双向隔离元素（**`<bdi>`**）告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。

尝试一下
----

尽管同样的显示效果可以通过使用 CSS 规则 `unicode-bidi`：隔离`<span>`或者其他文本格式化元素，但语义信息只能通过<bdi>元素传递。特别是，当浏览器允许忽略 CSS 样式时，在这种情况下，使用<bdi>仍然可以保证文本正确显示，而使用 CSS 样式来传递语义时就显得毫无用处。

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

属性
--

如同其他 HTML 元素一样，它包含全局属性 (en-US)，但是有一些语义上的细微差别：**dir**属性不继承父元素。如果没有设置，默认值即为 auto，以便浏览器根据元素内容决定元素内容的方向。

示例
--


```html
<p dir="ltr">
  This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed
  right-to-left.
</p>
```

### 结果

This arabic word REDLOHECALP\_CIBARA is automatically displayed right-to-left.

规范
--

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

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

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

参见
--

* 相关元素：`<bdo>`
* 相关属性：`direction`, `unicode-bidi`
<summary>：摘要展现元素
================

HTML **`<summary>` 元素** 指定了 `<details>` 元素展开盒子的内容的摘要，标题或图例。点击 `<summary>` 元素可以切换父元素 `<details>` 开启和关闭的状态。

尝试一下
----

属性
--

本元素仅包含全局属性。

使用注意
----

`<summary>` 元素的内容可以是任意标题内容、纯文本，或是可以在段落内使用的 HTML 代码。

`<summary>` 元素*仅*可作为 `<details>` 元素的第一个子节点。当用户在 `<summary>` 元素上点击时，父元素 `<details>` 会切换开启和关闭的状态，并会向 `<details>` 元素发送 `toggle` 事件，令用户得知这样的状态改变何时发生。

### 默认标签文字

如果一个 `<details>` 元素的第一个子节点不是 `<summary>` 元素，用户代理会使用一个默认字符串（通常为“详细信息”或“详情”）作为展开盒子的标签内容。

### 默认样式

根据 HTML 规范，`<summary>` 元素的默认样式包括 `display: list-item`。这使得改变或移除显示为标签旁边的展现部件的图标成为可能，默认的图标通常是一个三角形。

你也可以将样式改变为 `display: block` 来移除展开三角形。

参见浏览器兼容性以了解其中的细节，因为并不是所有浏览器支持这个元素的全部功能。

对于基于 Webkit 的浏览器，例如 Safari，可以通过非标准的 CSS 伪元素 `::-webkit-details-marker` 来控制图标显示。要删除展开三角形，请使用 `summary::-webkit-details-marker { display: none }`。

示例
--

下面有一些 `<summary>` 元素的用法示例。你可以在 `<details>` 元素的文档中找到更多示例。

### 基本示例

一个简单的例子显示了在 `<details>` 元素中如何使用 `<summary>`：


```html
<details open>
  <summary>概况</summary>
  <ol>
    <li>手上的现钱：$500.00</li>
    <li>当前发票：$75.30</li>
    <li>到期日：5/6/19</li>
  </ol>
</details>
```


#### 结果

### 使用标题元素作为总结

你可以在 `<summary>` 元素中像这样使用标题元素：


```html
<details open>
  <summary><h4>概况</h4></summary>
  <ol>
    <li>手上的现钱：$500.00</li>
    <li>当前发票：$75.30</li>
    <li>到期日：5/6/19</li>
  </ol>
</details>
```


#### 结果

目前这有一些间距问题，可以用 CSS 解决。

**警告：** 因为 `<summary>` 元素的默认角色是 button（它将所有角色从子元素中剥离），这个例子对于使用辅助技术的用户来说是不可行的，例如屏幕阅读器。`<h4>` 的角色将被删除，因此对这些用户来说，不会被视为标题。

### summary 元素中的 HTML

这个示例给 `<summary>` 元素增加了一些语义，以表明标签的重要性：


```html
<details open>
  <summary><strong>概况</strong></summary>
  <ol>
    <li>手上的现钱：$500.00</li>
    <li>当前发票：$75.30</li>
    <li>到期日：5/6/19</li>
  </ol>
</details>
```


#### 结果

技术概要
----

|  |  |
| --- | --- |
| 允许的内容 | 短语内容，或标题内容元素之一 |
| 标签省略 | 否，开始和结束标签都不能省略 |
| 允许的父元素 | `<details>` 元素 |
| 隐式 ARIA 角色 | `button` |
| 允许的 ARIA 角色 | 没有允许的 `role` |
| DOM 接口 | `HTMLElement` |

规范
--

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

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

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

参见
--

* `<details>`
<fieldset>
==========

HTML **`<fieldset>`** 元素用于对表单中的控制元素进行分组（也包括 label 元素）。

尝试一下
----

如上述例子所示，`<fieldset>` 元素将一个 HTML 表单的一部分组成一组，内置了一个 `<legend>` 元素作为 `fieldset` 的标题。这个元素有几个属性，最值得注意的是 `form`，其可以包含同一页面的 `<form>` 元素的 `id`，以使 `<fieldset>` 成为这个 `<form>` 的一部分，即使 `<fieldset>` 不在其内。还有 `disabled` 属性，可将 `<fieldset>` 及其所有内容设置为不可用。

属性
--

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

`disabled`

如果设置了这个 bool 值属性，`<fieldset>` 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 `<form>` 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，`<legend>` 中的表单元素不会被禁用。

`form`

将该值设为一个 `<form>` 元素的 `id` 属性值以将 `<fieldset>` 设置成这个 `<form>` 的一部分。

`name`

元素分组的名称

**备注：** fieldset 的标题由第一个 `<legend>` 子元素确定。

使用 CSS 样式
---------

`<fieldset>` 有几种特别的样式方案。

它的 `display` 值默认为 `block`，因此建立了一个块级格式化上下文。如果将 `<fieldset>` 的 `display` 值设置为行内级别，则会表现为 `inline-block`，否则会表现为 `block`。默认情况下 `<fieldset>` 会有 `2px` `groove` 的边界围绕着内容，还有一个默认的小的内边距，还有 `min-inline-size: min-content` 。

如果其中有 `<legend>` 元素，会放在块级框起始处的边界上。`<legend>` 的宽度会根据内容尽量收缩（shrink-wrap），同时也建立了一个格式化上下文。`display` 值会块级化（例如 `display: inline` 表现为 `block`）。

一个匿名的框会包围 `<fieldset>` 的内容，这个框继承了 `<fieldset>` 的一些属性。如果将 `<fieldset>` 的样式设置为 `display: grid` 或 `display: inline-grid`，那么这个匿名框也会是栅格上下文。如果将 `<fieldset>` 的样式设置为 `display: flex` 或 `display: inline-flex`，则匿名框也会是弹性盒上下文。除上述情况之外，匿名框默认建立块级格式化上下文。

你可以以任意方式自行设置 `<fieldset>` 和 `<legend>` 的样式以配合你的页面设计。

**备注：** 截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 `<fieldset>` 中使用 flexbox 和 grid 布局。这个 GitHub issue 跟踪了这个 bug。

示例
--

### 简单的 fieldset

这个例子展示了一个非常简单的 `<fieldset>`，其中有一个 `<legend>`和一个简单的控件。


```html
<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio" />
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>
```

### 禁用 fieldset

这个例子展示了一个被禁用的 `<fieldset>` ，其中有两个控件。注意随着 `<fieldset>` 被一起禁用的控件如何表现。


```html
<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>
```

技术概览
----

|  |  |
| --- | --- |
| 内容目录 (en-US) | Flow content (en-US), sectioning root, listed (en-US), form-associated (en-US) element, palpable content. |
| 允许的内容 | 可选的`<legend>` 元素，后面是内容流（flow content） |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | Any element that accepts flow content (en-US). |
| 默认 ARIA role | `group` (en-US) |
| 允许的 ARIA roles | `radiogroup` (en-US), `presentation` (en-US), `none` (en-US) |
| DOM 接口 | `HTMLFieldSetElement` |

规范
--

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

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

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

[1] 在 IE11 中 disabled 的 fieldset 的子元素并不会全都被 disabled; 相关 Issues: IE bug 817488: `input[type="file"]` not disabled inside disabled `fieldset` and IE bug 962368: Can still edit `input[type="text"]` within `fieldset[disabled]`.

参见
--

* `<legend>` 元素
* `<input>` 元素
* `<label>` 元素
* `<form>` 元素