spellcheck - HTML（超文本标记语言）

spellcheck
==========

spellcheck 全局属性是枚举属性，定义是否可以检查元素的拼写错误。它可以具有以下值：

* `true`, 设置在可能的情况下会去检查元素内容的拼写错误;
* `false`, 设置在可能的情况下关闭对元素内容拼写检查。

如果没有设置这个属性，默认值由元素自身类型和浏览器设置决定。默认值也可以被继承，当有祖先元素的 *spellcheck* 设置为 `true` 的情况下，子元素的默认值也是 `true`。

你可以参考这篇文章的例子来使用这个属性。

这个属性是枚举型而不是布尔类型。这意味着显式设置其中一个值 true 或 false 是强制性的，如果使用简写 `<label spellcheck>Example Label</label>` 是不行的。正确的用法是`<label spellcheck="true">Example Label</label>`.

这个属性仅仅是浏览器上的提示：浏览器并不会强制去检查拼写错误，通常不可编辑的元素是不会去检查拼写错误的，就算它的 spellcheck 属性被设置为 true 而且浏览器支持拼写检查。

各个浏览器的默认设置和元素依赖：

| 浏览器 | `<html>` | `<textarea>` | `<input>` | 其他 | 附注 |
| --- | --- | --- | --- | --- | --- |
| Firefox | `false` | `false` | `false` | *inherited* | 当 `layout.spellcheckDefault` 值为 `0` |
| **`false`** | **`true`** | ***inherited*** | ***inherited*** | **当 `layout.spellcheckDefault` 值为 `1` (default
value)** |
| `false` | `true` | `true` | *inherited* | 当 `layout.spellcheckDefault` 值为 `2` |
| Seamonkey | `false` | `false` | `false` | *inherited* | 当 `layout.spellcheckDefault` 值为 `0` |
| **`false`** | **`true`** | ***inherited*** | ***inherited*** | **当 `layout.spellcheckDefault` 值为 1**（默认如此）**** |
| `false` | `true` | `true` | *inherited* | 当 `layout.spellcheckDefault` 值为 `2` |
| Camino | `false` | `false` | `false` | *inherited* | 当 `layout.spellcheckDefault` 值为 `0` |
| `false` | `true` | *inherited* | *inherited* | 当 `layout.spellcheckDefault` 值为 `1` |
| **`false`** | **`true`** | **`true`** | ***inherited*** | **当 layout.spellcheckDefault 值为 `2`**（默认如此）**** |
| Chrome | `false` | `true` | ? | *inherited* |
| Internet Explorer | `false` | `true` | ? | *inherited* |
| Opera | `false` | `true` | ? | *inherited* |
| Safari | `false` | `true` | ? | *inherited* |

规范
--

| Specification |
| --- |
| HTML Standard # attr-spellcheck |

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

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

另见
--

* 所有 全局属性


itemtype - HTML（超文本标记语言）

itemtype
========

**`itemtype`** 全局属性 指定了词汇的 URL，它将会用于定义数据结构中的 `itemprop`（条目属性）。`itemscope` 用于设置词汇的生效范围，其中词汇在数据结构中由 `itemtype` 设置。

Google 和其他主流搜索引擎支持 schema.org 结构化数据词汇。这个词汇定义了一组标准的类型名称和属性名称。例如，`MusicEvent` 表示音乐会的名称，`startDate` 和 `location` 属性指定了音乐会的关键信息。这里，`MusicEvent` 应该是用于 `itemtype` 的 URL，而 `startDate` 和 `location` 作为 `MusicEvent` 所定义的 `itemprop`。

**备注：** 更多 `itemtype` 属性的信息请见 http://schema.org/Thing

* **itemtype** 属性必须拥有这样的值，它是唯一标识的无序集合，这些标识是大小写敏感的，每个标识都是有效的绝对 URL，并且所有都使用相同词汇定义。属性的值必须至少拥有一个标识。
* 条目的类型必须全部为定义在适用规范（例如 schema.org）中的类型，并且必须使用相同词汇定义。
* itemtype 属性只能在指定了 itemscope 属性的元素上指定。
* itemid 属性只能在同时指定了 itemscope 和 itemtype 属性的元素上指定。它们必须仅仅在拥有 itemscope 属性的元素上指定，它的 itemtype 属性指定了不支持全局标识符的词汇，根据该词汇规范的定义。
* 全局标识符的准确含义，由词汇的规范决定。它留给这种规范，来定义全局标识符相同的多个条目（位于相同页面或不同页面）是否允许存在，以及对于处理 ID 相同的多个条目，使用什么处理规则。
### 简单示例

#### HTML

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME</span>
  <span itemprop="name">Executive Anvil</span>
</div>
```

#### 结构化数据

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | schema.org Product |
| itemprop | name | Executive Anvil |
| itemprop | brand [Thing] |
| itemprop | name | ACME |

示例
--

### HTML

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME<br></span>
  <span itemprop="name">Executive Anvil<br></span>
  <img itemprop="image" src="https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605\_960\_720.png" width="50" height="50" alt="Executive Anvil logo" /><br>

<span itemprop="description">Sleeker than ACME's Classic Anvil, the
    Executive Anvil is perfect for the business traveler
    looking for something to drop from a height.
  <br>
</span>

  Product #: <span itemprop="mpn">925872<br></span>
  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    Rating: <span itemprop="ratingValue">4.4</span> stars, based on <span itemprop="reviewCount">89
      </span> reviews<p>
  </span>

<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Regular price: $179.99<br>
    <meta itemprop="priceCurrency" content="USD" />
    <span itemprop="price">Sale price: $119.99<br></span>
    (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05">
      5 November!</time>)<br>
    Available from: <span itemprop="seller" itemscope itemtype="http://schema.org/Organization">
                      <span itemprop="name">Executive Objects<br></span>
                    </span>
    Condition: <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>Previously owned,
      in excellent condition<br>
    <link itemprop="availability" href="http://schema.org/InStock"/>In stock! Order now!
</span>

  </span>

</div>
```

### 结果

#### 结构化数据

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | Product (http://schema.org/Product) |
| itemprop | name | Executive Anvil |
| itemprop | image | https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605\_960\_720.png |
| itemprop | description |
 Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for
 the business traveler looking for something to drop from a height.
  |
| itemprop | mpn | 925872 |
| itemprop | brand [Thing] |  |
| itemprop | name | ACME |
| itemscope | itemprop[itemtype] | aggregateRating[AggregateRating] |  |
| itemprop | ratingValue | 4.4 |
| itemprop | reviewCount | 89 |
| itemprop | offers [Offer] | http://schema.org/Offer |
| itemprop | priceCurrency | USD |
| itemprop | price | 119.99 |
| itemprop | priceValidUntil | 2020-11-05 |
| itemprop | itemCondition | http://schema.org/UsedCondition |
| itemprop | availability | http://schema.org/InStock |
| itemscope | itemprop[itemtype] | seller [Organization] | http://schema.org/Organization |
| itemprop | name | Executive Objects |

**备注：** 一个工具，用于从 HTML 提取 microdata 结构，是 Google 的 结构化数据测试工具。在上面展示的 HTML 上尝试吧。

规范
--

| Specification |
| --- |
| HTML Standard # attr-itemtype |

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

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

另见
--

* 其他不同的全局属性
* 其他 microdata 相关的全局属性
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`


hidden - HTML（超文本标记语言）

hidden
======

全局属性 `hidden` 是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。

`hidden`属性不能用于隐藏那些可以在其他板块中合理显示的内容。例如，用`hidden`属性去隐藏一个选项卡对话框种的面板是不正确的，因为选项卡界面只不过是溢出显示的一种——一个可以等量于一个只显示所有 form 表单控件的拥有滚动条的大页面。类似地，用 `hidden` 属性在某个特定板块中隐藏一部分内容也是不正确的，——如果某些内容被标记为隐藏，它将从所有版块中隐藏，包括例如屏幕阅读器。

隐藏元素不应与非隐藏元素链接，作为隐藏元素的后代的元素仍然是活动的，这意味着脚本元素仍然可以执行，表单元素仍然可以提交。

比如说，用 `href` 标签链接到一个带有 `hidden` 标签的区块是不对的。如果这个区块和这个页面不相干，或者这个区块不适用于这个页面，那没有任何理由需要链接到它。

不过，你还是可以使用 ARIA `aria-describedby` 标签去引用本身是隐藏的一些描述。

类似的，你也可以将一个带有 hidden 标签的 canvas 元素作为屏幕外的缓存区域，或者在表单控件中引用一个已经隐藏的表单。

**备注：** 改变具有 hidden 属性的元素的 CSS 的 `display` 属性将覆盖该行为。例如，元素被设置为 `display: flex` 将会导致元素显示出来，尽管设置了 hidden 属性

规范
--

| Specification |
| --- |
| HTML Standard # the-hidden-attribute |

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

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

另见
--

* 所有全局属性。
* aria-hidden属性


is - HTML（超文本标记语言）

is
==

**`is`** 全局属性允许你指定标准 HTML 元素像定义的内置元素一样工作（请参阅使用自定义元素以获取更多详细信息）。

只有在当前文档中已成功定义 ( defined ) 指定的自定义元素名称并且扩展了要应用的元素类型时，才能使用此属性。

示例
--

以下代码来自我们的 word-count-web-component 示例（see it live also）。

```js
// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Constructor contents ommitted for brevity
    ...

  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });
```

```html
<p is="word-count"></p>
```

规范
--

| Specification |
| --- |
| HTML Standard # attr-is |

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

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

参见
--

* All global attributes.


title - HTML（超文本标记语言）

title
=====

全局属性 **`title`** 包含代表与它所属的元素有关的咨询信息的文本。

尝试一下
----

`title` 属性的主要用途是为辅助技术标注 `<iframe>` 元素。

`title` 属性也可以用来标注数据表格中的控件。

当 `title` 属性被添加到 `<link rel="styleheet">` 时，将创建一个替代的样式表。当用 `<link rel="alternate">` 定义一个备用样式表时，该属性是必需的，并且必须设置为一个非空字符串。

如果包含在 `<abbr>` 起始标签上，`title` 必须是缩写或首字母的完整扩展。尽可能不要使用 `title`，而是在第一次使用时以纯文本提供缩写或缩略语的扩展，使用 `<abbr>` 来标记缩写。这使所有的用户知道这个缩写或简称是什么名字或术语，同时为用户代理提供一个提示，告诉它们如何宣告这个内容。

虽然 `title` 可以用来为 `<input>` 元素提供一个编程关联的标签，但这并不是好的做法。请使用 `<label>` 代替。

多行标题
----

`title` 属性可以包含多行。每个 `U+000A LINE FEED`（`LF`）符号代表一个换行。有一些需要注意的东西，因为这意味着下面的渲染要跨越两行：

### HTML

```html
<p>
  需要考虑 <code>title</code> 中的换行，像
  <span
 title="这是
多行标题"
 >这个示例</span
 >。
</p>
```

### 结果

Title 属性继承
----------

如果一个元素没有 `title` 属性，那么它就从它的父节点继承，而父节点又可以从它的父节点继承，以此类推。

如果这个属性被设置为空字符串，这意味着它的祖先的 `title` 是不相关的，不应该被用于这个元素的工具提示（tooltip）中。

### HTML

```html
<div title="CoolTip">
  <p>鼠标在这里停留会显示“CoolTip”。</p>
  <p title="">鼠标在这里停留不会显示任何东西。</p>
</div>
```

### 结果

无障碍考虑
-----

在以下情况下使用 `title` 属性会引发问题：

* 使用触摸屏设备的人员
* 使用键盘导航的人员
* 使用屏幕阅读器或放大镜等辅助技术导航的人员
* 出现精细运动控制障碍的人员
* 有认知问题的人员

这是由于浏览器的支持不一致，再加上对浏览器渲染的页面进行了额外的辅助技术解析。如果需要工具提示效果，最好是使用可以用上述浏览方法访问的更方便的技术。

* 3.2.5.1. title 属性 | W3C HTML 5.2: 3. HTML 文档的语义、结构和 API
* 使用 HTML title 属性——更新版 | The Paciello Group
* Tooltips & Toggletips - Inclusive Components
* title 属性的考验与磨难 - 24 Accessibility
规范
--

| Specification |
| --- |
| HTML Standard # the-title-attribute |

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

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

参见
--

* 所有全局属性。
* 反映这个属性的 `HTMLElement.title`。


autocapitalize - HTML（超文本标记语言）

autocapitalize
==============

The **`autocapitalize`** 全局属性 是一个枚举属性，它控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。属性必须取下列值之一：

* `off` or `none`: 没有应用自动大写（所有字母都默认为小写字母）。
* `on` or `sentences`: 每个**句子**的第一个字母默认为大写字母；所有其他字母都默认为小写字母。
* `words`: 每个**单词**的第一个字母默认为大写字母；所有其他字母都默认为小写字母。
* `characters`: 所有的**字母**都默认为大写。

在物理键盘上输入时，`autocapitalize` 属性不会影响行为。相反，它会影响其他输入机制的行为，比如移动设备的虚拟键盘和语音输入。这种机制的行为是，它们经常通过自动地将第一个句子的字母大写来帮助用户。`autocapitalize` 属性使作者能够覆盖每个元素的行为。

`autocapitalize` 属性永远不会为带有 `type` 属性，其值为 `url`、`email` 或 `password` 的 `<input>` 元素启用自动大写。

规范
--

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

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

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


translate - HTML（超文本标记语言）

translate
=========

全局属性 **translate** 是一种枚举 (en-US)属性，用来规定对应元素的*可翻译属性*值及其 `Text` (en-US) 子节点内容是否跟随系统语言作出对应的翻译变化。

该属性可以有以下值：

* 空字符串或 `yes`，意味着网页在进行本地化的时候，对应内容要被翻译。
* `no`，意味着对应的内容无需做任何翻译。

虽然不是所有的浏览器都能识别这个属性，但谷歌翻译等自动翻译系统会遵守这个属性，人类翻译者使用的工具也会遵守这个属性。因此，web 作者使用这个属性来标记不应该被翻译的内容是很重要的。

示例
--

在这个示例中，`translate` 属性令翻译工具不要翻译页脚的公司品牌名称。

```html
<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>
```

规范
--

| Specification |
| --- |
| HTML Standard # attr-translate |

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

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

参见
--

* 所有全局属性。
* 反映该属性的 `HTMLElement.translate` (en-US) 属性。
* 使用 HTML 的 translate 属性。
* HTML `lang` 属性


nonce - HTML（超文本标记语言）

nonce
=====

**`nonce`** 全局属性是定义了密码学 nonce（“只使用一次的数字”）的内容属性，内容安全策略可以使用它来确定是否允许对给定元素进行获取。

描述
--

`nonce` 属性可用于允许对特定资源的获取，如内联脚本或样式元素。它可以帮助你避免使用 CSP `unsafe-inline` 指令，该指令会允许你获取*所有*的内联脚本或样式资源。

**备注：** 只有在无法使用不安全的内联脚本或样式内容时，才使用 `nonce`。如果不需要 `nonce`，就不要使用。如果脚本是静态的，也可以使用 CSP 哈希值来代替。（请参阅不安全内联脚本 (en-US)中的使用说明）。始终尽量充分利用 CSP 保护，并尽可能避免使用 nonce 或不安全的内联脚本。

### 使用 nonce 以允许一个 <script> 元素

使用 nonce 机制允许内联脚本需要几个步骤：

#### 生成所需值

从你的 web 服务器上，使用一个密码学安全的随机数生成器生成至少 128 位的 base64 编码的随机字符串。每次加载页面时，应该以不同的方式生成 nonce（nonce 只能生成一次！）。例如，在 nodejs 中，应该这样做：

```js
const crypto = require("crypto");
crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='
```

#### 在内联脚本中允许获取资源

后端代码生成的 nonce 现在应该可用于你希望允许使用的内联脚本：

```html
<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
 // …
</script>
```

#### 发送带有 CSP 标头的 nonce

最后，你需要在 `Content-Security-Policy` 标头中发送 nonce 值（需要在此值前面附加 `nonce-`）：

```http
Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='
```

### 访问 nonce 值和 nonce 隐藏

出于安全考虑，`nonce` 内容属性是隐藏的（将返回空字符串）。

```js
script.getAttribute("nonce"); // 返回空字符串
```

`nonce` 属性是访问 nonce 的唯一方法：

```js
script.nonce; // 返回 nonce 值
```

Nonce 隐藏有助于防止攻击者通过能从内容属性中抓取数据的机制泄露 nonce 数据，比如这样：

```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

规范
--

| Specification |
| --- |
| HTML Standard # attr-nonce |

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

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

参见
--

* `HTMLElement.nonce`
* 内容安全策略
* CSP：`script-src` (en-US)


accesskey - HTML（超文本标记语言）

accesskey
=========

**accesskey** 全局属性 提供了为当前元素生成快捷键的方式。属性值必须包含一个可打印字符。

尝试一下
----

**备注：** 在 WHATWG 规范中，它说你可以指定多个空格分隔的字符，浏览器将使用它所支持的第一个字符。然而，这在大多数浏览器中是行不通的。在 IE/Edge 中，它将使用它支持的第一个没有问题的，只要没有与其他命令冲突。

激活 accesskey 的操作取决于浏览器及其平台。

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*key*` |
 On Firefox 57 or newer, `Control` + `Option` +
 `*key*` -OR- `Control` + `Alt` +
 `*key*`On Firefox 14 or newer, `Control` + `Alt` +
 `*key*`On Firefox 13 or older, `Control` +
 `*key*` |
| Internet Explorer | `Alt` + `*key*` | N/A |
| Google Chrome | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Safari | `Alt` + `*key*` | N/A | `Control` + `Alt` + `*key*` |
| Opera 15+ | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Opera 12 |
`Shift` + `Esc` opens a contents list which are
 accessible by accesskey, then, can choose an item by pressing
 `*key*`
 |

要注意 Firefox 可以通过用户偏好，自定义所需的修饰键。

无障碍
---

除了糟糕的浏览器支持之外， `accesskey`属性还有很多问题：

* `accesskey` 值可能与系统或浏览器键盘快捷键或辅助技术功能相冲突。对于一个操作系统来说，辅助技术和浏览器组合可能无法与其他操作系统协同工作。
* 某些 `accesskey` 值可能不会出现在某些键盘上，特别是在国际化是一个问题的时候。
* 依赖于数字的 `accesskey` 值可能会让那些经历认知问题的人感到困惑，因为他们的数字与它触发的功能没有逻辑关联。
* 通知用户`accesskey`s 存在，这样他们就能意识到该功能。如果没有公开这些信息的方法，`accesskey`s 可能会被意外激活。

由于这些问题，一般建议不要在大多数通用的网站和 web 应用程序中使用`accesskey` 属性。

* WebAIM: Keyboard Accessibility - Accesskey
规范
--

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |

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

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

参见
--

* `Element.accessKey`
* `HTMLElement.accessKeyLabel`
* 所有 全局属性


contextmenu - HTML（超文本标记语言）

contextmenu
===========

**警告：** contextmenu 属性已经过时，将从所有浏览器中删除。

**`contextmenu`** 全局属性是指用于某个元素的“上下文菜单”的`<menu>`的ID属性。上下文菜单是指在用户交互（例如右键点击）时出现的菜单。HTML5 允许我们自定义此菜单。这里有一些实现示例，包括嵌套菜单。

示例
--

### HTML

```html
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Anywhere in the example you can share the page on Twitter and Facebook
      using the Share menu from your context menu.
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      On this specific list element, you can change the size of the text by
      using the "Increase/Decrease font" actions from your context menu
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      On the image below, you can fire the "Change Image" action in your Context
      Menu.<br />
      <img
 src="https://developer.mozilla.org/media/img/promote/promobutton\_mdn5.png"
 contextmenu="ChangeImage"
 id="promoButton" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>
```

### JavaScript

```js
function shareViaTwitter() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla",
  );
}

function shareViaFacebook() {
  window.open(
    "https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using\_HTML\_context\_menus",
  );
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  var index = Math.ceil(Math.random() \* 39 + 1);
  document.images[0].src =
    "https://developer.mozilla.org/media/img/promote/promobutton\_mdn" +
    index +
    ".png";
}
```

### 结果

规范
--

contextmenu 属性已经过时，将从所有浏览器中删除。

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

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

参见
--

* All global attributes


part - HTML（超文本标记语言）

part
====

**part** 全局属性 包含一个以元素中 part 属性名称组成的列表，该列表以空格分隔。通过 Part 的名称，可以使用 CSS 伪元素“::part”来选择 shadow 树中指定元素并设置其样式。

参见用例 Shadow part 实例.

规范
--

| Specification |
| --- |
| CSS Shadow Parts # part-attr |

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

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

相关链接
----

* 所有 全局属性。


class - HTML（超文本标记语言）

class
=====

全局属性 **class** 的值是一个以空格分隔的元素的类名（classes）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或 DOM 方法 ( `document.getElementsByClassName`) 来选择和访问特定的元素。

尝试一下
----

尽管对 class 的命名没有要求，但 web 开发者最好使用可以表达元素语义目的的名称，而不是描述元素展现的名称（即使一个元素是斜体，但是 class 的命名也不应该是 italics）。**语义化**命名即使在页面展现发生改变时仍能合乎逻辑。

规范
--

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

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

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

另见
--

* 所有全局属性。


style - HTML（超文本标记语言）

style
=====

**style** 全局属性 包含应用到元素的 CSS 样式声明。要注意样式最好定义在单独的文件中。这个属性以及 `<style>` 元素的主要目的是快速装饰。例如用于测试目的。

**备注：** 这个属性不能用于传递语义信息。即使所有样式都移除了，页面也应该保留正确语义。通常它不应用于隐藏不相关的信息；这应该使用 **hidden** 属性来实现。

规范
--

| Specification |
| --- |
| HTML Standard # the-style-attribute |

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

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

另见
--

* 所有全局属性


autofocus - HTML（超文本标记语言）

autofocus
=========

全局属性 **`autofocus`** 是一个布尔属性，表示元素应在页面加载时或其所属的 `<dialog>` 显示时被聚焦。

```html
<input name="q" autofocus />
```

在文档或对话框中，最多只能有一个元素具有 autofocus 属性。如果应用于多个元素，第一个元素将获得焦点。

**备注：** `autofocus` 属性适用于所有元素，而不仅仅是表单控件。例如，它可用于 contenteditable 区域。

无障碍考虑
-----

自动聚焦表单控件会让使用屏幕阅读技术的视障人士和有认知障碍的人士感到困惑。当指定 `autofocus` 时，屏幕阅读器会将用户“传送”到表单控件上，而不会事先向他们发出警告。

在应用 `autofocus` 属性时，请仔细考虑无障碍性。自动聚焦于控件会导致页面在加载时滚动。在某些触摸设备上，焦点还会导致动态键盘的显示。虽然屏幕阅读器会公布收到焦点的表单控件的标签，但屏幕阅读器不会公布标签之前的任何内容，而使用小型设备的视力正常的用户同样会错过前面内容所创建的上下文。

规范
--

| Specification |
| --- |
| HTML Standard # dom-fe-autofocus |

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

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


slot - HTML（超文本标记语言）

slot
====

**`slot`** 全局属性 将一个 shadow DOM shadow 树中的槽分配给一个元素：带有 `slot` 属性的元素分配给由 `<slot>` 创建的槽，它的 `name` 属性的值匹配 `slot` 属性的值。

规范
--

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

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

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

参见
--

* HTML 全局属性
* HTML `<slot>` 元素
* HTML `<template>` 元素
* CSS `::slotted` 伪元素
* CSS 域 (en-US)模块
* Web 组件


data-* - HTML（超文本标记语言）

data-\*
=======

**data-\*** 全局属性 是一类被称为**自定义数据属性**的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

尝试一下
----

所有这些自定义数据属性都可以通过所属元素的 `HTMLElement` 接口来访问。 `HTMLElement.dataset` 属性可以访问它们。 `*` 可以使用遵循 xml 名称生产规则 的任何名称来被替换，并具有以下限制：

* 该名称不能以`xml`开头，无论这些字母是大写还是小写；
* 该名称不能包含任何分号 (`U+003A`)；
* 该名称不能包含 A 至 Z 的大写字母。

注意，`HTMLElement.dataset` 属性是一个`DOMStringMap`，并且自定义数据属性 *data-test-value* 可以通过 `HTMLElement.dataset.testValue` ( 或者是 `HTMLElement.dataset["testValue"]`) 来访问，任何破折号 (`U+002D`) 都会被下个字母的大写替代 (驼峰拼写)。

### 用法

通过添加 **data-\*** 属性，即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象。例如，在游戏里的太空船 "sprite" 可以是一个带有一个 class 属性和几个 data-\* 属性的简单 `<img>` 元素：
```

<img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()">
</img>
```

有关使用 HTML 数据属性的更深入的教程，请参阅使用数据属性。

规范
--

| Specification |
| --- |
| HTML Standard # attr-data-\* |

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

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

相关链接

* 所有的全局属性
* `HTMLElement.dataset` 属性允许访问和修改这些值
* 使用数据属性


itemprop - HTML（超文本标记语言）

itemprop
========

全局属性 \*\*`itemprop`\*\*被用于向一个物体中添加属性。每一个 HTML 元素都可以指定一个 itemprop 属性，一个`itemprop`属性由 name-value 对组成。每一个键值对称为一个属性，一个元素可以有一个或者多个属性。属性值可以是一个 string 或者一个 URL，并且可以和大部分元素进行组合，包括`<audio>`， `<embed>`， `<iframe>`， `<img>`， `<link>`， `<object>`， `<source>` ， `<track>`，和 `<video>`。

样例
--

下面的样例展示了一组带有`itemprop`属性的源代码，后面的表格展示了产生的结构化数据。

### HTML

```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span
 >Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span
 >
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"
 >Trailer</a
 >
</div>
```

### Structured data

|  |  |
| --- | --- |
|  | Item |
| **itemprop name** | **itemprop value** |
| itemprop | name | Avatar |
| itemprop | director | James Cameron |
| itemprop | genre | Science fiction |
| itemprop | trailer | ../movies/avatar-theatrical-trailer.html |

属性
--

属性拥有的值可能是字符串又或者是 URL。当一个字符串值是一个 URL 的时候，它被用 `<a>` 及它的属性值 `href`、`<img>` 及它的属性值 `src` 或者其他被链接到或嵌入外部的资源的元素来表述。

### Three properties with values that are strings

```html
<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>
```

### One property, "image", whose value is a URL

```html
<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>
```

当一个字符串值不能令人通俗易懂的时候（e.g.，一个长串的数字和字母），它能被用 data 元素的 value 属性表示，用所给元素内容的更易懂的版本（它不是结构化数据的一部分 - 请看下面的例子）。

### An item with a property whose value is a product ID

ID 不是人性化的，所以产品的名字是用的人所能看懂的文字而不是 ID。

```html
<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>
```

对于数字数据，meter 元素及它的 value 属性值能够被用来表述。

### A meter element

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>
```

与此相类似的，对于日期时间相关的数据，time 元素和他的 datetime 属性值能够被使用表示。

### An item with one property, "birthday", whose value is a date

```html
<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
</div>
```

通过把元素上的 itemscope 属性中声明属性，属性也可以是一个组 name-values 对。每个值既可以是一个字符串又可以是一组 name-values 对（i.e. 一个项）。

### An outer item representing a person, and an inner one representing a band

```html
<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)</span
 >
  </p>
</div>
```

上面的外层项有两个属性，“name”和“band”。“name”的值是“Amanda”, “band”的值是一个在它右侧的项决定的，它有两个属性，“name”和“size”。乐队的“name”的值是“Jazz Band”，“size”的值是“12”。这个例子的外层项是顶级微数据标签。不是其他项的项被称为顶级微数据项。

### All the properties separated from their items

这个样例和之前一个一摸一样，但是所有的属性都被从它们的项中分离了出来。

```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

这产生了和之前样例相同的结果。第一个项有两个属性，“name“，设置为“Amanda”和“band”，设置到另一个项去了。第二个项有两个更进一步的属性，“name”设置为“Jazz Band”并且“size”设置为“12”。

一个项可以有多个拥有相同名字但是值不同的属性。

### Ice cream with two flavors

```html
<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>
```

这产生了一个物体有两个属性，都拥有名字 "flavor" 但是却有不同的值 "Lemon sorbet" 和 "Apricot sorbet"。

为了当一些属性有相同值的时候避免重复，一个介绍一个属性的元素同样可以一次性介绍多个属性。

### An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"

```html
<div itemscope>
  <span
 itemprop="favorite-color
 favorite-fruit"
 >orange</span
 >
</div>
```

**备注：** 微数据和被标记微数据的文档的内容之间是没有关系的。

### Same structured data marked up in two different ways

语义上下面的两个样例没有任何区别。

```html
<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>
```

```html
<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>
```

两者都是拥有标题的图，并且都同时，和图完全无关地，有一个 名字是 "name" 并且值是"The Castle"的键值对的物体项。唯一的区别是如果用户把图片标题拖拽出文档的话，这个项会包含在拖拽的数据中。图像相关的项不会被包括。

名字和值
----

一个属性是一个大小写敏感且展示键值对的包含唯一序列的无序集合。属性的值必须有至少一个序列。下面的这个样例中，每个数据格子都是一个序列。

### Names examples

|  | Item |
| --- | --- |
| itemprop **name** | itemprop **value** |
| itemprop | country | Ireland |
| itemprop | Option | 2 |
| itemprop | https://www.flickr.com/photos/nlireland/6992065114/ | Ring of Kerry |
| itemprop | img | https://www.flickr.com/photos/nlireland/6992065114/ |
| itemprop | website | flickr |
| itemprop | (token) | (token) |

**序列**既可以是字符串也可以是 URL。如果是一个 URL，那么这个项被称为**类型项**。否则它是一个字符串。字符串不能包括句号和冒号（如下）。

1. 如果项是一个类型项它必须满足：
    1. 是一个被定义的属性名
    2. 一个合法的指向语法定义的 URL
    3. 一个合法的被用来当作所有权项属性名的 URL
2. 如果一个项不是类型项，他必须：
    1. 一个不含 "**.**" (U+002E 句号) 和 "**:**" (U+003A 冒号) 并且被用作一个所有权项的属性名（没有公共规范定义的）

**注意：** 上面的规则不允许 ":" 在没有 URL 的值中 是因为否则它们没法和 URL 作区分。带有"." 的值被保留作为将来可能的拓展。空格也不被允许是因为否则值就会被解析为多个序列。

值
-

The property value of a name-value pair is as given for the first matching case in the following list:

* If the element has an **itemscope** attribute
    + The value is the **item** created by the element.
* If the element is a **meta** element
    + The value is the value of the element's **content** attribute
* If the element is an **audio**, **embed**, **iframe**, **img**, **source**, **track**, or **video** element
    + The value is the resulting URL string that results from parsing the value of the element's src attribute relative to the node document (part of the Microdata DOM API (en-US)) of the element at the time the attribute is set
* If the element is an **a**, **area**, or **link** element
    + The value is the resulting URL string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set
* If the element is an **object** element
    + The value is the resulting URL string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set
* If the element is a **data** element
    + The value is the value of the element's value attribute
* If the element is a **meter** element
    + The value is the value of the element's **value** attribute
* If the element is a **time** element
    + The value is the element's **datetime** value

Otherwise

* The value is the element's **textContent**.

If a property's value is a **URL**, the property must be specified using a URL property element. The URL property elements are the **a**, **area**, **audio**, **embed**, **iframe**, **img**, **link**, **object**, **source**, **track**, and **video** elements.

### Name order

Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.

#### In the following example, the "a" property has the values "1" and "2", *in that order*, but whether the "a" property comes before the "b" property or not is not important

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>
```

#### The following is equivalent

```html
<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>
```

#### As is the following

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

#### And the following

```html
<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

其他样例
----

### HTML

```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### Structured data

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

### Result

规范
--

| Specification |
| --- |
| HTML Standard # names:-the-itemprop-attribute |

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

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

查看其他
----

* 其他不同的全局属性
* 其他，微数据相关的全局属性：
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`


itemref - HTML（超文本标记语言）

itemref
=======

**`itemref`** 全局属性 不具有 `itemscope` 属性的元素的后代，才可以与具有 **`itemref`** 的元素关联。`itemref` 提供了元素 id（并不是 `itemid`）的列表，并具有文档其他地方的额外属性。

`itemref` 属性只能在指定了 `itemscope` 的元素上指定。

**注：**`itemref` 属性并不是 microdata 数据模型的一部分。它仅仅是个语义结构，用于帮助作者向页面添加注解，其中被注解的数据不遵循便利的树结构。例如，它允许作者标记表格中的数据，以便每一列定义一个单独的条目，同时在表格中保留属性。

示例
--

### HTML

```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

### 结构化数据

| id's | itemscope | itemref |  | (itemprop name) | (itemprop value) |
| --- | --- | --- | --- | --- | --- |
| id=amanda | itemscope | itemref=a,b |  |  |  |
| id=a |  |  | itemprop | name | Amanda |
| id=b | itemscope | itemref=c |  | band |  |
| id=c |  |  | itemprop | Band | Jazz Band |
|  |  | itemprop | Size | 12 |

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # attr-itemref |

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

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

参阅
--

* 其他不同的全局属性
* 其他 microdata 相关的全局属性
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`


draggable - HTML（超文本标记语言）

draggable
=========

全局属性 **draggable** 是一种枚举 (en-US)属性，用于标识元素是否允许使用浏览器原生行为或 HTML 拖放操作 API 拖动。

`draggable` 属性可以应用于严格属于 HTML 命名空间 (en-US)的元素，这意味着它不能应用于 SVG。关于命名空间声明的简介和作用的更多信息，请参阅命名空间速成课。

`draggable` 可以有如下取值：

* `true`：表示元素可以被拖动
* `false`：表示元素不可以被拖动

如果该属性没有设值，则默认值 为 auto，表示使用浏览器定义的默认行为。

**警告：** 这个属性是*枚举类型* (en-US)，而不是*布尔类型*。这意味着必须显式指定值为 `true` 或者 `false`，像 `<img draggable>` 这样的简写是不允许的。正确的用法是 `<img draggable="false">`。

如果没有设置该属性，其默认值为 `auto`，这意味着拖动行为是浏览器的默认行为：只有选择的文本、图像和链接可以被拖动。对于其他元素，必须设置事件 `ondragstart` 以使拖放行为生效，如本综合实例所示。

规范
--

| Specification |
| --- |
| HTML Standard # the-draggable-attribute |

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

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

参考资料
----

* 所有全局属性。


virtualkeyboardpolicy - HTML（超文本标记语言）

virtualkeyboardpolicy
=====================

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`virtualkeyboardpolicy`** 全局属性是一个枚举属性。当在一个元素上指定了该属性，且也同时使用了 `contenteditable` 属性时，它会控制在平板电脑、手机或其他设备上的虚拟键盘的行为，这些设备上可能没有硬件键盘。

该属性必须设置以下值之一：

* `auto` 或*空字符串*：在元素被聚焦或被点击时会自动显示虚拟键盘。
* `manual`：它会将元素的聚焦和点击与虚拟键盘的状态分离。
规范
--

| Specification |
| --- |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

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

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

参见
--

* 所有的全局属性
* `HTMLElement.contentEditable` 和 `HTMLElement.isContentEditable`
* 虚拟键盘 API (en-US)


tabindex - HTML（超文本标记语言）

tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
**tabindex** 全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用`Tab`键，因此得名）。

尝试一下
----

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

* tabindex=负值 (通常是 tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用 JS 做页面小组件内部键盘导航的时候非常有用。
* `tabindex="0"` ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的。
* tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照**tabindex** 的数值递增而滞后获焦。如果多个元素拥有相同的 **tabindex**，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。

根据键盘序列导航的顺序，值为 `0` 、非法值、或者没有 **tabindex** 值的元素应该放置在 **tabindex** 值为正值的元素后面。

如果我们在 `<div>` 上设置了 `tabindex` 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 `tabindex`。查看这篇 fiddle 来理解 tabindex 的滚动影响。

**备注：** tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。

规范
--

| Specification |
| --- |
| HTML Standard # attr-tabindex |

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

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

另见
--

* 所有全局属性
* 反映这个属性的 `HTMLElement.tabIndex` (en-US)
* tabindex 的无障碍问题：请见 不要使用大于 0 的 Tabindex | Adrian Roselli。


popover - HTML（超文本标记语言）

popover
=======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
全局属性 **`popover`** 用来指定一个元素为弹出式元素（popover element）。

弹出式元素通过 `display: none` 被隐藏，直到通过调用/控制元素（即带有 `popovertarget` 属性的 `<button>` 或 `<input type="button">`）或 `HTMLElement.showPopover()` (en-US) 调用打开。

当打开时，弹出式元素将出现在所有其他元素之上，即在顶层 (en-US)上，并且不会受到父元素的 `position` 或 `overflow` 样式的影响。

`popover` 属性可以有 `"auto"` (en-US)（默认）或 `"manual"` (en-US) 的取值。具有 `auto` 状态的弹窗可以通过在弹窗之外的区域进行选择，以达到“轻触关闭”的目的，并且通常一次仅允许屏幕上显示一个弹窗。相比之下，`manual` 弹窗必须始终明确隐藏，但可以用于菜单中嵌套弹窗等使用情况。

有关更详细的使用信息，请参阅 Popover API (en-US) 页面。

示例
--

下述代码将呈现一个按钮，它将打开一个弹出式元素。

```html
<button popovertarget="my-popover">打开 Popover</button>

<div popover id="my-popover">大家好！欢迎你们！</div>
```

**备注：** 请参阅我们的 Popover API 示例页面以访问所有的 MDN popover 示例。

规范
--

| Specification |
| --- |
| HTML Standard # the-popover-attribute |

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

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

参见
--

* Popover API (en-US)


id - HTML（超文本标记语言）

id
==

**`id`** 全局属性定义了一个全文档唯一的标识符（ID）。它用于在链接（使用片段）、脚本和样式（通过 CSS）中辨识元素。

尝试一下
----

**警告：** 该属性的值是一个不透明（opaque）字符串，这意味着网页开发者不能使用它来传递人类可读的信息。然而，具有一定可读性的 ID（如使用 `ticket-18659` 而不是 `r45tgfe-freds&$@`）可以有助于理解代码。

`id` 的值不得包含空格和制表符等空白字符。浏览器会将不符合规范的 ID 中的空白字符视为 ID 的一部分。与允许以空格分隔值的 `class` 属性不同，元素只能拥有一个 ID 值。

**备注：** 从技术上讲，`id` 属性的值可以包含除了空白字符的任何字符。然而，为了避免无意中的错误，只能使用 ASCII 字母、数字、`'_'` 和 `'-'`，并且`id` 属性的值应该以字母开头。例如，`.` 在 CSS 中具有特殊的意义（它作为一个类选择器）。除非你注意在 CSS 中转义它，否则它不会被识别为 `id` 属性值的一部分。很容易忘记这样做，导致你的代码中出现难以检测的错误。

规范
--

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

参见
--

* 所有的全局属性。
* 反映该属性的 `Element.id`。
* `Document.getElementById` 方法。
* CSS ID 选择器。


contenteditable - HTML（超文本标记语言）

contenteditable
===============

全局属性 **`contenteditable`** 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

尝试一下
----

该属性必须是下面的值之一：

* `true` 或*空字符串*，表示元素是可编辑的。
* `false` 表示元素不是可编辑的。
* `plaintext-only` 表示元素的原始文本是可编辑的，但富文本格式会被禁用。

如果没有设置该属性的值（例如：`<label contenteditable>Example Label</label>`），则其值被视为空字符串。

如果没给出该属性或设置了无效的属性值，则其默认值*继承*自父元素：即，如果父元素可编辑，该子元素也可编辑。

注意，虽然该属性允许设定的值包括 `true` 和 `false`，但该属性仍是一个*枚举* (en-US)属性而非*布尔*属性。

你可以使用 CSS `caret-color` 属性设置用于绘制文本插入 caret (en-US) 的颜色。

规范
--

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

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

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

参见
--

* 所有的全局属性
* `HTMLElement.contentEditable` 和 `HTMLElement.isContentEditable`
* CSS `caret-color` 属性
* Element `input` 事件


itemscope - HTML（超文本标记语言）

itemscope
=========

**`itemscope`** 是一个布尔值的 全局属性 。它定义了一个与元数据关联的数据项。就是说一个元素的 **`itemscope`** 属性会创建一个项，包含了一组与元素相关的键值对。相关的属性 `itemtype` 通常表示表中一个有效的 URL（比如 schema.org）来表述项目和上下文。下面每个例子中的概念表都来自 schema.org.

每个 HTML 元素都可以有指定的 `itemscope` 属性。一个具有 `itemscope` 属性的元素可以没有关联的 `itemtype` ，但必须有相关的 `itemref`。

**备注：** Schema.org 提供了一份共享的词汇表，站长可以使用它来标记网页，而这些标记则被主要的搜索引擎：Google，Microsoft，Yandex 和 Yahoo！所支持。

**备注：** 获取更多关于 `itemtype` 属性的信息： http://schema.org/Thing

### 简单示例

#### HTML

下面一个例子指定的 `itemscope` 属性，设置了 `itemtype` 为 "http://schema.org/Movie"，并且有 3 个关联的 `itemprop` 属性（name、director、genre）。

```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span
 >Director: <span itemprop="director">James Cameron</span> (born August 16,
    1954)</span
 >
  <span itemprop="genre">Science fiction</span>
  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>
```

#### 结构化数据

下表展示了上面例子当中的结构化数据。

|  |  |  |
| --- | --- | --- |
| itemscope | Itemtype | Movie |
| itemprop | (itemprop name) | (itemprop value) |
| itemprop | director | James Cameron |
| itemprop | genre | Science Fiction |
| itemprop | name | Avatar |
| itemprop | https://youtu.be/0AY1XIkX7bY | Trailer |

### `itemscope` id 属性

当你表述一个元素的 `itemscope` 属性时，就创建了一个新的数据项。数据项包含了一组键值对。如果一个元素包含了 `itemscope` 和 `itemtype` 属性，你同时也就阐述了一个 `id` 属性。你可以用 `id` 属性为数据项设置一个全局的身份识别。这样你就可以通过这个识别与页面中其他的数据进行交互。

### 示例

下面示例中有 4 个 `itemscope` 属性。每一个 `itemscope` 设置了相应的 `itemptype` 属性。例子中`itemtype`，`Recipe`，`AggregateRating`，以及 `NutritionInformation` 通过指定了 `itemptype`，也就是 `http://schema.org/Recipe`，也都是 schema.org 提供的一个食谱的结构化数据的一部分。

```html
<div itemscope itemtype="http://schema.org/Recipe">
<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg" width="50" height="50"/>
<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Carol Smith</p></span>
</span>
<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
November 5, 2009</p></time>
<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
 <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
 Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
 Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
 Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
 <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
 Serving size: <span itemprop="servingSize">1 medium slice<br></span>
 Calories per serving: <span itemprop="calories">250 cal<br></span>
 Fat per serving: <span itemprop="fatContent">12 g<br></span>
</span>
<p>Ingredients:<br>
  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
 ... </p>

Directions: <br>
  <div itemprop="recipeInstructions">
    1. Cut and peel apples<br>
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
    ...
  </div>
</div>
```

### 结果

#### HTML

下面例子是上述例子的补充：

#### 结构化数据

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | Recipe |
| itemprop | name | Grandma's Holiday Apple Pie |
| itemprop | image | https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg |
| itemprop | datePublished | 2009-11-05 |
| itemprop | description |
 This is my grandmother's apple pie recipe. I like to add a dash of
 nutmeg.
  |
| itemprop | prepTime | PT30M |
| itemprop | cookTime | PT1H |
| itemprop | totalTime | PT1H30M |
| itemprop | recipeYield | 1 9" pie (8 servings) |
| itemprop | recipeIngredient | Thinly-sliced apples: 6 cups |
| itemprop | recipeIngredient | White sugar: 3/4 cup |
| itemprop | recipeInstructions |
 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar
 for tart apples .
  |
| itemprop | author [Person] |
| itemprop | name | Carol Smith |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] |
| itemprop | ratingValue | 4.0 |
| itemprop | reviewCount | 35 |
| itemscope | itemprop[itemtype] | nutrition [NutritionInformation] |
| itemprop | servingSize | 1 medium slice |
| itemprop | calories | 250 cal |
| itemprop | fatContent | 12 g |

**备注：** Google 提供了一个方便地从 HTML 提取微数据结构的工具：Structured Data Testing Tool。你可以通过上面的 HTML 试一下。

规范
--

| Specification |
| --- |
| HTML Standard # attr-itemscope |

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

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

参阅
--

* 其他不同的全局属性
* 其他 microdata 相关的全局熟悉
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`


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

<header>
========

**HTML `<header>` 元素**用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

尝试一下
----

|  |  |
| --- | --- |
| 内容类型 (en-US) | Flow content (en-US)，palpable content。 |
| 许可内容 | Flow content (en-US)，但是不允许 `<header>` 或`<footer>` 成为子元素 |
| 标记省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受 flow content (en-US) 的元素。注意 `<header>` 元素不能作为 `<address>`、`<footer>` 或另一个 `<header>` 元素的子元素。 |
| 允许的 ARIA 角色 | `group` (en-US)，`presentation` (en-US) |
| DOM 接口 | `HTMLElement` |

使用提示
----

`<header>` 元素不是分段内容，因此不会往 大纲 中引入新的段落。也就是说，`<header>` 元素通常用于包含周围部分的标题（`h1` 至 `h6` 元素），但这**不是**必需的。

属性
--

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

示例
--

### 页面的 Header

```html
<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```

### 文章的 Header

```html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p>
    <a href="https://janesmith.com/the-planet-earth/">Continue reading....</a>
  </p>
</article>
```

规范
--

| Specification |
| --- |
| HTML Standard # the-header-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>`, `<address>`;
* Sections and outlines of an HTML5 document.


<head>：文档元数据（头部）元素 - HTML（超文本标记语言）

<head>：文档元数据（头部）元素
==================

HTML **`<head>`** 元素包含机器可读的文档相关信息（元数据），如文档的标题、脚本和样式表。

**备注：** `<head>` 主要保存供机器处理的信息，而非人类可读信息。对于人类可见的信息，如顶级标题和列出的作者，请参见 `<header>` 元素。

属性
--

该元素包含全局属性。

`profile`
已弃用

非标准

由空白字符分隔的一个或多个元数据配置文件的 URI。

示例
--

```html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>文档标题</title>
  </head>
</html>
```

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 如果文档是 `<iframe>` `srcdoc` 文档，或者标题信息可从更高级别的协议（如 HTML 电子邮件中的主题行）中获得，则允许包含零个或多个元数据内容元素。
否则，可包含一个或多个元数据内容元素，其中 `<title>` 元素恰好有一个。 |
| 标签省略 | 如果 `<head>` 元素内的第一个内容是一个元素，则可以省略开始标记。如果 `<head>` 元素后的第一个内容不是空格符或注释，则可以省略结束标记。 |
| 允许的父元素 | 一个 `<html>` 元素，作为它的第一个子元素。 |
| 隐式 ARIA 角色 | 没有相应的角色 |
| 允许的 ARIA 角色 | 没有允许的 `role` |
| DOM 接口 | `HTMLHeadElement` |

规范
--

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

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

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

参见
--

* 可用于 `<head>` 内部的元素：
    + `<title>`
    + `<base>`
    + `<link>`
    + `<style>`
    + `<meta>`
    + `<script>`
    + `<noscript>`
    + `<template>`


<datalist>：HTML 数据列表元素 - HTML（超文本标记语言）

<datalist>：HTML 数据列表元素
======================

HTML **`<datalist>`** 元素包含了一组 `<option>` 元素，这些元素表示其他表单控件可选值。

尝试一下
----

* *内容范畴 (en-US)*流内容 (en-US)，段落内容 (en-US)。
* *允许内容*要么 段落内容 (en-US) 要么 0 个或多个 `<option>`元素。
* *遗漏标签*不允许，开始标签和结束标签都不能省略。
* *允许父级元素*任何接受段落内容 (en-US)的元素。
* \_Permitted ARIA roles\_None
* *DOM 接口*`HTMLDataListElement` (en-US)
属性
--

该元素除了公用的全局属性之外，没有其他属性。

示例
--

```html
<label
 >Choose a browser from this list: <input list="browsers" name="myBrowser"
/></label>
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>
```

### 结果

规范
--

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

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

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

参见
--

* `<input>` 元素，它更特殊的 `list` 属性;
* `<option>`元素。


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

<rtc>
=====

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

**HTML `<rtc>` 元素**包含文字的语义注解，它们在 `<rb>` 元素中展示。`<rb>` 元素可以拥有发音 (`<rt>`) 和语义 (`<rtc>`) 注解。

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 短语内容 或者 `<rt>` 元素 |
| 标签省略 | 如果它紧紧跟随`<rb>`，`<rtc>` 或者 `<rt>` 元素的起始标签，或父元素的闭合标签，它的闭合标签就可以省略。 |
| 允许的父元素 | `<ruby>` 元素。 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

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

示例
--

```html
<ruby>
  <rb>旧</rb>
  <rb>金</rb>
  <rb>山</rb>
  <rt>jiù</rt>
  <rt>jīn</rt>
  <rt>shān</rt>
  <rtc>San Francisco</rtc>
</ruby>
```

规范
--

| Specification |
| --- |
| HTML Standard # rtc |

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

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

另见
--

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rt>`


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

<i>：术语文本元素
==========

概述
--

**HTML 元素 `<i>`** 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

* *Content catergories* Flow content, phrasing content, palpable content.
* *允许量* phrasing content.
* *标签忽略* 不允许，开始标签和结束标签都不能省略。
* *Permitted parent elements* Any element that accepts phrasing content.
* *DOM interface* `HTMLElement` Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the `HTMLSpanElement` interface for this element.
属性
--

该元素只包含 全局属性。

示例
--

```html
<p>
  The Latin phrase <i class="latin">Veni, vidi, vici</i> is often mentioned in
  music, art, and literature
</p>
```

### 效果

The Latin phrase *Veni, vidi, vici* is often mentioned in music, art, and literature

注释
--

在较早版本的 HTML 技术参数声明中，`<i>` 标签只是一个用于将文本显示为斜体的表示性元素，很像 `<b>` 标签被用来将文本显示为粗体。情况不再是这样了，因为这些标签现在定义了更多的语义而不只是排版外观。`<i>` 标签应表现一系列带有不同语义的文本，它的典型样式显示为斜体。这意味着浏览器通常任会将内容显示为斜体，但是，根据定义，不再是必须的。

该元素只在没有更适合的语义元素表示时使用。例如：

* 使用 `<em>` 表示强调或重读。
* 使用 `<strong>` 表示重要性。
* 使用 `<mark>` 表示相关性。
* 使用 `<cite>` 标记著作名，如一本书、剧本或是一首歌。
* 使用 `<dfn>` 标记术语的定义实例。

使用**class**属性用来识别为何使用该元素是一个很好的办法，这样的话，如果该表示以后需要改变，就可以有选择性地改变样式表。

规范
--

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

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

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


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

<ruby>
======

**HTML `<ruby>` 元素** 被用来展示东亚文字注音或字符注释。

|  |  |
| --- | --- |
| 内容范畴 | 流式内容, 短语内容, palpable content. |
| 允许内容 | 短语内容 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级元素 | See prose |
| DOM 接口 | `HTMLElement` |

属性
--

本元素支持 全局属性。

示例
--

### 示例 1: 字

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

### 示例 2: 词

```html
<ruby> 明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp> </ruby>
```

规范
--

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

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

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

参阅
--

* `<rt>`
* `<rp>`
* `<rb>`
* `<rtc>`
* `<rbc>`
* `text-transform`: full-size-kana


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

<label>
=======

**HTML `<label>` 元素**（标签）表示用户界面中某个元素的说明。

尝试一下
----

将一个 `<label>` 和一个 `<input>` 元素相关联主要有这些优点：

* 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
* 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 `<label>` 和一个 `<input>` 元素匹配在一起，你需要给 `<input>` 一个 `id` 属性。而 `<label>` 需要一个 `for` 属性，其值和 `<input>` 的 `id` 一样。

另外，你也可以将 `<input>` 直接放在 `<label>` 里，此时则不需要 `for` 和 `id` 属性，因为关联已隐含存在：

```html
<label
 >Do you like peas?
  <input type="checkbox" name="peas" />
</label>
```

其他使用事项：

* 关联标签的表单控件称为这个标签的*已关联标签的控件*。一个 input 可以与多个标签相关联。
* 点击或者轻触（tap）与表单控件相关联的 `<label>` 也可以触发关联控件的 `click` 事件。
属性
--

该元素包含 全局属性。

`for`

即和 `<label>` 元素在同一文档中的 可关联标签的元素 的 `id`。文档中第一个 `id` 值与 `<label>` 元素 `for` 属性值相同的元素，如果可关联标签（labelable），则为*已关联标签的控件*，其标签就是这个 `<label>` 元素。如果这个元素不可关联标签，则 `for` 属性没有效果。如果文档中还有其他元素的 `id` 值也和 `for` 属性相同，`for` 属性对这些元素也没有影响。

**备注：** `<label>` 元素可同时有一个 `for` 属性和一个子代控件元素，只是 `for` 属性需要指向这个控件元素。

`form`

表示与 label 元素关联的 `<form>` 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 `<form>` 元素的 `id`。因此你可以将 label 元素放在文档的任何位置，而不仅作为 `<form>` 元素的后代。

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

`<label>` 元素没有特别的样式考虑——结构上，`<label>` 是简单的行内元素，所以可使用和 `<span>` 或 `<a>` 元素大致相同的方式来应用样式。你也可以任意方式为 `<label>` 应用样式，只是不要让文本难以阅读。

示例
--

### 简单的 label

```html
<label>Click me <input type="text" /></label>
```

### 使用 for 属性

```html
<label for="username">Click me</label> <input type="text" id="username" />
```

无障碍问题
-----

### 交互内容

不要在 `label` 元素内部放置可交互的元素，比如 anchors 或 buttons。这样做会让用户更难激活/触发与 `label` 相关联的表单输入元素。

#### Don't

```html
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
```

#### Do

```html
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
```

### 标题

在一个 `<label>` 元素内部放置标题元素（heading elements）会干扰许多辅助技术，原因是标题通常被用于辅助导航（a navigation aid）。若标签内的文本需要做视觉上的调整，应该使用适用于 `<label>` 元素的 CSS 类。

若一个 表单，或表单中的一部分需要一个标题，应使用 `<legend>` 元素置于 `<fieldset>` 元素中。

#### Don't

```html
<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>
```

#### Do

```html
<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>
```

### 按钮

若 `<input>` 元素声明了 `type="button"` 和有效的 `value` 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。`<button>` 元素也一样。

技术概览
----

|  |  |
| --- | --- |
| Content categories | Flow content, phrasing content, interactive content, form-associated element, palpable content. |
| Permitted content | Phrasing content, but no descendant `label` elements. No labelable elements other than the labeled control are allowed. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLLabelElement` (en-US) |

规范
--

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

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

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

参见
--

其他表单相关的元素：

* `<form>`
* `<input>`
* `<button>`
* `<datalist>`
* `<legend>`
* `<select>`
* `<optgroup>`
* `<option>`
* `<textarea>`
* `<fieldset>`
* `<output>`
* `<progress>`
* `<meter>`


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

<sup>：上标元素
==========

HTML **`<sup>` 元素**定义仅出于排版目的而显示为上标的行内文本。上标通常以较小的文本在高出基线的位置呈现。

尝试一下
----

属性
--

该元素仅包含全局属性。

使用说明
----

`<sup>` 元素应该只用于排版目的，也就是改变文本的位置以符合印刷习惯或标准，而不能仅用于呈现或外观的目的。

例如，要为企业或产品的字体商标添加抬高基线的样式，应该使用 CSS（很可能是 `vertical-align`）而不是 `<sup>`。可以使用 `vertical-align: super` 或者 `vertical-align: 50%` 来将基线上移 50%。

适当的 `<sup>` 用例包括（但不限于）：

* 显示指数，例如“x3”。对于这种情况，尤其是在更复杂的情况下，考虑使用 MathML。请参阅下面的示例中的指数。
* 显示上标字母，在某些语言中用于呈现某些缩写词。例如，在法语中，单词“mademoiselle”可以缩写为“Mlle”；这是可接受的用例。请参阅示例上标字母。
* 表示序数，例如用“4th”来代替“fourth”。请参阅示例序数。
示例
--

### 指数

指数，或者说是数字的幂，是上标文本最常见的用法之一。例如：

```html
<p>
  物理学中最常见的方程之一：<var>E</var>=<var>m</var><var>c</var><sup>2</sup>。
</p>
```

#### 结果

### 上标字母

从技术上讲，上标字母与上标不是同一回事。但是，在 HTML 中使用 `<sup>` 来呈现上标字母是很常见的。一种最常见的上标字母用法是在法语中呈现某些缩写词：

```html
<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>
```

#### 结果

### 序数

序数，例如英语中的“fourth”或西班牙语中的“quinto”，可以使用数字和以上标形式呈现的特定于语言的文本缩写来表示：

```html
<p>序数词“fifth”在不同语言中的缩写如下：</p>
<ul>
  <li>英语：5<sup>th</sup></li>
  <li>法语：5<sup>ème</sup></li>
</ul>
```

#### 结果

技术概要
----

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

规范
--

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

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

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

参见
--

* HTML `<sub>` 元素会产生下标。注意，你不能同时使用它们，你需要使用 MathML 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。
* MathML 元素：`<msub>`、`<msup>` 和 `<msubsup>`。
* CSS `vertical-align` 属性。


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

<small>
=======

HTML 中的<small>元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容 (en-US)， 短语内容 (en-US) |
| 允许的内容 | 短语内容 (en-US) |
| 标签省略 | 无，必须拥有起始和结束标签 |
| 允许的父元素 | 接受短语内容 (en-US)或者流式内容 (en-US)的任何元素。 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

这个元素只有全局属性。

DOM 接口
------

这个元素实现 `HTMLElement`接口。

**备注：** 直到 Gecko 1.9.2，Firefox 为这个元素实现了 `HTMLSpanElement`接口。

例子
--

### 例子 1

```html
<p>
  This is the first sentence.
  <small>This whole sentence is in small letters.</small>
</p>
```

#### 结果

This is the first sentence. This whole sentence is in small letters.

### 例子 2 (CSS 替代)

```html
<p>
  This is the first sentence.
  <span style="font-size:0.8em">This whole sentence is in small letters.</span>
</p>
```

#### 结果

This is the first sentence. This whole sentence is in small letters.

规范
--

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

注意事项
----

尽管 <small> 元素，<b> 元素和 <i> 元素被认为违反了结构和样式分离的原则，但是在 HTML5 中是允许使用这三个元素的。读者应该自行判断使用 <small> 还是 CSS。

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

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

另请参考
----

* `<b>`
* `<font>`
* `<style>`
* HTML 4.01 规范： 字体样式


<bdo>: 双向文本替代元素 - HTML（超文本标记语言）

<bdo>: 双向文本替代元素
===============

HTML 双向文本替代元素 (**`<bdo>`**) 改写了文本的方向性，使文本以不同的方向渲染呈现出来 (override 可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了 Google 的整体翻译，取替代替换改写之意)

尝试一下
----

文本的字符是从给定方向的起始点绘制的; 各个字符的方向不受影响 (因此字符集不会向后拉，例如).

|  |  |
| --- | --- |
| 内容分类 | 流式元素, 短语元素, 显式元素。 |
| 许可内容 | 短语元素. |
| 标记省略 | 不允许，开始标签和结束标签都不能省略。 |
| 许可父级元素 | 接受短语元素的任何元素 |
| 隐式 ARIA 角色 | No corresponding role |
| 许可 ARIA 角色 | 任何 |
| DOM 接口 | `HTMLElement`直到 Gecko 1.9.2 (包括 Firefox 4) 为止，Firefox 均为此元素实现 HTMLSpanElement 接口。 |

属性
--

元素属性包含全局属性

`dir`

在此元素内容中呈现文本的方向。可能的值是：

* ltr: 指示文本应从左到右的方向。
* rtl: 指示文本应从右到左的方向。

示例
--

```html
<!-- Switch text direction -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
```

### 结果

注意
--

HTML 4 规范未指定此元素的事件。它们是在 XHTML 中添加的。这很可能是疏忽。

规范
--

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

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

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

参见
--

* 相关 HTML: `<bdi>`


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

<kbd>
=====

摘要
--

HTML 键盘输入元素 (**<kbd>**) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。

|  |  |
| --- | --- |
| 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 interface `HTMLSpanElement` for this element. |

属性
--

该元素仅支持全局属性 (en-US).

示例
--

```html
<p>
  Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK
  button.
</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
```

### 结果

 Type the following in the Run dialog: `cmd`
 Then click the OK button.

Save the document by pressing `Ctrl` + `S`

#### 结果说明：

此显示效果为 MDN 特殊显示效果，无法更改。具体显示效果请自行测试。

注意
--

通过定义 CSS 规则可以改变 kbd 的默认字体。用户首选项设置可能会比该 CSS 规则具有更高优先级。

当<kbd>元素处于<samp>元素之中时，它代表着被系统回显的输入。

当<kbd>元素中包含<samp>元素时，该输入是基于系统输出的，比如调用某个菜单项。

当<kbd>元素处于另一个<kbd>元素之中时，它代表了一个实际的按键，或是该输入机制下的某个单位输入。

规范
--

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

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

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

参阅
--

* `<code>`


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

<noframes>
==========

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

概述
--

`<noframes>` 是个 HTML 元素，用于支持不支持 `<frame>` 元素的浏览器，或者这样配置的浏览器。

你可以在 `<noframes>` 中使用任何 HTML 元素，它预期可以在 `<body>` 中看到，除了 `<frameset>` 和 `<frame>` 元素。

**备注：** 由于所有主流浏览器都支持帧，这个元素一般不需要使用。它也在 HTML5 中完全过时，并且应该避免使用，来遵循标准。

属性
--

就像其他 HTML 元素那样，这个元素支持 全局属性。

示例
--

```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
  <noframes>
    <p>
      It seems your browser does not support frames or is not configured do so.
    </p>
  </noframes>
</frameset>
```

另见
--

* `<frameset>`
* `<frame>`


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

<thead>
=======

HTML 的 **`<thead>`** 元素定义了一组定义表格的列头的行。

尝试一下
----

|  |  |
| --- | --- |
| 内容类别 (en-US) | 无。 |
| 允许内容 | 零或多个`<tr>`元素。 |
| 标签省略 | 开头的标签是强制的。如果`<thead>` 元素后直接跟 `<tbody>`或`<tfoot>`元素，结尾的标签可以被省略。 |
| Permitted parents | A `<table>` element. The `<thead>` must appear after any `<caption>` or `<colgroup>` element, even implicitly defined, but before any `<tbody>`, `<tfoot>` and `<tr>` element. |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLTableSectionElement` (en-US) |

属性
--

This element includes the global attributes.

`align`
已弃用

This enumerated attribute specifies how horizontal alignment of each 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, 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, use the CSS `text-align` property on it.
* 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`
非标准

This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'. One of the sixteen predefined color strings may be used.

**备注：** Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the `<thead>` element should be styled using CSS. To give a similar effect to the **bgcolor** attribute, use the CSS property `background-color`, on the relevant `<td>` (en-US) or `<th>` elements.

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

`valign`
已弃用

This attribute specifies the vertical alignment of the text within each row of cells of the table header. 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;
* `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: instead set the CSS `vertical-align` property on it.

示例
--

See `<table>` for examples on `<thead>`.

规范
--

| Specification |
| --- |
| HTML Standard # the-thead-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>`, `<th>`, `<tr>`;
* CSS properties and pseudo-classes that may be specially useful to style the `<thead>` element:
    + 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 '.'.<


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

<data>
======

**HTML `<data>` 元素**将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 `<time>`。

尝试一下
----

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

属性
--

该元素支持全局属性 (en-US)。

`value`

该属性指定元素内容所对应的数据，或者说“机器可读的翻译”。

示例
--

下面的示例展示了一些产品名称，而且每个名称都和一个产品编码相关联。

```html
<p>新产品</p>
<ul>
  <li><data value="398">迷你番茄酱</data></li>
  <li><data value="399">巨无霸番茄酱</data></li>
  <li><data value="400">超级巨无霸番茄酱</data></li>
</ul>
```

规范
--

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

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

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

参见
--

* HTML `<time>` 元素。


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

<frameset>
==========

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

概述
--

`<frameset>` 是一个用于包含 `<frame>` 的 HTML 元素。

**备注：** 现在不鼓励使用 frame，而是用`<iframe>`。现今的网站一般都不使用 frame。

属性
--

像所有其他的 HTML 元素一样，这个元素支持全局属性。

`cols`

这个属性指定一个框架集中列的数目和尺寸。

`rows`

这个属性指定一个框架集中行的数目和尺寸。

例子
--

```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
```

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

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

参见
--

* `<frame>`
* `<iframe>`


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

<big>
=====

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

概要
--

The HTML Big Element (`<big>`) 会使字体加大一号（例如从小号 (small) 到中号 (medium)，从大号 (large) 到加大 (x-large)），最大不超过浏览器的最大字体。

**备注：** 由于它是纯显示性的，该元素在HTML5 (en-US)中已经被移除，不应当再使用。取而代之，网页开发者应当使用 CSS 属性。

属性
--

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

示例 1
----

```xml
<p>
  This is the first sentence. <big>This whole
  sentence is in bigger letters.</big>
</p>
```

示例 2 (CSS 版)
------------

```xml
<p>
  This is the first sentence. <span style="font-size:1.2em">This whole
  sentence is in bigger letters.</span>
</p>
```

### 结果

This is the first sentence. This whole sentence is in bigger letters.

DOM 接口
------

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

**备注：** 直到 Gecko 1.9.2, Firefox 为该元素实现了`HTMLSpanElement`接口。

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

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

参见
--

* `<small>`, `<font>`, `<style>`
* HTML 4.01 Specification: Font Styles


<video>: 视频嵌入元素 - HTML（超文本标记语言）

<video>: 视频嵌入元素
===============

**HTML `<video>` 元素** 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 `<video>` 标签用于音频内容，但是 `<audio>` 元素可能在用户体验上更合适。

尝试一下
----

上面的例子展示了 `<video>` 元素的简单用法。和 `<img>` 元素的使用类似，在 `src` 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。

在不支持 video 元素的浏览器中，`<video></video>` 标签中间的内容会显示，作为降级处理。

属性
--

类似于所有其他 HTML 元素，video 元素也支持 全局属性。

`autoplay`

布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。

**备注：** 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如何正确使用自动播放，可参见我们的 自动播放指南。如果使用 `autoplay="false"` 来关闭视频的自动播放功能，会不起作用；只要 `<video>` 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性。在某些浏览器（例如 Chrome 70.0）中，如果没有设置 `muted` 属性，autoplay 将不会生效。

`controls`

加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

`controlslist`
实验性

非标准

当浏览器显示视频底部的播放控制面板（例如，指定了 `controls` 属性）时，`controlslist` 属性会帮助浏览器选择在控制面板上显示哪些控件。

允许的值有 `nodownload`、`nofullscreen` 和 `noremoteplayback`。

如果要禁用画中画模式（和控件），请使用 disablePictureInPicture 属性。

`crossorigin`

该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 `<canvas>` 元素中被重用，而不会被*污染*。允许的值如下：

anonymous

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

use-credentials

在发送跨域请求时携带凭证（credential）信息。也就是说，浏览器在发送 `Origin:` HTTP 请求首部时将会携带 cookie、安全令牌、并且执行 HTTP 基本身份验证。如果服务器没有给予源站点信任（通过设置 `Access-Control-Allow-Credentials:` HTTP 响应首部），图像会被 *污染*，并且它的使用会受到限制。不加这个属性时，获取资源不会使用 CORS 请求（即不会发送 `Origin:` HTTP 请求首部），保证其在 `<canvas>` 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 **anonymous** 一样使用。查看 CORS 设置属性 (en-US) 获取更多信息。

`disablepictureinpicture`
实验性

防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。该属性可以禁用 `video` 元素的画中画特性，右键菜单中的“画中画”选项会被禁用

`disableRemotePlayback`
实验性

布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。在 Safari 中，你可以使用 `x-webkit-airplay="deny"` 作为兜底方案。

`height`

视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

`loop`

布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。

`muted`

布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

`playsinline`

布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。

`poster`

海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。

`preload`

该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：

* `none`: 表示不应该预加载视频。
* `metadata`: 表示仅预先获取视频的元数据（例如长度）。
* `auto`: 表示可以下载整个视频文件，即使用户不希望使用它。
* *空字符串*: 和值为 `auto` 一致。每个浏览器的默认值都不相同，即使规范建议设置为 `metadata`。

**备注：** `autoplay` 属性的优先级比 `preload` 高。如果制定了 `autopaly`属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。

`src`

要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 `<source>` 元素来指定需要嵌到页面的视频。

`width`

视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

事件
--

| 事件名 | 触发时机 |
| --- | --- |
| `audioprocess` (en-US)
已弃用
 | The input buffer of a `ScriptProcessorNode` is ready to be processed. |
| `canplay` | 浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。 |
| `canplaythrough` | 浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。 |
| `complete` | `OfflineAudioContext` 渲染完成。 |
| `durationchange` | `duration` 属性的值改变时触发。 |
| `emptied` (en-US) | 媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 `load()` 方法重新加载它。 |
| `ended` | 视频停止播放，因为 media 已经到达结束点。 |
| `loadeddata` | media 中的首帧已经完成加载。 |
| `loadedmetadata` | 已加载元数据。 |
| `pause` | 播放已暂停。 |
| `play` | 播放已开始。 |
| `playing`  | 由于缺乏数据而暂停或延迟后，播放准备开始。 |
| `progress` | 在浏览器加载资源时周期性触发。 |
| `ratechange` (en-US) | 播放速率发生变化。 |
| `seeked` (en-US) | *跳帧*（seek）操作完成。 |
| `seeking` (en-US) | *跳帧*（seek）操作开始。 |
| `stalled` (en-US) | 用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现。 |
| `suspend` (en-US) | 媒体数据加载已暂停。 |
| `timeupdate` | `currentTime` 属性指定的时间发生变化。 |
| `volumechange` (en-US) | 音量发生变化。 |
| `waiting` (en-US) | 由于暂时缺少数据，播放已停止。 |

使用说明
----

浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在 `<source>` 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

```html
<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="myVideo.mp4">link to the video</a> instead.
  </p>
</video>
```

其他的使用注意事项：

* 如果你没有指定 `controls` 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 `HTMLMediaElement` API 来创建你自己的控件。详情请见Creating a cross-browser video player (en-US)。
* `HTMLMediaElement` 会激活许多不同的事件 (en-US)，以便于让你可以控制视频（和音频）内容。
* 你可以用 CSS 属性 `object-position` 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
* 如果想在视频里展示字幕或者标题，你可以在 `<track>` 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。详情请见 Adding captions and subtitles to HTML5 video (en-US)。

此外这里还有一份很棒的关于“视频和音频内容”的初学者材料，收集了很多的基本知识。

例子
--

```html
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉，你的浏览器不支持内嵌视频，不过不用担心，你可以
  <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看！
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English" />
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska" />
</video>
```

第一个例子播放一个视频，视频一收到，允许播放的时候就会立马开始播放，而不会停下来直到下载更多内容。图片 "posterimage.jpg" 会一直展示在视频区域，直到开始播放。

第二个例子允许用户选择不同的字幕。

服务器支持
-----

如果视频的 MIME 类型设置不正确，视频可能不会显示，或者显示包含一个 X 的灰色盒子（如果启用了 JavaScript 的话）。

如果你提供的视频是 Ogg Theora 格式的，在 Apache Web 服务器上，你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在 httpd.conf 中的“AddType 的”配置指令，把视频文件的扩展名 (最常见的是".ogm", ".ogv", or ".ogg") 添加到 MIME 类型 "video/ogg"，来解决这个问题。
```

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
```

如果你以 WebM 格式提供视频，在 Apache Web 服务器上，你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在 httpd.conf 中的“AddType 的”配置指令，把视频文件的扩展名 (最常见的是".webm") 添加到 MIME 类型 "video/webm"，来解决这个问题。
```

AddType video/webm .webm
```

你的 web 主机可能会提供一个简单的接口来修改 MIME 类型配置，直到服务器全面升级。

规范
--

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

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

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

参见
--

* Web 媒体类型和格式指南
    + 媒体容器（container）格式（文件类型）
    + Web 视频编解码器（codec）指南
    + Web 音频编解码器（codec）指南 (en-US)
* 使用 `object-position` 和 `object-fit` 设置 video 中图像位置和大小
* `<audio>`
* 使用 HTML5 audio 和 video
* 使用 canvas 操作 video
* Ogg 格式媒体文件的服务器配置


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

<frame>
=======

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

概述
--

`<frame>` 是 HTML 元素，它定义了一个特定区域，另一个 HTML 文档可以在里面展示。帧应该在 `<frameset>` 中使用。

`<frame>` 的使用不应提倡，因为有一些缺点，比如性能问题，以及使用屏幕阅读器的用户缺少无障碍。比起 `<frame>`，`<iframe>` 更应该提倡。

属性
--

就像其他 HTML 元素一样，这个元素支持 全局属性 (en-US)。

`src`

这个属性指定了由帧展示的文档。

`name`

这个属性用于给帧添加标签。如果没有标签，所有链接都会在它们所在的帧中打开。

`noresize`

这个属性避免让用户改变帧的大小。

`scrolling`

这个属性定义了滚动条的存在。如果不使用这个属性，浏览器会按需放置滚动条。有两个选择：`"yes"` 用于展示滚动条，即使是多余的；`"no"` 用于不展示滚动条，即使它是必要的。

`marginheight`

这个属性定义了帧之间的边距有多高。

`marginwidth`

这个属性定义了帧之间的边距有多宽。

`frameborder`

这个属性允许你为帧添加边框。

示例
--

```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
```

另见
--

* `<frameset>`
* `<iframe>`


<details>：详细信息展现元素 - HTML（超文本标记语言）

<details>：详细信息展现元素
==================

HTML **`<details>`** 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。`<summary>` 元素可为该部件提供概要或者标签。

展现组件通常在屏幕上使用一个小三角形，旋转（或扭转）以表示打开/关闭的状态，三角形旁边有一个标签。`<summary>` 元素的内容被用来作为展示小部件的标签。

尝试一下
----

一个 `<details>` 小组件可以处于两种状态之一。默认的*关闭*状态只显示三角形和 `<summary>` 内的标签（如果没有 `<summary>` 则显示用户代理定义的默认字符串）。

当用户点击小组件或聚焦它然后按空格键时，它就会“扭转”展开，显示出其中的内容。通常使用一个旋转或扭转的三角形来代表打开或关闭小组件，这就是为什么这些小组件有时被称为“旋钮”。

你可以使用 CSS 来设计展示小组件，你可以通过设置/移除 `open` 属性以编程方式打开和关闭该小组件。遗憾的是，目前还没有内置的方法来对打开和关闭之间的过渡进行动画处理。

默认情况下，当关闭时，该小组件的高度只足以显示展开三角形和摘要。当打开时，它就会展开以显示其中包含的细节。

完全符合标准的实现会自动将 CSS ``display`: list-item` 应用到 `<summary>` 元素。你可以用它来进一步定制其外观。请参阅自定义展开组件以了解更多细节。

属性
--

此元素包含全局属性。

`open`

这个布尔属性表示细节内容——也就是 `<details>` 元素的内容——目前是否可见。默认情况下为 `false`，意味着细节内容是不可见的。

**备注：** 你必须完全删除这个属性来使细节内容隐藏。`open="false"` 使细节内容可见，因为这个属性是布尔值。

事件
--

除了 HTML 元素支持的常规事件外，`<details>` 元素还支持 `toggle` 事件，当 `<details>` 元素的状态在打开和关闭之间变化时，该事件会被派发到该元素。该事件是在状态发生变化*后*发送的，不过如果状态在浏览器派发该事件之前发生了多次变化，那么这些事件就会被合并，从而只发送一个。

你可以为 `toggle` 事件使用一个事件监听器来检测小组件何时改变状态：

```js
details.addEventListener("toggle", (event) => {
  if (details.open) {
    /\* 元素切换至打开状态 \*/
  } else {
    /\* 元素切换至关闭状态 \*/
  }
});
```

示例
--

### 一个简单的展开示例

此示例展示了一个带有 `<summary>` 的 `<details>` 元素。

```html
<details>
  <summary>系统需求</summary>
  <p>
    要求有一台运行操作系统的计算机。计算机必须有一些内存，最好有某种长期存储。建议有一个输入设备以及某种形式的输出设备。
  </p>
</details>
```

#### 结果

### 创建一个展开的盒子

为了使得 `<details>` 盒子初始为展开状态，要添加布尔属性 `open`：

```html
<details open>
  <summary>系统需求</summary>
  <p>
    要求有一台运行操作系统的计算机。计算机必须有一些内存，最好有某种长期存储。建议有一个输入设备以及某种形式的输出设备。
  </p>
</details>
```

#### 结果

### 自定义外观

现在我们给展现盒子设置一些 CSS 样式，以自定义其外观。

#### CSS

```css
details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}
```

这个 CSS 创建了一个类似于标签式界面的外观，点击标签可以打开它，显示其内容。

选择器 `details[open]` 可以用来为打开的元素设置样式。

#### HTML

```html
<details>
  <summary>系统需求</summary>
  <p>
    要求有一台运行操作系统的计算机。计算机必须有一些内存，最好有某种长期存储。建议有一个输入设备以及某种形式的输出设备。
  </p>
</details>
```

#### 结果

### 自定义展开组件

展开三角形可以自定义，但并没有得到广泛支持。由于该元素是标准化的，因此在实验性实施阶段，浏览器如何支持此自定义项有所不同，我们不得不暂时使用多种方法。

`<summary>` 元素支持 `list-style` 缩写属性或者完整属性，比如 `list-style-type`，可以使用它们任意改变三角（通常与 `list-style-image` 一起使用）。例如，我们可以使用 `list-style: none` 移除三角形展开图标。

#### CSS

```css
details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
```

该 CSS 的外观类似于选项卡界面，在该界面中，激活选项卡将展开并打开它以显示其内容。

#### HTML

```html
<details>
  <summary>系统需求</summary>
  <p>
    要求有一台运行操作系统的计算机。计算机必须有一些内存，最好有某种长期存储。建议有一个输入设备以及某种形式的输出设备。
  </p>
</details>
```

#### 结果

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、分段内容、交互内容、可感知内容 |
| 允许的内容 | 一个紧跟流式内容的 `<summary>` 元素 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受流式内容的元素。 |
| 隐含的 ARIA 角色 | `group` (en-US) |
| 允许的 ARIA 角色 | 没有允许的 `role` |
| DOM 接口 | `HTMLDetailsElement` |

规范
--

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

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

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

参见
--

* `<summary>`


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

<colgroup>
==========

HTML 中的 表格列组（*Column Group* **<colgroup>**）标签用来定义表中的一组列表。

尝试一下
----

|  |  |
| --- | --- |
| 内容类别 (en-US) | 无。 |
| 允许的内容 | If the `span` attribute is present: none, it is an empty element.If the attribute is not present: zero or more `<col>` element |
| 标签省略 | 如果元素的第一个子元素存在且是一个 `<col>` 元素，而且在它之前没有省略了结束标签的 `<colgroup>` 元素，元素的开始标签可以被省略。如果之后没有紧跟一个空格或注释，元素的结束标签可以被省略。 |
| 允许的父元素 | 一个 `<table>` 元素。The `<colgroup>` must appear after any optional `<caption>` element but before any `<thead>`, `<th>`, `<tbody>`, `<tfoot>` and `<tr>` element. |
| 允许的 ARIA roles | 无 |
| DOM 接口 | `HTMLTableColElement` (en-US) |

属性
--

此标签支持 全局属性。

`align`
已弃用

这个可枚举的属性定义每一列的元素内容的水平对齐方式，支持的值有：

* `left`，元素中的内容左对齐
* `center`，元素中的内容居中对齐
* `right`，元素中的内容右对齐
* `justify`，插入空格，使元素中内容两端对齐
* `char`，针对确定的字符，设置一个最小偏移量，来进行布局，通过 `char` 和 `charoff` 属性进行定义 未实现 (查看 Firefox bug 2212)。此属性的默认值为 `left`。后代 `<col>` 元素可以用它们自己的 `align` 属性值来重写该属性。

**备注：** 不要使用这个属性，它在最新的标准中已经不被支持。

* 若要实现与 `left`, `center`, `right` 或 `justify` 相同的效果：
* 不要为一个 `<colgroup>` 元素选择器设置 `text-align` 属性.，因为`<td>` (en-US) 元素并不是 `<colgroup>` 元素的后代，不继承于它。
* 如果表格不使用 `colspan` (en-US) 属性，每列用一个 `td:nth-child(an+b)` 的 CSS 选择器，a 是表格中列的总数，b 是当前列在表格中的位列次序号。只有在这个选择器之后， `text-align` 属性可以使用。
* 如果表格使用了 `colspan` (en-US) 属性，可以通过合并足够多的属性选择器来实现同样的效果，比如 `[colspan=n]`，但这不常用。
* 若要实现与 `char` 相同的效果：在 CSS3 中，你可以使用 `char` 作为 `text-align` 的属性值。 未实现

`bgcolor`
非标准

这个属性用于定义列组中的每一个列成员的背景颜色。在 sRGB 的定义中，它是一个以 '#' 开头的 6 位 16 进制值，有 16 个预定义的表示颜色的字符串可以使用

**备注：** 不要使用这个并未标准化的属性，它只在 IE 的某些版本中生效，`<colgroup>` 标签应该使用 CSS 来定义样式。要实现和 **bgcolor** 属性相似的效果，可以在相关的 `<td>` (en-US) 标签上使用 `background-color` 属性。 |

`char`
已弃用

This attribute specifies the alignment of the content in a column group to a character. 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, though it will still be used as the default value for the `align` of the `<col>` which are members of this column group.

**备注：** 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 character specified by the **char** attribute.

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

`span`

This attribute contains a positive integer indicating the number of consecutive columns the `<colgroup>` element spans. If not present, its default value is `1`.

**备注：** This attribute is applied on the attributes of the column group, it has no effect on the CSS styling rules associated with it or, even more, to the cells of the column's members of the group. The `span` attribute is not permitted if there are one or more `<col>` elements within the `<colgroup>`.

`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 `<colgroup>` element. Because `<td>` (en-US) elements are not descendant of the `<colgroup>` 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 per column, 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>` 页面以查看 `<colgroup>` 的示例。

规范
--

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

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

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

参见
--

* 其他与表格有关的 HTML 元素：`<caption>`，`<col>`，`<table>`，`<tbody>`，`<td>` (en-US)，`<tfoot>`，`<th>`，`<thead>`，`<tr>`；
* 对 `<col>` 元素编写样式时特别有用的 CSS 属性和伪类：
    + `width` 属性可用于控制列宽；
    + `:nth-child` 伪类可用于针对特定单元格设置对齐方式；
    + `text-align` 属性可用于按照某一个字符对齐所有单元格的内容，例如 '.'。


<p>：段落元素 - HTML（超文本标记语言）

<p>：段落元素
========

HTML **`<p>`** 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。

段落是块级元素，如果在关闭的 `</p>` 标签之前解析了另一个块级元素，则该标签将自动关闭。请参阅下面的“标签省略”。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、可感知内容。 |
| 允许的内容类型 | 短语内容。 |
| 标签省略 | 开始标签是必要的。如果 `<p>` 元素后面紧跟 `<address>`、`<article>`、`<aside>`、`<blockquote>`、`<div>`、`<dl>`、`<fieldset>`、`<footer>`、`<form>`、h1、h2、h3、h4、h5、h6、`<header>`、`<hr>`、`<menu>`、`<nav>`、`<ol>`、`<pre>`、`<section>`、`<table>`、`<ul>` 或其他 `<p>` 元素，或者父元素中已没有内容，且父元素不是 `<a>` 元素，则可以省略结束标签。 |
| 允许的父元素 | 任何接受流式内容的元素。 |
| 隐式 ARIA 角色 | paragraph (en-US) |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLParagraphElement` |

属性
--

这个元素包含全局属性。

**备注：** `<p>` 标签的 `align` 属性已被弃用，请不要使用。

示例
--

### HTML

```html
<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
```

### 运行结果

为段落添加样式
-------

默认情况下，浏览器会用一个空行来分隔段落。其他分隔方法，如首行缩进，可以通过 CSS 来实现：

### HTML

```html
<p>
  用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。
</p>

<p>
  学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。
</p>

<p>
  在非常古老的文字中，段落之间用一种特殊的字符：¶（称为<i>段落符号</i>）分隔。如今，这个符号太密集了，难以阅读。
</p>

<p>
  究竟有多难阅读？自己试一下：
  <button data-toggle-text="换回去！">使用段落符号分隔段落</button>
</p>
```

### CSS

```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});
```

### 运行结果

无障碍考虑
-----

将内容分成段落有助于使页面更易于访问。屏幕阅读器和其他辅助技术提供的快捷方式可以让用户跳到下一个或上一个段落，让他们可以略读内容，就像留白可以让视觉用户跳来跳去一样。

使用空的 `<p>` 元素在段落之间添加空格，对于使用读屏技术浏览的人来说是有问题的。屏幕阅读器可能会显示段落的存在，但不会显示其中包含的任何内容——因为没有内容。这会让使用屏幕阅读器的人感到困惑和沮丧。

如果需要额外的空间，可以使用 CSS 属性，如 `margin` 来创建效果：

```css
p {
  margin-bottom: 2em; /\* 增加段落之后的空白 \*/
}
```

规范
--

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

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

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

参见
--

* `<hr>`
* `<br>`


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

<style>
=======

概要
--

**HTML** 的 `<style>` 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

尝试一下
----

* *内容类别 (en-US)*元数据内容，如果指定了 `scoped` 属性：流内容
* *允许的内容*与 `type` 属性相匹配的文本内容，也就是 `text/css`
* *标签忽略* 不允许，开始标签和结束标签都不能省略。
* *允许的父元素* 任意接受元数据内容的元素
* \_Permitted ARIA roles\_None
* *DOM 接口* `HTMLStyleElement`
属性
--

该元素包含所有全局属性。

`type`

该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 `text/css`。

`media`

该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询，默认值为 `all`。

`nonce`

一种加密的随机数（一次使用的数字），用于在style-src Content-Security-Policy (en-US)中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。

`title`

指定可选的样式表。

### 已淘汰属性

`scoped`
非标准

已弃用

此属性指定样式仅适用于其父项和子项的元素。

**备注：** 以后可能会根据https://github.com/w3c/csswg-drafts/issues/3547重新引入此属性。如果要立即使用该属性，则可以使用polyfill。

示例
--

### 一个简单的样式表

在下面的例子中，我们将简单的样式应用到文档中：

```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 多种样式元素

在这个例子中包含两种样式 `<style>` 元素

```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style>
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 包含媒体 (media) 选择

这个例子根据前一个例子构建，在第二个 `<style>` 中，视图宽度小于 500px 时生效

```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style media="all and (max-width: 500px)">
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

规范
--

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

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

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

查看更多
----

* `<link>`元素允许使用外部的样式表。
* Alternative Style Sheets


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

<textarea>：文本区元素
================

**HTML `<textarea>` 元素**表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

尝试一下
----

上述例子展示了 `<textarea>` 的几个特点：

* 为了提高无障碍（accessibility），用于将 `<textarea>`与一个 `<label>` 关联的 `id` 属性。
* `name` 属性，用于设置随表单一同提交到服务器的相关数据的名字。
* `rows` 和 `cols` 属性，用于声明 `<textarea>` 的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。
* 位于开始标签和闭合标签之间的默认内容。`<textarea>` 不支持 `value` 属性。

`<textarea>` 还可以使用 `<input>` 中的一些常见属性，如`autocomplete`, `autofocus`, `disabled`, `placeholder`, `readonly`, 和 `required`。

属性
--

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

`autocapitalize`
非标准

iOS 的非标准属性（运行在 iOS 上的 Safari、Firefox、Chrome 都支持），文本是否自动首字母大写。在 iOS5 和之后的版本上有效。可能的值为：

* `none`: 禁用首字母大写。
* `sentences`: 句子的首字母大写。
* `words`: 单词或者字母的首字母大写。
* `characters`: 全部字母大写。
* `on`:
已弃用
 自 iOS 5 废弃。
* `off`:
已弃用
 自 iOS 5 废弃。

`autocomplete`

是否使用浏览器的记忆功能自动填充文本。可能的值有：

* `off`: 不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
* `on`: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。如果不指明**autocomplete**属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是 `textarea` 元素的父级`<form>`或者 `textarea`有跟表单相同的 id（参见下面的 form 属性）。更多请查看`<form>`的`autocomplete` 属性。

`autofocus`

页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。

`cols`

文本域的可视宽度。必须为正数，默认为 20 (HTML5)。

`disabled`

禁用文本域。默认为 false。如果未指定，也可以从父级上如`<fieldset>`继承而来。

`form`

指定跟自身相关联的表单。值必须为本文档内的表单的 ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。

`maxlength`

允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。

`minlength`

允许用户输入的最小字符长度 (Unicode)

`name`

元素的名称。

`placeholder`

向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符 (\r) 或换行符 (\n) 一定会被作为行断（换行）处理。

**备注：** Placeholders should only be used to show an example of the type of data that should be entered into a form; they are *not* a substitute for a proper `<label>` element tied to the input. See `<input>` labels for a full explanation.

`readonly`

不允许用户修改元素内文本。和 `disabled` 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。

`required`

提示用户这个元素的内容必填。

`rows`

元素的输入文本的行数（显示的高度）。

`spellcheck`

该属性设为 true 时，表明该元素会做拼写和语法检查。属性值为 default 时，表明元素有默认行为，可能会基于父元素的 spellcheck 值。属性值为 false 时，表明元素不做拼写和语法检查。

`wrap`

指定文本换行的方式。默认为 soft。可能的值为：

* hard: 在文本到达元素最大宽度的时候，浏览器自动插入换行符 (CR+LF) 。比如指定 `cols`值。
* soft: 在到达元素最大宽度的时候，不会自动插入换行符。

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

`<textarea>` 是可替换元素——其有自己的固有尺寸，像位图一样。默认情况下，其 `display` 值为 `inline-block`。与其他表单元素相比，这个元素相对比较容易设置样式，使用常规的 CSS 就可以轻松设置它的盒模型、字体、颜色方案等。

Styling HTML forms 这个页面提供了一些关于 `<textarea>` 样式的有用提示。

### 基线不一致

The HTML specification doesn't define where the baseline of a `<textarea>` is, so different browsers set it to different positions. For Gecko, the `<textarea>` baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the `<textarea>` box. Don't use `vertical-align``: baseline` on it; the behavior is unpredictable.

### 控制文本区是否可调整大小

In most browsers, `<textarea>`s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the `resize` CSS property — resizing is enabled by default, but you can explicitly disable it using a `resize` value of `none`:

```css
textarea {
  resize: none;
}
```

### 在样式中使用有效值和无效值

Valid and invalid values of a `<textarea>` element (e.g. those within, and outside the bounds set by `minlength`, `maxlength`, or `required`) can be highlighted using the `:valid` and `:invalid` pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:

```css
textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}
```

示例
--

### HTML

```html
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
```

### 基本示例

The following example show a very simple textarea, with a set numbers of rows and columns and some default content.

```html
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
```

### 最小和最大长度

This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.

```html
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Write something here</textarea
>
```

Note that `minlength` doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the `<textarea>` invalid. Also note that even if you have a `minlength` value set (3, for example), an empty `<textarea>` is still considered valid unless you also have the `required` attribute set.

### 占位符

This example has a placeholder set. Notice how it disappears when you start typing into the box.

```html
<textarea
 name="textarea"
 rows="5"
 cols="30"
 placeholder="Comment text."></textarea>
```

**备注：** Placeholders should only be used to show an example of the type of data that should be entered into a form; they are *not* a substitute for a proper `<label>` element tied to the input. See `<input>` labels for a full explanation.

### 禁用和只读

This example shows two `<textarea>`s — one of which is `disabled`, and one of which is `readonly`. Have a play with both and you'll see the difference in behavior — the `disabled` element is not selectable in any way (and its value is not submitted), whereas the `readonly` element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.

**备注：** In browsers other than firefox, such as chrome, the `disabled` textarea content may be selectable and copyable.

```html
<textarea name="textarea" rows="5" cols="30" disabled>
I am a disabled textarea</textarea
>
<textarea name="textarea" rows="5" cols="30" readonly>
I am a readonly textarea</textarea
>
```

技术概览
----

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), Interactive content (en-US), listed (en-US), labelable (en-US), resettable (en-US), and submittable (en-US) form-associated (en-US) element. |
| Permitted content | Text |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts phrasing content (en-US). |
| Implicit ARIA role | `textbox (en-US)` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTextAreaElement` |

规范
--

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

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

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

参见
--

其他与表单相关的元素：

* `<form>`
* `<button>`
* `<datalist>`
* `<legend>`
* `<label>`
* `<select>`
* `<optgroup>`
* `<option>`
* `<input>`
* `<fieldset>`
* `<output>`
* `<progress>`
* `<meter>`


<meta>：元数据元素 - HTML（超文本标记语言）

<meta>：元数据元素
============

HTML **`<meta>`** 元素表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息。如：`<base>`、`<link>`、`<script>`、`<style>` 或 `<title>`。

|  |  |
| --- | --- |
| 内容分类 | 元数据内容。如果 `itemprop` 属性存在：流式内容、分段内容 |
| 允许的内容 | 无；这是一个空元素。 |
| 标签省略 | 由于这是一个空元素，所以必须有开始标签并且不能有结束标签。 |
| 允许的父元素 | * `<meta charset>`、`<meta http-equiv>`：`<head>` 元素。如果
 `http-equiv` 不是编码声明，它也可以放在
 `<noscript>` 元素中，它本身在一个
 `<head>` 元素内部。
* `<meta name>`：任何可以接受元数据内容的元素。
* `<meta itemprop>`：任何可以接受元数据内容或流式内容。
 |
| 默认的无障碍角色 | 没有相应的角色 |
| 允许的无障碍角色 | 没有允许的`角色（role）` |
| DOM 接口 | `HTMLMetaElement` (en-US) |

`<meta>` 元素定义的元数据的类型包括以下几种：

* 如果设置了 `name` 属性，`<meta>` 元素提供的是文档级别（*document-level*）的元数据，应用于整个页面。
* 如果设置了 `http-equiv` 属性，`<meta>` 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
* 如果设置了 `charset` 属性，`<meta>` 元素是一个字符集声明，告诉文档使用哪种字符编码。
* 如果设置了 `itemprop` 属性，`<meta>` 元素提供用户定义的元数据。
属性
--

此元素包括全局属性。

**备注：** `name` 属性在 `<meta>` 元素中具有特殊的语义；另外，当一个 `<meta>` 标签中，有 `name`、`http-equiv` 或者 `charset` 三者中任何一个属性时，`itemprop` 属性不能被使用。

`charset`

该属性声明了文档的字符编码。如果存在该属性，则其值必须是字符串 `"utf-8"` 的不区分 ASCII 大小写的匹配，因为 UTF-8 是 HTML5 文档的唯一有效编码。声明字符编码的 `<meta>` 元素必须完全位于文档的前 1024 个字节内。

`content`

此属性包含 `http-equiv` 或 `name` 属性的值，具体取决于所使用的值。

`http-equiv`

属性定义了一个编译指示指令。这个属性叫做 `http-equiv(alent)` 是因为所有允许的值都是特定 HTTP 标头的名称，如下：

* `content-security-policy`
 允许页面作者定义当前页面的内容策略。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
* `content-type`
 声明 MIME 类型和文档的字符编码。如果使用 `content-type` 属性，与之在同一个 `<meta>` 元素中使用的 `content` 属性的值必须是 `"text/html; charset=utf-8"`。这相当于一个具有指定 `charset` 属性的 `<meta>` 元素，并对其在文档中的放置位置有相同的限制。**注意**：该属性只能用于 MIME 类型为 `text/html` 的文档，不能用于 MIME 类型为 XML 的文档。
* `default-style`
 设置默认 CSS 样式表组的名称。
* `x-ua-compatible`
 如果指定，则 `content` 属性必须具有值 `"IE=edge"`。用户代理必须忽略此指示。
* `refresh`
 这个属性指定：
    + 页面重新加载的秒数——仅当 `content` 属性包含非负整数时。
    + 页面重定向到指定链接的秒数——仅当 content 属性包含非负整数后跟字符串“`;url=`”和有效的 URL 时。
**警告：**

设置了 `refresh` 值的页面存在时间间隔过短的风险。借助屏幕阅读器等辅助技术进行导航的用户可能无法在自动重定向之前通读和理解页面内容。突然的、未通知的页面内容更新也可能会让视力低下的人迷失方向。

    + MDN Understanding WCAG, Guideline 2.1 explanations (en-US)
    + MDN Understanding WCAG, Guideline 3.1 explanations (en-US)
    + Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0
    + Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0
    + Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0

`name`

`name` 和 `content` 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
 在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

示例
--

```html
<meta charset="utf-8" />

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
```

规范
--

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

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

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

参见
--

* 标准元数据名称
* 学习：`<meta>`
* viewport 元标签