<link>：外部资源链接元素 - HTML（超文本标记语言）

<link>：外部资源链接元素
===============

**HTML 外部资源链接元素** (**`<link>`**) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

尝试一下
----

要链接一个外部的样式表，你需要像这样在你的`<head>`中包含一个`<link>`元素：

```html
<link href="main.css" rel="stylesheet" />
```

在这个简单的例子中，使用了 `href` 属性设置外部资源的路径，并设置 `rel` 属性的值为“`stylesheet`”(样式表)。`rel` 表示“关系 (relationship) ”，它可能是`<link>`元素其中一个关键的特性——属性值表示`<link>`项的链接方式与包含它的文档之间的关系。你将在我们的链接类型中看到很多不同类型的关系。

这里有一些你经常遇到的其他类型。例如，这里是一个网站图标的链接：

```html
<link rel="icon" href="favicon.ico" />
```

还有一些其他的与图标相关的`rel`值，主要用于表示不同移动平台上特殊的图标类型，例如：

```html
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="apple-icon-114.png"
 type="image/png" />
```

`sizes`属性表示图标大小，`type`属性包含了链接资源的 MIME 类型。这些属性为浏览器选择最合适的图标提供了有用的提示。

你也可以提供一个媒体类型，或者在`media`属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来。例如：

```html
<link href="print.css" rel="stylesheet" media="print" />
<link
 href="mobile.css"
 rel="stylesheet"
 media="screen and (max-width: 600px)" />
```

`<link>`也加入了一些新的有意思的性能和安全特性。举例如下：

```html
<link
 rel="preload"
 href="myFont.woff2"
 as="font"
 type="font/woff2"
 crossorigin="anonymous" />
```

将`rel`设定为`preload`，表示浏览器应该预加载该资源 (更多细节见使用 rel="preload"预加载内容 (en-US)) 。`as`属性表示获取特定的内容类。`crossorigin`属性表示该资源是否应该使用一个CORS请求来获取。

其他用法的注解：

* `<link>`元素可以出现在`<head>`元素或者`<body>`元素中，具体取决于它是否有一个**body-ok**的链接类型。例如，`stylesheet`链接类型是 body-ok 的，因此`<link rel="stylesheet">`允许出现在 body 中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的`<link>`元素从你的 body 内容中分离出来，将其放在`<head>`中。
* 当使用`<link>`为网站创建一个 favicon 时，你的网站使用内容安全策略 (Content Security Policy，CSP) 来增强它的安全性，这种策略适用于 favicon。如果你遇到 favicon 未加载的问题，验证`Content-Security-Policy`头的`img-src` directive (en-US)没有在阻止对它的访问。
* HTML 和 XHTML 规范为`<link>`元素定义了一些事件处理器 (*event handler*) ，但是对于它们的使用方法不明确。
* 在 XHTML 1.0 下，例如`<link>`的空元素需要一个尾斜杠：`<link />`。
* WebTV 支持`rel`使用`next`值，用于在一个 document series 中预加载下一页。
属性
--

这个元素可以使用 全局属性.

`as`

该属性仅在`<link>`元素设置了 `rel="preload"` 或者 `rel="prefetch"` 时才能使用。它规定了`<link>元素`加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 `Accept`请求头的设置，这个属性是必需的。

| 值 | 应用于 |
| --- | --- |
| audio | `<audio>` 元素 |
| document | `<iframe>` 和 `<frame>` 元素 |
| embed | `<embed>` 元素 |
| fetch | fetch, XHRThis value also requires `<link>` to contain the crossorigin attribute. |
| font | CSS @font-face |
| image | `<img>` and `<picture>` elements with srcset or imageset attributes, SVG `<image>` elements, CSS `*-image` rules |
| object | `<object>` elements |
| script | `<script>` elements, Worker `importScripts` |
| style | `<link rel=stylesheet>` elements, CSS `@import` |
| track | `<track>` elements |
| video | `<video>` elements |
| worker | Worker, SharedWorker |

`crossorigin`

此枚举属性指定在加载相关资源时是否必须使用 CORS. 启用 CORS 的图片 可以在 `<canvas>` 元素中重复使用，并避免其被*污染*. 可取的值如下：

`"anonymous"`

会发起一个跨域请求 (即包含 `Origin:` HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 `Access-Control-Allow-Origin:` HTTP 头), 资源就会被*污染并限制使用*.

`"use-credentials"`

会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 `Origin:` HTTP 头). 如果服务器没有给出源站凭证 (不设置 `Access-Control-Allow-Origin:` HTTP 头), 资源就会被*污染并限制使用*.当不设置此属性时，资源将会不使用 CORS 加载 (即不发送 `Origin:` HTTP 头), 这将阻止其在 `<canvas>` 元素中进行使用。若设置了非法的值，则视为使用 **anonymous**. 前往 CORS settings attributes 获取更多信息。

`disabled`

仅对于`rel="stylesheet"` ，`disabled` 的 Boolean 属性指示是否应加载所描述的样式表并将其应用于文档。如果在加载 HTML 时在 HTML 中指定了 Disabled，则在页面加载期间不会加载样式表。相反，如果禁用属性更改为 false 或删除时，样式表将按需加载。但是，一旦加载样式表，对 Disabled 属性的值所做的更改将不再与`StyleSheet.disabled` 属性的值有任何关系。相反，更改此属性的值只是启用和禁用应用于文档的样式表表单。这与 StyleSheet 的 disable 属性不同；将其更改为 true 会将样式表从文档的`document.styleSheets` 列表中删除，并且在切换回 false 时不会自动重新加载样式表。

`href`

此属性指定被链接资源的URL。URL 可以是绝对的，也可以是相对的。

`hreflang`

此属性指明了被链接资源的语言。其意义仅供参考。可取的值参见 BCP47。仅当设置了 `href` 属性时才应设置该属性。

`importance`
实验性

指示资源的相对重要性。优先级提示使用以下值委托：**`auto`**: 表示**没有偏好**。浏览器可以使用其自己的启发式方法来确定资源的优先级。**`high`**: 向浏览器指示资源具有高优先级。**`low`**: 向浏览器指示资源的优先级较低。

**备注：** 只有存在 rel=“preload”或 rel=“prefetch”时，importance 属性才能用于<link>元素。

`integrity`
实验性

包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以 base64 编码的方式加的密，这样用户能用它来验证一个获取到的资源，在传送时未被非法篡改，详情查看Subresource Integrity。

`media`

这个属性规定了外部资源适用的媒体类型。它的值必须是"媒体查询"。这个属性使得用户代理能选择最适合设备运行的媒体类型。

* 在 HTML 4 中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如"媒体类型"规定了该元素可取的属性，如 print、screen、aural、braille。HTML5 将该属性值扩展为任意类型的"媒体查询 (en-US)"，"媒体查询"将 HTML4 的属性值都包括在内。
* 不支持"CSS3 媒体查询 (en-US)"的浏览器并不会强行识别这些链接，因此别忘了设置备用 link，即那些可用于 HTML4 的 link。

`referrerpolicy`
实验性

一个字符串，指示在获取资源时使用哪个引荐来源网址：

* `'no-referrer'` 表示`Referer` 标头将不会发送。
* `'no-referrer-when-downgrade'` 的原始位置时不会发送任何`Referer`标头。如果未指定其他政策，这是用户代理的默认行为。
* `'origin'` 意味着引荐来源网址将是页面的来源，大致是方案，主机和端口。
* `'origin-when-cross-origin'` 这意味着导航到其他来源将仅限于方案，主机和端口，而在同一来源上导航将包括引荐来源网址的路径。
* `'unsafe-url'` 意味着引荐来源网址将包含来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可能会将来源和路径从受 TLS 保护的资源泄漏到不安全的来源。

`rel`

此属性命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。

`sizes`

这个属性定义了包含相应资源的可视化媒体中的 icons 的大小。它只有在`rel`包含 icon 的link 类型值。它可能有如下的规则。

* `any` 表示图标可以按矢量格式缩放到任意大小，例如 `image/svg+xml`。
* 一个由空白符分隔的尺寸列表。每一个都以`<width in pixels>x<height in pixels>` 或 `<width in pixels>X<height in pixels>给出。`尺寸列表中的每一个尺寸都必须包含在资源里。

**备注：** 大多数的 icon 格式只能存储一个 icon。因此绝大多数使用 `sizes`时只包含一个值。微软的 ICO 格式和苹果的 ICNS 格式都是这样，ICO 使用得更加广泛，推荐你使用它。

* 苹果的 IOS 系统并不支持这个属性，于是苹果的 IPhone 以及 IPad 使用特殊的、非标准的 link 类型值去定义作为 Web Clip 或开始占位符：`apple-touch-icon` 和 `apple-touch-startup-icon`。

`title`

属性在`<link>`元素上有特殊的语义。当用于`<link rel="stylesheet">`时，它定义了一个首选样式表或备用样式表。不正确地使用它可能会导致样式表被忽略。

`type`

这个属性被用于定义链接的内容的类型。这个属性的值应该是像 text/html，text/css 等 MIME 类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了 CSS 的 text/css。

### 非标准属性

`methods`
非标准

此属性的值提供有关可能在对象上执行的功能的信息。这些值通常在使用时由 HTTP 协议给出，但是（出于与“**title**”属性类似的原因）将其预先包含在链接中可能是有用的。例如，浏览器可能根据指定的方法选择不同的链接呈现方式。可搜索的内容可能会得到其他图标，或者外部链接可能会显示离开当前站点的指示。即使定义的浏览器 Internet Explorer 4 也无法很好地理解或支持此属性。

`prefetch`
非标准
 安全上下文

此属性标识下一个导航可能需要的资源，用户代理应检索该资源。这允许用户代理在将来请求资源时更快地做出响应。

`target`
非标准

定义具有已定义链接关系或将显示任何链接资源的呈现的框架或窗口名称。

### 已淘汰的属性

`charset`
已弃用

此属性定义链接资源的字符编码。该值为RFC 2045中定义的字符集的空格和/或逗号分隔列表。缺省值为 iso-8859-1。

**备注：** 该属性已淘汰且禁止使用\*\*。要\*\*实现相同效果，可在外链资源中使用 `Content-Type` HTTP header。

`rev`
已弃用

此属性的值显示了 `href` 属性所定义的当前文档与链接文档的关系。因此，该属性定义了与 rel 属性的值相比的反向关系。该属性的Link type value类似于`rel`的可能值。

**备注：** WHATWG HTML 生活标准（MDN 将其视为规范的规范）认为该属性已过时。但是，值得注意的是，rev 在 W3C 规范中并未过时。就是说，鉴于不确定性，依靠 rev 是不明智的。相反，你应该使用具有相反链接类型值的`rel`属性。例如，要建立反向链接，请指定作者。而且，即使许多站点都以这种方式滥用此属性，该属性也不代表“修订”，并且不得与版本号一起使用。

示例
--

### 引入一个 css 文件

用下面的语法来引入一个 css 文件：

```html
<link href="style.css" rel="stylesheet" />
```

### 提供可替换的样式表

你也可以指定"可替换的外部样式表"。

用户可以在浏览器菜单 "查看>页面样式" 来选择网页的样式。通过这一办法，可以用多种样式浏览网页。

```html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

### 提供用于不同用法上下文的图标

你可以在同一页面上包含指向多个不同图标的链接，浏览器将使用`rel`和`sizes` 值作为提示来选择最适合其特定上下文的图标。

```html
<!-- third-generation iPad with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />
```

### 通过媒体查询有条件地加载资源

你可以在`media`属性中提供媒体类型或查询; 然后，只有在媒体条件为 true 时，才会加载此资源。例如：

```html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
 href="desktop.css"
 rel="stylesheet"
 media="screen and (min-width: 600px)" />
<link
 href="highres.css"
 rel="stylesheet"
 media="screen and (min-resolution: 300dpi)" />
```

### 样式表加载事件

你能够通过监听发生在样式表上的事件知道什么时候样式表加载完毕。同样的，你能够通过监听`error`事件检测到是否在加载样式表的过程中出现错误。

```html
<script>
 function sheetLoaded() {
 // Do something interesting; the sheet has been loaded
 }

 function sheetError() {
 alert("An error occurred loading the stylesheet!");
 }
</script>

<link
 rel="stylesheet"
 href="mystylesheet.css"
 onload="sheetLoaded()"
 onerror="sheetError()" />
```

**备注：** 当样式表以及它引用的部分全部加载完毕，load 事件就会在样式表应用到内容之前立即触发。

### 预加载例子

你可以在Preloading content with rel="preload" (en-US)找到`<link rel="preload">`的详细例子。

概要
--

|  |  |
| --- | --- |
| 内容类型 | 元数据。如果使用了 itemprop 属性，则为 flow content 和 phrasing content. |
| 允许的元素内容 | 无，这是一个空元素。 |
| 标签省略 | 鉴于这是一个空元素，开始标签必须存在，结束标签必须不存在。 |
| 允许的父元素 | 任何可以接受元数据的元素.。如果使用了 itemprop属性，，则其父元素可以是任何可接受 phrasing content 的元素。 |
| 允许的 ARIA roles | 无 |
| DOM 接口 | `HTMLLinkElement` (en-US) |

注意
--

* `<link>` 标签只能出现在 head 元素中，然而可以出现多个<link>标签。
* HTML 3.2 只为 link 元素定义了**href**, **methods**, **rel**，**rev**，**title**，和**urn**属性。
* HTML 2 为 link 标签定义了 **href**, **methods**，**rel**，**rev**，\*\*title，\*\*和 **urn** 属性，**methods** 和 **urn**随后从规范中移除。
* HTML 和 XHTML 规范为 link 定义了事件处理，但是并不清楚它们将会怎样被使用。
* 在 XHTML 1.0 中，空元素 link 要求有尾随斜线，像这样<link />。
规范
--

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

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

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

请参阅
---

* `Link` HTTP header
* Ryan Grove's <script> and <link> node event compatibility chart


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

<menuitem>
==========

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

用户可以通过**HTML `<menuitem>` 元素**生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。

这个标签可以被显式定义，带有文本标签和可选图标来描述其外观，或者作为一个*间接命令*，其行为由一个单独的元素定义。命令还可以选择包含复选框或分组共享单选按钮。（`<input type="checkbox">` 和 `<input type="radio">`）

|  |  |
| --- | --- |
| 内容类别 | None. |
| 允许的内容 | None，这是一个空元素。 |
| 标签省略 | 必须有开始标签和结束标签。 |
| 允许的父元素 | The `<menu>` element, where that element is in the *popup menu* state. (If specified, the `type` attribute of the `<menu>` element must be `popup`; if missing, the parent element of the `<menu>` must itself be a `<menu>` in the *popup menu* state.) |
| 允许的 ARIA roles | None |
| DOM 接口 | `HTMLMenuItemElement` (en-US) |

属性
--

该标签支持全局属性；特别地， `title` 常常用来描述命令，或者提供有用的注释。

`checked`

布尔值，指示是否选择了命令。只能作为属性使用在 `checkbox` 或 `radio` 中。

`command`

指定一个单独元素的 ID，指示要间接调用的命令。在包含属性的菜单项中也不能使用。`checked`、`disabled`、`icon`、`label`、`radiogroup` 或 `type`。

`default`

布尔值，表示使用与菜单主题元素相同的命令。（如 `button` 或 `input`）。

`disabled`

布尔值，表示命令在当前状态下不可用。请注意，禁用与隐藏不同；禁用的属性适用于任何环境变化可能导致命令相关的上下文中。

`icon`

图片 URL，用于提供图片来表示命令。

`label`

展示给用户一个命令的名字，当 `command` 属性不存在时是必须的。

`radiogroup`

此属性指定要切换为单选按钮时，选定的一组命令的名称。只能作为 radio 的属性使用。

`type`

这个属性指定命令的类型，可以为以下三个命令之一。

* `command`：有关联动作的常规命令。这是缺少时的值默认值。
* `checkbox`：代表一个命令可以在两个不同状态之间的切换。
* `radio`：代表一组单选按钮，可切换为命令中的一个选择。

示例
--

### HTML

```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked>Checkbox</menuitem>
  <hr />
  <menuitem
 type="command"
 label="This command does nothing"
 icon="https://developer.mozilla.org/static/img/favicon144.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem
 type="command"
 label="This command has javascript"
 onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr />
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>
```

### CSS

```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```

### 结果

规范
--

不属于任何现行的规范。

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

不再被任何浏览器支持。唯一支持过该元素的浏览器 Firefox 在版本 85 时也移除了支持。

参见
--

* HTML context menus in Firefox (Screencast and Code)


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

<li>
====

**HTML `<li>` 元素** （或称 *HTML 列表条目元素）* 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (`<ol>`)，一个无序列表 (`<ul>`)，或者一个菜单 (`<menu>`)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。

|  |  |
| --- | --- |
| 内容类别 | 无 |
| 允许的内容 | 流式内容 |
| 标签省略 | 如果列表元素的后面紧随另一个 `<li>` 元素，或者它的父元素中没有更多内容，结束标签可以省略。 |
| 允许的父元素 | `<ul>`、 `<ol>`、或者 `<menu>` 元素。过时的 `<dir>` 也可以作为父元素，但是并不提倡。 |
| DOM 接口 | `HTMLLIElement` |
| 元素类型 | 块级 |

属性
--

这个元素拥有全局属性。

`value`

这个整数型属性表明了本 `<li>` 元素在有序列表（由 `<ol>` 元素定义）中的序号。本属性值只能用数字，即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。**value** 属性对于无序列表 (`<ul>`) 或者菜单 (`<menu>`) 无效。

**备注：** 这个属性在 HTML 4 中废弃，但是在 HTML 5 中重新引入。

**备注：** 在 Gecko 9.0 之前，负值会错误地转换为 0。Gecko 9.0 开始，所有整数值都可以正确解析。

`type`
已弃用

这个字符型属性表明了数字的类型：

* `a`: 小写字母
* `A`: 大写字母
* `i`: 小写罗马数字
* `I`: 大写罗马数字
* `1`: 数字本属性值将覆盖 `<ol>` 元素中的同名属性值（若存在）。

**备注：** 本属性已废弃：使用 CSS `list-style-type` 属性来代替。

示例
--

### 有序列表

```html
<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>
```

上面的 HTML 会输出：

### 无序列表

```html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
```

更多具体示例请见 <ol> 和 <ul> 页面。

规范
--

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

浏览兼容性
-----

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

另见
--

* 其他列表相关的 HTML 元素： `<ul>`, `<li>`, `<menu>`, 和过时的 `<dir>`；
* 可能特定用于排版 `<li>` 元素的 CSS 属性：
    + `list-style` 属性，用于选择序号的展示方式，
    + CSS 计数器，用于处理复杂的嵌套列表，
    + `margin` 属性，用于控制列表条目的缩进。


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

<cite>
======

*HTML 引用（Citation）标签* (**<cite>**) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。

尝试一下
----

|  |  |
| --- | --- |
| 内容类别 | 流内容（Flow Content），叙述内容（Phrasing Content），可触及的内容（Palpable Content）。 |
| 允许的内容 | 叙述内容（Phrasing Content） |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级元素 | 任何接受叙述内容（Phrasing Content）的元素。 |
| DOM 接口 | 这个元素在 Gecko 1.9.2 (Firefox 4) 及之前的版本中 实现为 HTMLElement, Firefox 实现为 HTMLSpanElement。 |

属性
--

这个元素仅包含了 所有的全局属性 (en-US).

**备注：** 适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论，鸣叫，或者书面或口头陈述，等等。

* W3C 规范，对创造性的工作可能包括作者的名字，而 WHATWG 宣布，它可能不包括在任何情况下，一个人的名字。
* 在 blockquote 元素或者 q 元素上使用 cite 或者 blockquote 属性来标明参考的在线资源。
* 为了避免在使用 cite 元素时默认字体为斜体，可以使用 css 的 font-style 属性重新进行设置。

使用说明
----

在 `<cite>` 标签中，可能引用的内容类型如下：

* A book
* A research paper
* An essay
* A poem
* A musical score
* A song
* A play or film script
* A film
* A television show
* A game
* A sculpture
* A painting
* A theatrical production
* A play
* An opera
* A musical
* An exhibition
* A legal case report
* A computer program
* A web site
* A web page
* A blog post or comment
* A forum post or comment
* A tweet
* A Facebook post
* A written or oral statement
* And so forth.

值得注意的是，W3C 标准允许在 `<cite>` 元素中包含引用内容的作者信息。然而 WHATWG 规范不允许在 `<cite>` 元素中出现人名。

要标明`<blockquote>` 或 `<q>`之中内容的引用来源，可以使用元素的`cite`属性。

通常，浏览器默认使用斜体来展示`<cite>`元素中的内容。可以通过指定`<cite>`元素的`font-style`样式来覆盖这种默认行为。

示例
--

```html
More information can be found in <cite>[ISO-0000]</cite>.
```

该段代码的输出如下：

规范
--

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

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

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

参见
--

* 适用于长引用的 `<blockquote>` 元素。
* 适用于行内引用的 `<q>` 元素。


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

<a>：锚元素
=======

HTML **`<a>`** 元素（或称*锚*元素）可以通过它的 `href` 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

`<a>` 中的内容*应该*指明链接的目标。如果存在 `href` 属性，当 `<a>` 元素聚焦时按下回车键就会激活它。

尝试一下
----

属性
--

该元素的属性包含全局属性。

`download`

导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 `filename` 值：

* 如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
    + `Content-Disposition` HTTP 标头。
    + URL 路径的最后一段。
    + 媒体类型。来自 `Content-Type` 标头，`data:` URL 的开头，或 `blob:` URL 的 `Blob.type`。
* `filename`：决定文件名的值。`/` 和 `\` 被转化为下划线（`_`）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。

**备注：**

* `download` 只在同源 URL 或 `blob:`、`data:` 协议起作用。
* 浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前，可能会提示用户，或者自动保存文件，或者自动打开。自动打开要么在外部应用程序中，要么在浏览器本身中。
* 如果 `Content-Disposition` 标头的信息与 `download` 属性不同，产生的行为可能不同：
    + 如果文件头指定了一个 `filename`，它将优先于 `download` 属性中指定的文件名。
    + 如果标头指定了 `inline` 的处置方式，Chrome 和 Firefox 会优先考虑该属性并将其视为下载资源。旧的 Firefox 浏览器（版本 82 之前）优先考虑该标头，并将内联显示内容。

`href`

超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：

* 使用文档片段链接到页面的某一段
* 使用文本片段链接到某一段文字
* 使用媒体片段链接到某个媒体文件
* 使用 `tel:` URL 链接到一个电话号码
* 使用 `mailto:` URL 链接到一个邮箱地址
* 如果 web 浏览器不能支持其他 URL 协议，网站可以使用 `registerProtocolHandler()`

`hreflang`

该属性用于指定所链接到的文档的人类语言。其仅提供建议，并没有内置的功能。其允许的值与全局的 `lang` 属性一致。

`ping`

包含一个以空格分隔的 URL 列表，当跟随超链接时，浏览器会发送带有正文 `PING` 的 `POST` 请求。通常用于跟踪。

`referrerpolicy`

在跟随链接时，referrer 需要发送多少内容：

* `no-referrer`：`Referer` 标头将不会被发送。
* `no-referrer-when-downgrade`：如果没有 TLS（HTTPS），`Referer` 头将不会被发送到源上。
* `origin`：发送的 referrer 将被限制在其页面的来源：协议、主机和端口。
* `origin-when-cross-origin`：发送到其他源的 referrer 将只包含协议、主机和端口，而导航到相同的源仍将包括路径。
* `same-origin`：将向同源地址发送 referrer，但跨源请求不包含 referrer 信息。
* `strict-origin`：当协议安全级别保持不变（HTTPS→HTTPS）时，只将文档的来源作为 referrer 发送，但不要将其发送到安全性较低的目的地（HTTPS→HTTP）。
* `strict-origin-when-cross-origin`（默认）：在执行同源请求时发送完整的 URL，在协议安全级别保持不变时只发送源（HTTPS→HTTPS），对安全性较低的目的地不发送标头（HTTPS→HTTP）。
* `unsafe-url`：表示 referrer 将会包含源*和*路径（但是不包含片段、密码或用户名）。**此值是不安全的**，因为它可能会将受 TLS 保护的资源的源和路径泄露到不安全的源中。

`rel`

该属性指定了目标对象到链接对象的关系。

`target`

该属性指定在何处显示链接的 URL，作为*浏览上下文*的名称（标签、窗口或 `<iframe>`）。以下关键词对加载 URL 的位置有特殊含义：

* `_self`：当前页面加载。（默认）
* `_blank`：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
* `_parent`：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 `_self` 相同。
* `_top`：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 `_self` 相同。

**备注：** 在 `<a>` 元素上使用 `target="_blank"` 隐式提供了与使用 `rel="noopener"` (en-US) 相同的 `rel` 行为，即不会设置 `window.opener`。

`type`

该属性指定在一个 MIME 类型链接目标的形式的媒体类型。没有内置的功能。

### 废弃的属性

`charset`
已弃用

此属性定义链接资源的字符编码。

**备注：** 该属性已作废，**不应使用**。请在链接的 URL 上使用 HTTP `Content-Type` 标头。

`coords`
已弃用

与 `shape` 属性一同使用，以逗号分隔的坐标列表。

`name`
已弃用

在定义一个可能的目标位置时曾经是必需的。在 HTML 4.01 规范中，`<a>` 元素可以同时使用 `id` 和 `name`，只要它们有相同的值。

**备注：** 使用全局属性 `id` (en-US) 来代替。

`rev`
已弃用

指定一个反向链接；与 `rel` 属性作用相反。因为非常混乱而被废弃。

`shape`
已弃用

图像映射（image map）中超链接区域的形状。

**备注：** 使用 `<area>` 元素来代替图像映射。

示例
--

### 链接到绝对地址

#### HTML

```html
<a href="https://www.mozilla.com"> Mozilla </a>
```

#### 结果

### 链接到相对地址

#### HTML

```html
<a href="//example.com">相对于协议的 URL</a>
<a href="/zh-CN/docs/Web/HTML">相对于源的 URL</a>
<a href="./p">相对于路径的 URL</a>
```

```
a {
  display: block;
  margin-bottom: 0.5em;
}
```

#### 结果

### 链接到相同页面的元素上

```html
<!-- <a> 元素链接到下面部分 -->
<p><a href="#Section\_further\_down"> 跳转到下方标题 </a></p>

<!-- 要链接到的标题 -->
<h2 id="Section\_further\_down">更下面的部分</h2>
```

#### 结果

**备注：** 如 HTML 规范所定义的那样，你可以使用 `href="#top"` 或空片段（`href="#"`）来链接到当前页面的顶部。

### 链接到 email 地址

要创建在用户的电子邮件程序中打开的链接，让他们发送一个新的信息，请使用 `mailto:` 协议：

```html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
```

#### 结果

有关 `mailto:` URL 协议的更多细节，比如如何包含主题、正文，或其他预定内容，参考 Email 链接或 RFC 6068。

### 链接到电话号码

```html
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
```

#### 结果

`tel:` 链接行为随设备能力而变化：

* 蜂窝设备会自动拨出号码。
* 大多数操作系统都有可以打电话的程序，如 Skype 或 FaceTime。
* 网站可以通过 `registerProtocolHandler` 拨打电话，如 `web.skype.com`。
* 其他行为包括将号码保存到联系人，或将号码发送到另一个设备。

关于 `tel:` URL 协议的语法、附加特性和其他细节，见 RFC 3966。

### 使用 download 属性将 <canvas> 保存为 PNG 格式

要把 `<canvas>` 元素的内容保存为图片，你可以创建一个链接，其中 `href` 是用 JavaScript 创建的 `data:` URL 的 canvas 数据， `download` 属性提供了下载的 PNG 文件的文件名：

#### 含有保存链接的示例画图程序

##### HTML

```html
<p>
  按下鼠标并移动来完成你的作画。
  <a href="" download="my\_painting.png">下载我的绘画</a>
</p>

<canvas width="300" height="300"></canvas>
```

##### CSS

```css
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
```

##### JavaScript

```js
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI \* 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
```

##### 结果

安全与隐私
-----

`<a>` 元素会对用户的安全和隐私产生影响。请参阅 `Referer` 标头：隐私和安全问题 (en-US)了解情况。

使用 `target="_blank"` 而不使用 `rel="noreferrer"` (en-US) 和 `rel="noopener"` (en-US) 会使网站容易受到 `window.opener` 的 API 攻击。不过请注意，在较新的浏览器版本中，设置 `target="_blank"` 隐式地提供了与设置 `rel="noopener"` 同样的保护。详情见浏览器兼容性。

无障碍
---

### 强调链接文本

**链接内的内容应表明链接的去向**，即使脱离了上下文。

#### 无障碍性差的链接文本

一个通常的错误在于只链接了“点击这里”或“这里”词语：

```html
<p><a href="/products">在这里</a>了解到有关产品的更多信息。</p>
```

##### 结果

#### 强调链接文本

幸运的是，这是一个很容易解决的问题，而且实际上比无障碍性差的版本要短一些！

```html
<p>了解<a href="/products">有关产品</a>的更多信息。</p>
```

##### 结果

辅助软件有快捷键来列出页面上的所有链接。然而，强大的链接文本对所有用户都有好处。“列出所有链接”的快捷方式模仿了视力正常的用户快速扫描页面的方式。

### onclick 事件

锚点元素经常被滥用为假按钮，将其 `href` 设置为 `#` 或 `javascript:void(0)` 以防止页面刷新，然后监听其 `click` 事件。

这些假的 `href` 值在复制/拖动链接、在新的标签/窗口中打开链接、书签，或当 JavaScript 正在加载、出错或被禁用时，会导致意外行为。它们还向辅助技术（如屏幕阅读器）传达不正确的语义。

请使用 `<button>` 代替。一般来说，**你应该只使用超链接来导航到一个真正的 URL**。

### 外部链接与链接至非 HTML 资源

通过 `target="_blank"` 在新标签/窗口中打开的链接，或指向下载文件的链接，应说明在跟踪链接时将发生什么。

当一个新的标签、窗口或应用程序意外打开时，有低视力状况的人、借助屏幕阅读技术导航的人或有认知障碍的人可能会感到困惑。老式的读屏软件甚至可能不会宣布这种行为。

#### 打开新标签页/新窗口的链接

```html
<a target="\_blank" href="https://www.wikipedia.org">
  Wikipedia（将在新标签页中打开）
</a>
```

##### 结果

#### 链接至非 HTML 资源

```html
<a href="2017-annual-report.ppt"> 2017 年度报告（PowerPoint） </a>
```

如果使用图标标志链接行为，确保其具有*替代文本*：

```html
<a target="\_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="（在新标签页中打开）" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 年度报告
  <img alt="（PowerPoint 文件）" src="ppt-icon.svg" />
</a>
```

##### 结果

* WebAIM: 链接和超文本 - 超文本链接
* MDN / 理解 WCAG，准则 3.2 (en-US)
* G200：只有在必要时才从链接中打开新窗口和标签
* G201：在打开新窗口时给用户预先警告
### 跳转链接

**跳转链接**（skip link）是在 `<body>` 内容中尽可能早地放置一个链接，指向页面主要内容的开头。通常情况下，CSS 会将跳转链接隐藏在屏幕之外，直到被聚焦。

```html
<body>
  <a href="#content" class="skip-link">跳转至主要内容</a>

  <header>…</header>

  <main id="content"></main>
  <!-- 跳转链接会跳转至这里 -->
</body>
```

```css
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}
```

#### 结果

跳转链接让键盘用户绕过多个页面中重复的内容，如标题导航。

跳转链接对于借助辅助技术（如开关控制、语音命令或口棒/头棒）进行导航的人来说特别有用，因为在这种情况下，在重复的链接中移动的行为可能很费力。

* WebAIM：“跳过导航”链接
* 如何使用跳过导航链接
* MDN / 理解 WCAG，准则 2.4 (en-US)
* 理解成功标准 2.4.1
### 尺寸和距离

#### 尺寸

交互式元素，如链接，应提供足够大的区域，以便于激活它们。这有助于各种人，包括那些有运动控制问题的人和那些使用不精确输入的人，如触摸屏。建议最小尺寸为 44×44 CSS 像素。

散文内容中的纯文本链接不受这一要求影响，但确保有足够的文本超链接，以便于激活，仍然是一个好主意。

* 理解成功标准 2.5.5：目标尺寸
* 目标尺寸和标准 2.5.5
* 快速测试：大型触摸目标

#### 距离

交互式元素，如链接，放置在视觉上很近的地方，应该有空间将它们分开。间隔有助于有运动控制问题的人，否则他们可能会意外地激活错误的互动内容。

间隔可以使用 CSS 属性来创建，如 `margin`。

* Hand tremors 和“巨大按钮问题”
技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、
 短语内容、
 交互内容、可感知内容
  |
| 允许的内容 | 透明的，但是后代不可以为交互内容或
 a 元素，且后代不可以指定 tabindex 属性
  |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容的元素，或任何接受流式内容但不是另外一个 `<a>` 元素的元素。 |
| 隐含的 ARIA 角色 | 当 `href` 属性存在时，为 `link` (en-US)，否则没有相应的角色 |
| 允许的 ARIA 角色 | 当 `href` 属性存在时：* `button`
* `checkbox` (en-US)
* `menuitem` (en-US)
* `menuitemcheckbox` (en-US)
* `menuitemradio` (en-US)
* `option` (en-US)
* `radio` (en-US)
* `switch` (en-US)
* `tab` (en-US)
* `treeitem` (en-US)

当 `href` 属性不存在时：* 任何
 |
| DOM 接口 | `HTMLAnchorElement` (en-US) |

规范
--

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

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

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

参见
--

* `<link>` 与 `<a>` 类似，但用于用户看不到的元数据超链接。
* `:link` 是一个 CSS 伪类，将匹配 `<a>` 元素，其 `href` 属性中的 URL 用户尚未访问。
* `:visited` 是一个 CSS 伪类，将匹配 `<a>` 元素，其 `href` 属性中的 URL 被用户在过去访问过。
* `:any-link` 是一个 CSS 伪类，将匹配带有 `href` 属性的 `<a>` 元素。
* 文本片段是添加到 URL 的用户代理指令，允许内容作者链接到页面上的特定文本，而不需要 ID。


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

<option>
========

**HTML 元素 *`<option>`*** 用于定义在 `<select>`, `<optgroup>` 或 `<datalist>` 元素中包含的项。`<option>` 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。

尝试一下
----

* *内容类别* 无
* *允许的内容*带有最终转义字符（例如 `é`）的文本
* *标记省略* 开始标记是必需的。如果此元素紧接着是另一个 `<option>` 元素或`<optgroup>`, 或者父元素没有其他内容，则结束标记是可选的。
* *Implicit ARIA role* `option` (en-US)
* *Permitted ARIA roles* No `role` permitted
* *允许的父元素* A `<select>`, an `<optgroup>` or a `<datalist>` element.
* *DOM 接口* `HTMLOptionElement`
属性
--

此元素包括全局属性。

`disabled`

如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的 `<optgroup>` 元素，则这个元素仍然是禁用的。

`label`

这个属性是用于表示选项含义的文本。如果 **`label`** 属性没有定义，它的值就是元素文本内容。

`selected`

这个布尔属性存在时表明这个选项是否一开始就被选中。如果 `<option>` 元素是 `<select>` 元素的子元素，并且 `<select>` 元素的 `multiple` 属性没有设置，则 `<select>` 元素中只有一个 `<option>` 元素可以拥有 `selected` 属性。

`value`

这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

示例
--

参见 `<select>` 示例。

规范
--

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

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

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

参见
--

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


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

<abbr>
======

**HTML 缩写元素**（**`<abbr>`**）用于代表缩写，并且可以通过可选的 `title` 属性提供完整的描述。若使用 `title` 属性，则它必须且仅可包含完整的描述内容。

尝试一下
----

这篇文章：*How to mark abbreviations and make them understandable* 是一份学习使用 `<abbr>` 与其他相关元素的指南。

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

属性
--

这个元素只有全局属性。在同 `<abbr>` 元素一起使用的时候，`title` 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示，在鼠标指针覆盖到该元素时显示作为一个提示。

你使用的每一个 `<abbr>` 元素与其他同类元素都是相互独立的，为其中一个提供 `title` 不会自动把相同的附加文字依附到其他内容文字相同的元素上。

用法注解
----

### 典型使用场景

当然，我们不是所有的缩写都要使用`<abbr>`标记。但是其在下面一些场景很有帮助：

* 当你想为缩写在文档流外提供一段扩展或定义的时候，为 `<abbr>` 设置一个合适的`title`。
* 在定义一个读者可能不太熟悉的缩写时，使用 `<abbr>` 和`title`属性或内联的文本来表现这个术语。
* 当文本中出现需要进行语义上的标注的缩写词时，`<abbr>`元素可用于依次将其作用样式和脚本。
* 可以将 `<abbr>` 与 `<dfn>` 配合使用来建立缩写或首字母缩略词的定义。请参阅下面的示例 定义一个缩写。
### 语法注意事项

在有 单复数 的语言中（即物体数量会影响句子语法的语言）， `<abbr>` 元素和其中的 `title` 属性应当单复数一致。这在阿拉伯语这样超过二数的语言中非常重要，在英语中也有一定的影响。

默认样式
----

虽然完全为了网站制作者的方便，所有的浏览器都默认把这个元素显示为行内元素 (`display``: inline`) ，但是默认样式在不同浏览器中存在差别：

* 一些浏览器，比如 IE，对它的添加的样式和`<span>` 元素的样式完全相同。
* Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线。
* 一些浏览器不仅添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免这种样式，在 CSS 中添加 `font-variant``: none` 。
示例
--

### 创建语义化的缩写

想要创建不含解释或描述性的缩写，就直接用`<abbr>`不添加任何属性。请看下面的例子。

#### HTML

```html
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
```

#### 结果

### 缩写样式

你可以像这个简单的例子一样，用 CSS 来为缩写做一个样式。

#### HTML

```html
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
```

#### CSS

```css
abbr {
  font-variant: all-small-caps;
}
```

#### 结果

### 提供扩展

添加一个 `title` 属性，为缩写提供定义或拓展。

#### HTML

```html
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
```

#### 结果

### 定义一个缩写

`<abbr>` 与 `<dfn>` 联合使用可以定义一个更加正式的缩写，如下：

#### HTML

```html
<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>)
  is a document that outlines in detail how a technology or API is intended to
  function and how it is accessed.
</p>
```

#### 结果

可以在 *How to mark abbreviations and make them understandable* 中浏览更多深层次的实例。

无障碍问题
-----

在缩略词第一次出现在页面的时候，将它书写完整对帮助人们理解很有用处的，特别是内容是技术或者工业术语

#### Example

```html
<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>
```

这对于不熟悉内容中讨论的术语或概念的人，对语言不熟悉的人以及具有认知问题的人特别有用。

规范
--

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

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

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

参见
--

* 高级文字格式 - 使用 `<abbr>` 元素
* 其他传达文本级语义的元素：`<a>`, `<em>`, `<strong>`, `<small>`, `<cite>`, `<q>`, `<dfn>`, `<time>`, `<code>`, `<var>`, `<samp>`, `<kbd>`, `<sub>`, `<sup>`, `<b>`, `<i>`, `<mark>`, `<ruby>`, `<rp>`, `<rt>`, `<bdo>`, `<span>`, `<br>`, `<wbr>`.
* 已被弃用的 `<acronym>` 元素，原被用于展示首字母缩写。其作用被归入了 `<abbr>` 的作用中。


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

<ol>
====

**HTML `<ol>` 元素**表示有序列表，通常渲染为一个带编号的列表。

尝试一下
----

|  |  |
| --- | --- |
| 内容类别 (en-US) | Flow content (en-US), and if the `<ol>` element's children include at least one `<li>` element, palpable content. |
| 允许的内容 | Zero or more `<li>`, `<script>` and `<template>` elements. |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级 | Any element that accepts flow content. |
| 隐含的 ARIA 角色 | `list` |
| 允许的 ARIA 角色 | `directory` (en-US), `group` (en-US), `listbox`, `menu` (en-US), `menubar` (en-US), `none` (en-US), `presentation` (en-US), `radiogroup` (en-US), `tablist` (en-US), `toolbar` (en-US), `tree` (en-US) |
| DOM 接口 | `HTMLOListElement` (en-US) |

属性
--

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

`reversed`

此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。

`start`

一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 `type` 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始，都应当使用 `start="4"`。

**备注：** 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。

`type`

设置编号的类型：

* `a` 表示小写英文字母编号
* `A` 表示大写英文字母编号
* `i` 表示小写罗马数字编号
* `I` 表示大写罗马数字编号
* `1` 表示数字编号（默认）编号类型适用于整个列表，除非在 `<ol>` 元素的 `<li>` 元素中使用不同的 `type` 属性。

**备注：** 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS `list-style-type` 属性替代。

使用说明
----

通常，有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。

`<ol>` 和 `<ul>` 元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套。

`<ol>` 和 `<ul>` 元素都表示列表。区别在于，`<ol>` 元素的有序列表的顺序是有意义的。举一些例子：

* 烹饪食谱中的各个步骤
* 指路时的各处转弯方向
* 营养信息标签上 按含量排序的成分列表

至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 `<ol>` 元素，否则使用 `<ul>` 更合适。

**备注：** “更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。
 如果只有一个元素，以至于根本不存在什么顺序可言，可能最好先考虑是否应当使用列表元素，以及是否要在列表最后增加一些占位的空项。

示例
--

### 简单示例

```html
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>
```

以上 HTML 输出如下：

### 使用小写罗马数字编号

```html
<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol>
```

以上 HTML 输出如下：

### 使用 `start` 属性

```html
<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>
```

以上 HTML 输出如下：

### 嵌套列表

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```

以上 HTML 输出如下：

### 嵌套有序列表和无序列表

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```

以上 HTML 输出如下：

规范
--

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

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

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

相关
--

* 其他列表相关的 HTML 元素：`<ul>`, `<li>`, `<menu>` and the obsolete `<dir>`;
* 对 `<ol>` 元素常用的 CSS 属性：
    + the `list-style` 属性，有用的选择序数的显示方式，
    + CSS 计数器 (en-US), 用于处理复杂的嵌套列表，
    + `line-height` 属性，可以模拟过时的 `compact` 属性；
    + `margin` 属性，用来控制列表的缩进。


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

<tt>
====

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

概述
--

HTML 电报文本元素 (`<tt>`) 产生一个内联元素，使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版，使其等宽展示，就像电报那样。使用 `<code>` 元素来展示等宽文本可能更加普遍。

**备注：** 这个元素已废弃。使用更加适当的元素，例如带有 CSS 的 `<code>` 或者 `<span>` 来代替。

属性
--

这个元素除了全局属性之外，没有其他属性，所有元素都一样。

DOM 接口
------

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

**备注：** Gecko 1.9.2（包含）之前，Firefox 为这个元素实现了 `HTMLSpanElement` 接口。

示例
--

```html
<p>
  Enter the following at the telnet command prompt: <code>set localecho</code
 ><br />

  The telnet client should display: <tt>Local Echo is on</tt>
</p>
```

### 结果

 Enter the following at the telnet command prompt: `set localecho`
 The telnet client should display: `Local Echo is on`

注
-

* CSS 规范可以为 `tt` 选择器定义，来覆盖浏览器的默认字体。用于设置的偏好可能优先于指定的 CSS。
* 虽然这个元素没有在 HTML 4.01 规范中废弃，为了支持样式表，不建议使用它。
另见
--

* `<code>`
* HTML 4.01 规范：字体样式


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

<picture>：picture 元素
====================

**HTML `<picture>` 元素**通过包含零或多个 `<source>` 元素和一个 `<img>` 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 `<source>` 元素，如果没有匹配的，就选择 `<img>` 元素的 `src` 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。

尝试一下
----

要决定加载哪个 URL，user agent 检查每个 `<source>` 的 `srcset`、`media` 和 `type` 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

`<img>` 元素有两个目的：

* 描述图像的大小和其他属性及其呈现。
* 在所有的 `<source>` 元素提供的图片都不可用时提供备选图片。

`<picture>` 的常见使用场景：

* **艺术指导**（Art direction）。针对不同 `media` 条件裁剪或修改图像（例如，在较小的显示器或图像的详细内容太多时显示较为图像的简单版本）。
* 遇到不支持的特定格式时，**提供替代的图像格式**。

**备注：** 例如，像 AVIF 或 WEBP 这样的新格式具有诸多优点，但可能不受浏览器的支持。可以在图像文件格式和格式指南中找到支持的图像格式的列表。
* 通过加载最适合观看者显示的图像来**节省带宽和提高页面加载速度**。

如果要为高 DPI（Retina）显示提供更高像素密度的图像版本，请在 `<img>` 元素上使用 `srcset`。这使得浏览器可以在节约流量模式下选择低像素密度版本，且不需要你编写明确的 `media` 条件。

|  |  |
| --- | --- |
| 内容分类 | 流内容，表述内容，嵌入内容。 |
| 允许的内容 | 零或多个 `<source>` 元素，以及紧随其后的一个 `<img>` 元素，可以混合一些脚本支持的元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何可以包含嵌入内容的元素。 |
| 允许的 ARIA roles | 无 |
| DOM 接口 | `HTMLPictureElement` (en-US) |

属性
--

这个元素只包含全局属性。

用法提示
----

你可以使用 `object-position` 属性调整元素框架内图像的位置，用 `object-fit` 属性控制图片如何调整大小来适应框架。

**备注：** 在子 `<img>` 元素上使用这些属性，不是 `<picture>` 元素。

示例
--

这些示例演示了 `<source>` 元素的不同属性如何更改`<picture>`中图像的选择。

### `media` 属性

`media` 属性允许你提供一个用于给用户代理作为选择 `<source>` 元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 `false`，那么这个 `<source>` 元素会被跳过。

```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

### `type` 属性

`type` 属性允许你为 `<source>` 元素的 `srcset` 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 `<source>` 元素会被跳过。

```html
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>
```

规范
--

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

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

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

参考链接
----

* `<img>` 元素
* `<source>` 元素
* 在其框架内定位和缩放图片：`object-position` 和 `object-fit`


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

<meter>
=======

HTML **`<meter>`** 元素用来显示已知范围的标量值或者分数值。

尝试一下
----

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), labelable content, palpable content. |
| Permitted content | Phrasing content (en-US), but there must be no `<meter>` element among its descendants. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts phrasing content (en-US). |
| Permitted ARIA roles | None |
| DOM interface | `HTMLMeterElement` (en-US) |

属性
--

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

`value`

当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0。如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。

**备注：** 除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1。

`min`

值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。

`max`

值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。

`low`

定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。

`high`

定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。

`optimum`

这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。

`form`

该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。

示例
--

### 简单示例

#### HTML

```html
<p>
  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
</p>
```

#### 结果

在 Google Chrome 浏览器上，计量器结果如下：

![current look of 'meter' in Google Chrome](/zh-CN/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

### 高低值区间示例

注意本例中 min 属性被省略，这是允许的，默认值为 0。

#### HTML

```html
<p>
  He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
</p>
```

#### 结果

Google Chrome 浏览器中，计量器显示效果如下：

![red meter in Google Chrome](/zh-CN/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

规范
--

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

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

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

参见
--

* `<progress>`


<base>：文档根 URL 元素 - HTML（超文本标记语言）

<base>：文档根 URL 元素
=================

**HTML <base> 元素** 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

一个文档的基本 URL，可以通过使用 `document.baseURI` (en-US) 的 JS 脚本查询。如果文档不包含 `<base>` 元素，`baseURI` 默认为 `document.location.href`。

|  |  |
| --- | --- |
| 内容类别 | 元数据内容。 |
| 合法的内容 | 无，它是一个empty element |
| 标签省略 | 该标签不能有结束标签。 |
| 合法的父级 | 任何不带有任何其他 `<base>` 元素的`<head>` 元素 |
| 合法的 ARIA 角色 | 无 |
| DOM 接口 | `HTMLBaseElement` |

属性
--

该标签包含全局属性 (en-US)。

如果指定了以下任一属性，这个元素**必须**在其他任何属性是 URL 的元素之前。例如：`<link>` 的 `href` 属性。

`href`

用于文档中相对 URL 地址的基础 URL。允许绝对和相对 URL。

`target`

默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 `<a>` 或表单 `<form>` 导致导航被激活时显示其结果。该属性值定位到*浏览上下文*（例如选项卡，窗口或内联框 `<iframe>`）。以下的关键字指定特殊的意思：

* `_self`: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
* `_blank`: 载入结果到一个新的未命名的浏览上下文。
* `_parent`: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和`_self`一样。
* `_top`: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和\_self 一样。

使用说明
----

### 多个 `<base>` 元素

如果指定了多个 `<base>` 元素，只会使用第一个 `href` 和 `target` 值，其余都会被忽略。

### 页内锚

指向文档中某个片段的链接，例如 `<a href="#some-id">` 用 `<base>` 解析，触发对带有附加片段的基本 URL 的 HTTP 请求。

例如：给定 `<base href="https://example.com">`

以及此链接 `<a href="#anchor">Anker</a>`

链接指向 `https://example.com/#anchor`

### Open Graph

Open Graph 标签不接受 `<base>`，并且应该始终具有完整的绝对 URL。例如：
```

<meta property="og:image" content="https://example.com/thumbnail.jpg">
```

示例
--

```html
<base href="http://www.example.com/" />
<base target="\_blank" />
<base target="\_top" href="http://www.example.com/" />
```

规范
--

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

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

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


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

<menu>
======

**HTML `<menu>` 元素**呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

|  |  |
| --- | --- |
| Content categories | Flow content. Additionally, if in the *list menu* state, palpable content. (*list menu* is the default state, unless the parent element is a `<menu>` in the *context menu* state.) |
| Permitted content | If the element is in the *list menu* state: flow content, or alternatively, zero or more occurrences of `<li>`, `<script>`, and `<template>`.If the element is in the *context menu* state: zero or more occurrences, in any order, of `<menu>` (*context menu* state only), `<menuitem>`, `<hr>`, `<script>`, and `<template>`. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts flow content. |
| Permitted ARIA roles | None |
| DOM interface | `HTMLMenuElement` (en-US) |

属性
--

该元素支持全局属性，以及以下属性。

`label`
已弃用

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a `<menu>` in the *context menu* state.

`type`

This attribute indicates the kind of menu being declared, and can be one of two values.

* `context`
已弃用
 : Indicates the *popup menu* state, which represents a group of commands activated through another element. This might be as a button menu referenced by a `menu` attribute of a `<button>` element, or as context menu for an element with a `contextmenu` (en-US) attribute. This value is the default if the attribute is missing and the parent element is also a `<menu>` element.
* `toolbar`: Indicates the *toolbar* state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of `<li>` elements, or, if the element has no `<li>` element children, flow content describing available commands. This value is the default if the attribute is missing.

使用说明
----

`<menu>` 和 `<ul>` 元素都呈现了无序列表元素。最主要的区别是，`<ul>` 主要是为了展示选项，而 `<menu>` 则是为了交互。

An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.

**Context menus** consist of a `<menu>` element which contains `<menuitem>` elements for each selectable option in the menu, `<menu>` elements for submenus within the menu, and `<hr>` elements for separator lines to break up the menu's content into sections. Context menus are then attached to the element they're activated from using either the associated element's `contextmenu` attribute or, for button-activated menus attached to `<button>` elements, the `menu` attribute.

Toolbar menus consist of a `<menu>` element whose content is described in one of two ways: either as an unordered list of items represented by `<li>` elements (each representing a command or option the user can utilize), or (if there are no `<li>` elements), flow content describing the available commands and options.

这个元素在 HTML4 中被弃用，但在 HTML 5.1 和 HTML living standard 中被重新推荐使用。这份文档描述的是当前 Firefox 上的实现。根据 HTML 5.1 的规定，`<list>` 元素的类型可能会更改为`<toolbar>`。

示例
--

### 右键菜单

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

#### HTML

```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr />
  <menuitem>Separated action</menuitem>
</menu>
```

#### CSS

```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```

#### 结果

### 菜单按钮

**警告：** Menu buttons haven't been implemented in any known browsers yet. The `type` attribute on the `<menu>` element is now obsolete.

**警告：** `<menuitem>` element is obsolete.

#### HTML

```html
<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="popup-menu">Dropdown</button>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr />
  <menuitem>Separated action</menuitem>
</menu>
```

#### 结果

### Toolbar

**警告：** Toolbar menus haven't been implemented in any known browsers yet.

#### HTML

```html
<!-- A context menu for a simple editor,
 - containing two menu buttons. -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>
```

#### 结果

规范
--

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

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

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

参见
--

* 其他与列表相关的元素：`<ol>`、`<ul>` 和 `<li>`。


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

<hgroup>
========

**`<hgroup>`** HTML 元素代表文档标题和与标题相关联的内容，它将一个 `<h1>–<h6>` 元素与一个或多个 `<p>` 元素组合在一起。

尝试一下
----

属性
--

这个元素仅包含全局属性。

使用说明
----

`<hgroup>` 元素允许将一个标题与任意次要内容（例如子标题、副标题或口号）组合在一起。在 `<hgroup>` 中，这些类型的内容也表示为 `<p>` 元素。

`<hgroup>` 本身对网页的的文档大纲没有任何影响。而 `<hgroup>` 中所允许的单个标题则会被用于文档大纲。

示例
--

```html
<!doctype html>
<title>HTML 标准</title>
<body>
  <hgroup id="document-title">
    <h1>HTML：现行标准</h1>
    <p>更新于 2022 年 7 月 12 日</p>
  </hgroup>
  <p>文档的介绍。</p>
  <h2>目录</h2>
  <ol id="toc">
    …
  </ol>
  <h2>第一节</h2>
  <p>第一节的介绍。</p>
</body>
```

无障碍考虑
-----

目前，`<hgroup>` 没有无障碍的语义。只有其中的元素（标题和可选的段落）会被暴露给浏览器的无障碍 API。

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、标题内容、可感知内容。 |
| 允许的内容 |
 零个或多个 `<p>` 元素，后跟一个
 `<h1>` (en-US)、`<h2>` (en-US)、`<h3>` (en-US)、`<h4>` (en-US)、`<h5>` (en-US)
 或 `<h6>` (en-US) 元素，后跟零个或多个
 `<p>` 元素。
  |
| 省略标签 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受流式内容的元素。 |
| 隐式 ARIA 角色 | 没有对应的角色 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

规范
--

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

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

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

参见
--

* 与本章节相关的其他元素：`<body>`、`<article>`、`<section>`、`<aside>`、`<h1>` (en-US)、`<h2>` (en-US)、`<h3>` (en-US)、`<h4>` (en-US)、`<h5>` (en-US)、`<h6>` (en-US)、`<nav>`、`<header>`、`<footer>`、`<address>`；
* HTML 文档的章节和大纲。


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

<pre>
=====

**HTML <pre>** 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

尝试一下
----

**备注：** 你需要将该元素里的 '<' 字符转义为 '<' 以保证代码里的关闭代码不被浏览器解释为标签。

|  |  |
| --- | --- |
| 内容类别 | 流内容 ( flow content) , 可触知的内容 (palpable content). |
| 允许的 内容 | Phrasing content. |
| 省略标签 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的 父元素 | 任何可以接受流内容 ( flow content) 的元素 |
| 允许的 ARIA 角色 | 任何 |
| DOM 接口 | `HTMLPreElement` (en-US) |

属性
--

这个元素只具有全局属性。

`cols`
非标准

已弃用

定义每行的最大字符数。这是一个非标准的属性，作用与`width`相同。要实现这样的效果，应该使用 CSS。

`width`
已弃用

包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用 CSS。

`wrap`
非标准

提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用 CSS。

示例
--

### HTML

```html
<p>Using CSS to change the font color is easy.</p>
<pre>
body {
  color: red;
}
</pre>
```

### 结果

无障碍
---

It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.

People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.

A combination of the `<figure>` and `<figcaption>` elements, supplemented by a combination of an `id` and the ARIA `role` and `aria-labelledby` attributes allow the preformatted text to be announced as an image, with the `figcaption` serving as the image's alternate description.

### 示例
```

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  ___________________________
< I'm an expert in my field. >
  ---------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
  </figcaption>
</figure>
```

* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
规范
--

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

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

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

参见
--

* CSS: `white-space`, `word-break`


<dir>：目录元素 - HTML（超文本标记语言）

<dir>：目录元素
==========

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

已废弃的 **HTML 目录元素**（**`<dir>`**）被作为一个文件和/或文件夹的目录的容器，可能还有 用户代理 应用的样式与图标。Do not use this obsolete element; instead, you should use the `<ul>` element for lists, including lists of files.

**备注：** 不要使用这个元素。虽然它出现在早期的 HTML 规范中，它已经在 HTML4 中废除了，并且在 HTML5 (en-US) 中过时。使用 `<ul>` 来代替。

DOM 接口
------

元素实现了 `HTMLDirectoryElement` 接口。

属性
--

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

`compact`

这个布尔属性表明，列表应该以紧凑样式显示。这个属性的实现取决于浏览器，并且不在所有浏览器中工作。

**备注：** 用法注解：不要使用这个属性，因为它已经废除了： `<dir>` 元素应该使用 CSS 来设计。为了提供 `compact` 属性的相似效果，可以使用 CSS 属性 `line-height`，值为 `80%`。

另见
--

* 其他和列表相关的 HTML 元素： `<ol>`，`<ul>`，`<li>`，`<menu>`；
* 特定用于 `<dir>` 元素的 CSS 属性：
    + `list-style` 属性，用于选择序号展示的方式。
    + CSS 计数器 (en-US)，用于处理复杂的嵌套列表。
    + `line-height` 属性，用于模拟废除的 `compact` 属性。
    + `margin` 属性，用于控制列表的缩进。


<h1>–<h6>：HTML 区域标题元素 - HTML（超文本标记语言）

<h1>–<h6>：HTML 区域标题元素
=====================

**HTML `<h1>`–`<h6>` 标题 (Heading) 元素**呈现了六个不同的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低。

尝试一下
----

|  |  |
| --- | --- |
| 内容类别 | 流式内容，标题内容，可触知的内容。 |
| 允许内容 | 短语内容 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受流内容的元素；不要把它作为 `<hgroup>` 元素的子元素，这种做法已经被废弃了。 |
| 允许的 ARIA roles | `tab` (en-US), `presentation` (en-US) |
| DOM 接口 | `HTMLHeadingElement` (en-US) |

属性
--

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

**备注：** align 属性已废弃；不要继续使用它。

使用要点
----

* 用户代理可以使用标题信息，例如自动构建文档的目录。
* 不要为了减小标题的字体而使用低级别的标题，而是使用 CSS `font-size` 属性。
* 避免跳过某级标题：始终要从 `<h1>` 开始，接下来依次使用 `<h2>` 等等。
示例
--

### 所有标题

下面的代码展示了所有可用的标题级别。

```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```

下面是这些代码的结果：

### 示例页面

下面的代码展示了几个具有部分内容的标题。

```html
<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h3>Example 2</h3>
<p>Some text here...</p>

<h2>See also</h2>
<p>Some text here...</p>
```

下面是代码的运行结果：

无障碍问题
-----

### 导航

对于使用屏幕阅读软件的用户而言，一种常见的导航方式是从一个标题跳到另一个标题，以快速确定页面的内容。因此，不要跳过一个或多个标题级别。因为这样做可能会造成混乱，使用户困惑于缺少的标题在哪里。

#### 错误用法

```html
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
```

#### 正确用法

```html
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
```

#### 嵌套

标题可以嵌套其小节，以反映页面的结构。大多数屏幕阅读器可以生成页面上所有标题的列表，从而帮助用户快速确定内容的层次结构：

1. `h1` Beetles
    1. `h2` Etymology
    2. `h2` Distribution and Diversity
    3. `h2` Evolution
        1. `h3` Late Paleozoic
        2. `h3` Jurassic
        3. `h3` Cretaceous
        4. `h3` Cenozoic
    4. `h2` External Morphology
        1. `h3` Head
            1. `h4` Mouthparts
        2. `h3` Thorax
            1. `h4` Prothorax
            2. `h4` Pterothorax
        3. `h3` Legs
        4. `h3` Wings
        5. `h3` Abdomen

当小节中嵌套子标题时，若关闭了某个小节，则其中的嵌套的子标题可能会被“跳过”。

* Headings • Page Structure • WAI Web Accessibility Tutorials
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0
### 标注章节内容

屏幕阅读软件用户的另一种常用导航技术是生成内容分区的列表，并使用其确定页面布局

Sectioning content can be labeled using a combination of the `aria-labelledby` and `id` attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

#### 示例

```html
<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>
```

In this example, screen reading technology would announce that there are two `<nav>` sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each `nav` element's contents to determine their purpose.

* Using the aria-labelledby attribute
* Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials
规范
--

| Specification |
| --- |
| HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |

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

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

参见
--

* `<p>`
* `<div>`
* `<section>`


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

<canvas>
========

`<canvas>` 元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

属性
--

本元素支持全局属性。

`height`

该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。

`moz-opaque`
非标准

已弃用

通过设置这个属性，来控制 canvas 元素是否半透明。如果你不想 canvas 元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。

`width`

该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

注意事项
----

### 标签需要闭合

不同于 `<img>` 元素， `<canvas>`元素需要有闭合标签 (`</canvas>`).

### 设置画布 (canvas) 的大小

直接在 html 标签中设置 width 和 height 属性或者使用 JavaScript 来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。

可以使用 CSS 的 width 和 height 以在渲染期间缩放图像以适应样式大小，就像<img>元素一样。如果你发现<canvas>元素中展示的内容变形，你可以通过<canvas>自带的 height 和 width 属性进行相关设置，而不要使用 CSS。

### 最大的画布尺寸

画布的最大的尺寸取决于浏览器，下表的结论来自别处 (e.g. Stack Overflow):

| 浏览器 | 最大高度 | 最大宽度 | 最大面积 |
| --- | --- | --- | --- |
| Chrome | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (i.e., 16,384 x 16,384) |
| Firefox | 32,767 pixels | 32,767 pixels | 472,907,776 pixels (i.e., 22,528 x 20,992) |
| Safari | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (i.e., 16,384 x 16,384) |
| IE | 8,192 pixels | 8,192 pixels | ? |

示例
--

### HTML

```html
<canvas id="canvas" width="300" height="300">
  抱歉，你的浏览器不支持 canvas 元素
  （这些内容将会在不支持<canvas%gt;元素的浏览器或是禁用了 JavaScript
  的浏览器内渲染并展现）
</canvas>
```

### JavaScript

使用`HTMLCanvasElement.getContext()`获得一个绘图上下文并开始绘制

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
```

### 结果

无障碍
---

`<canvas>` 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像 HTML 那样具有语义并能暴露给无障碍工具。以下指南可以帮助你更方便地访问它。

* MDN Hit regions and accessability
* Canvas accessibility use cases
* Canvas element accessibility issues
* HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner
* Best practices for interactive canvas elements
规范
--

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

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

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

参见
--

* MDN canvas portal
* Canvas tutorial
* Canvas cheat sheet
* Canvas-related demos
* Canvas introduction by Apple


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

<map>：图像映射元素
============

HTML **`<map>`** 元素与 `<area>` 元素一起使用来定义一个图像映射（一个可点击的链接区域）。

尝试一下
----

属性
--

这个元素包含全局属性。

`name`

`name` 属性给予该映射引用的名称，这个属性必须存在，值不得为空并且不能带空格。`name` 属性的值不得与同文档中其他 `<map>` 元素的该属性值相同，如果还指定了 `id` 属性，则两个属性的值必须相同。

示例
--

### 含有两个区域的图像映射

单击左侧的鹦鹉访问 JavaScript 页面，单击右侧的鹦鹉访问 CSS 页面。

#### HTML

```html
<!-- 图片由 Unsplash 上的 Juliana e Mariana Amorim 创作 -->
<map name="primary">
  <area
 shape="circle"
 coords="75,75,75"
 href="https://developer.mozilla.org/docs/Web/JavaScript"
 target="\_blank"
 alt="JavaScript" />
  <area
 shape="circle"
 coords="275,75,75"
 href="https://developer.mozilla.org/docs/Web/CSS"
 target="\_blank"
 alt="CSS" />
</map>
<img
 usemap="#primary"
 src="parrots.jpg"
 alt="两只鹦鹉的照片，大小为 350 x 150" />
```

#### 结果

技术概要
----

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

规范
--

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

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

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

参见
--

* `<a>`
* `<area>`


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

<marquee>
=========

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

HTML marquee 元素（`<marquee>`）用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。

**警告：** `<marquee>` 元素已经**过时**，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是你可以对你的用户做最糟糕的事情之一，所以请不要这样做。

属性
--

`behavior`

设置文本在 marquee 元素内如何滚动。可选值有 `scroll`，`slide` 和 `alternate`。如果未指定值，默认值为 `scroll`。

`bgcolor`

通过颜色名称或十六进制值设置背景颜色。

`direction`

设置 marquee 内文本滚动的方向。可选值有 `left`, `right`, `up` and `down。`如果未指定值，默认值为 `left`。

`height`

以像素或百分比值设置高度。

`hspace`

设置水平边距。

`loop`

设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。

`scrollamount`

设置每次滚动时移动的长度（以像素为单位）。默认值为 6。

`scrolldelay`

设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意，除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。

`truespeed`

默认情况下，会忽略小于 60 的 scrolldelay 值。如果存在 truespeed，那些值不会被忽略。

`vspace`

以像素或百分比值设置垂直边距。

`width`

以像素或百分比值设置宽度。

事件回调
----

`onbounce`

当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。

`onfinish`

当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。

`onstart`

当 marquee 开始滚动时触发。

方法
--

start

开始滚动 marquee。

stop

停止滚动 marquee。

示例
--

```html
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
 direction="down"
 width="250"
 height="200"
 behavior="alternate"
 style="border:solid">
  <marquee behavior="alternate">This text will bounce</marquee>
</marquee>
```

规范
--

| Specification |
| --- |
| HTML Standard # the-marquee-element-2 |

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

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


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

<main>
======

HTML **`<main>` 元素**呈现了文档的 `<body>` 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

尝试一下
----

* *内容类别*Flow content, palpable content.
* *允许内容* Flow content.
* *标签省略*无; 开始与结束都是强制性。
* *被允许的父级元素*任何支持流内容但可能不是继承元素的 元素`<article>`, `<aside>`, `<footer>`, `<header>`, 或`<nav>`
* *DOM 接口* `HTMLElement`
属性
--

此元素仅包含全局属性。

使用说明
----

在文档中，`<main>` 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。

`<main>` 对文档的大纲（outline）没有贡献；也就是说，它与诸如 `<body>` 之类的元素，诸如 `<h2>` (en-US) 之类的标题等不同，`<main>` 不会影响 DOM 的页面结构概念。它仅有提供信息的作用。（原文：It's strictly informative.）

示例
--

```html
<!-- 其他内容 -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>...</p>
    <p>...</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>...</p>
    <p>...</p>
  </article>
</main>

<!-- 其他内容 -->
```

无障碍相关
-----

### 界标

`<main>` 元素的行为与 `main` 界标 (en-US)所定义的角色相一致。 界标可被辅助技术使用，以快速识别并将用户导航到文档中的分段。通常使用 `<main>` 元素，而不是定义 `role="main"`，除非是考虑对于旧浏览器的兼容性.

### 直达内容

直达内容（skipnav），是一种辅助功能技术，使其用户可以快速跳过大段的重复内容（如主导航栏、信息横幅等）。这允许用户更快地访问到页面的主要内容。

向 `<main>` 元素添加 `id` 属性后，该元素可成为直达内容链接的目标。
```

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>
```

* WebAIM: 直达链接
### 阅读器模式

浏览器的阅读器模式会寻找文档中的`main` 元素，以及 标题元素 和 内容分区元素 以便将内容转换至阅读器视图。

* 为 Safari 阅读器模式以及其他阅读器应用构建网站
规范
--

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

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

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

`<main>` 标签受广泛支持。对于 IE 浏览器 11 版本和低于 11 的版本，推荐向 `<main>` 元素添加 `"main" 这一` ARIA 角色，以保证其无障碍。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 `role` 属性才能理解 `<main>` 元素的语义含义）

```html
<main role="main">...</main>
```

参见
--

* 基本结构元素：`<html>`、`<head>`、`<body>`
* 分段相关元素：`<article>`、`<aside>`、`<footer>`、`<header>`, 或 `<nav>`


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

<dfn>
=====

摘要
--

*HTML 定义元素* (**<dfn>**) 表示术语的一个定义。

**备注：** `<dfn>` 元素标记了被定义的术语；术语定义应当在 `<p>`, `<section>`或定义列表 (通常是`<dt>`, `<dd>` 对) 中给出。

* 被定义术语的值由下列规则确定：
    1. 如果 `<dfn>` 元素有一个 **`title`** 属性，那么该术语的值就是该属性的值。
    2. 否则，如果它仅包含一个 `<abbr>` 元素，该元素拥有 `title` 属性，那么该术语的值就是该属性的值。
    3. 否则，`<dfn>` 元素的文本内容就是该术语的值。

|  |  |
| --- | --- |
| 内容分类 | Flow content, phrasing content, palpable content. |
| 允许的内容 | Phrasing content, but no `<dfn>` element must be a descendant. |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | Any element that accepts phrasing content. |
| DOM 接口 | `HTMLElement` |

属性
--

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

在 HTML5 中，**`title`** 属性拥有特殊含义，见上文。

示例
--

下列示例是合法的 HTML5。

```html
<!-- Define "The Internet" -->
<p>
  <dfn id="def-internet">The Internet</dfn> is a global system of interconnected
  networks that use the Internet Protocol Suite (TCP/IP) to serve billions of
  users worldwide.
</p>
```

在同一文档的后面：

```html
<dl>
  <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
  <dt>
    <dfn>
      <abbr title="World-Wide Web">WWW</abbr>
    </dfn>
  </dt>
  <dd>
    The World-Wide Web (WWW) is a system of interlinked hypertext documents
    accessed on <a href="#def-internet">the Internet</a>.
  </dd>
</dl>
```

### 结果

规范
--

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

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

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

相关链接
----

* 定义列表的相关元素：`<dl>`, `<dt>`, `<dd>`
* `<abbr>`


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

<mark>
======

概要
--

HTML 标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。

这个 *HTML mark* 标签代表突出显示的文字，例如可以为了**标记**特定上下文中的文本而使用这个标签\*\*.\*\* 举个例子，它可以用来显示搜索引擎搜索后关键词

* *内容分类* Flow content (en-US), phrasing content (en-US), palpable content.
* *允许的内容* Phrasing content (en-US).
* *标签省略* 不允许，开始标签和结束标签都不能省略。
* *允许的父元素*任何接受phrasing content (en-US) 的元素。
* *DOM 接口* `HTMLElement`
属性
--

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

使用说明
----

`<mark>`元素的典型使用场景包括：

* 当用在引用（`<q>`、`<blockquote>`）中时，通常用来显示有特殊意义的文本，但不在原材料中标记出来；或者是用来显示特殊审查的材料，即使原作者不认为它特别重要。
* 另外，<mark>元素还用来显示与用户当前活动相关的一部分文档内容。例如，它可能被用于显示匹配搜索结果中的单词。
* 不要为了语法高亮而用 `<mark>` 元素; 你应该用 *`<strong>`* 元素结合适当的 CSS 来实现这个目的（语法高亮）。

**备注：** 不要把 `<mark>` 元素和 `<strong>` 元素搞混淆；`<strong>` 元素用来表示文本在上下文的重要性的，而 `<mark>` 元素是用来表示上下文的关联性的。

示例
--

```html
<p><mark> 元素用于 <mark>高亮</mark> 文本</p>
```

### 结果

规范
--

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

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

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

参见
--

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


<input>：输入（表单输入）元素 - HTML（超文本标记语言）

<input>：输入（表单输入）元素
==================

HTML **`<input>`** 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。`<input>` 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

尝试一下
----

<input> 类型
----------

`<input>` 的工作方式相当程度上取决于 `type` 属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 `text`。

可用的值包括：

| 类型 | 描述 | 基本示例 |
| --- | --- | --- |
| button | 没有默认行为的按钮，上面显示 `value` 属性的值，默认为空。 |
```
<input type="button" name="button" value="Button" />
```
 |
| checkbox | 复选框，可将其值设为选中或未选中。 |
```
<input type="checkbox" name="checkbox"/>
```
 |
| color | 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 |
```
<input type="color" name="color"/>
```
 |
| date | 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 |
```
<input type="date" name="date"/>
```
 |
| datetime-local | 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 |
```
<input type="datetime-local" name="datetime-local"/>
```
 |
| email | 编辑邮箱地址的字段。类似 `text` 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘。 |
```
<input type="email" name="email"/>
```
 |
| file | 让用户选择文件的控件。使用 `accept` 属性规定控件能选择的文件类型。 |
```
<input type="file" accept="image/\*, text/\*" name="file"/>
```
 |
| hidden | 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。 |
```
<input id="userId" name="userId" type="hidden" value="abc123">
```
 |
| image | 图形化 `submit` 按钮。显示的图像由 `src` 属性决定。如果 `src` 属性缺失，就会显示 `alt` 的内容。 |
```
<input type="image" name="image" src="" alt="image input"/>
```
 |
| month | 输入年和月的控件，没有时区。 |
```
<input type="month" name="month"/>
```
 |
| number | 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。 |
```
<input type="number" name="number"/>
```
 |
| password | 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。 |
```
<input type="password" name="password"/>
```
 |
| radio | 单选按钮，允许在多个拥有相同 `name` 值的选项中选中其中一个。 |
```
<input type="radio" name="radio"/>
```
 |
| range | 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 `min` 和 `max` 来规定可接受值的范围。 |
```
<input type="range" name="range" min="0" max="25"/>
```
 |
| reset | 此按钮将表单的所有内容重置为默认值。不推荐使用该类型。 |
```
<input type="reset" name="reset"/>
```
 |
| search | 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 |
```
<input type="search" name="search"/>
```
 |
| submit | 用于提交表单的按钮。 |
```
<input type="submit" name="submit"/>
```
 |
| tel | 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 |
```
<input type="tel" name="tel"/>
```
 |
| text | 默认值。单行的文本字段，输入值中的换行会被自动去除。 |
```
<input type="text" name="text"/>
```
 |
| time | 用于输入时间的控件，不包括时区。 |
```
<input type="time" name="time"/>
```
 |
| url | 用于输入 URL 的控件。类似 `text` 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。 |
```
<input type="url" name="url"/>
```
 |
| week | 用于输入以年和周数组成的日期，不带时区。 |
```
<input type="week" name="week"/>
```
 |
| 废弃的值 |
| `datetime`
已弃用
 | 用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。 |
```
<input type="datetime" name="datetime"/>
```
 |

属性
--

`<input>` 元素由于拥有诸多属性而异常强大，其中前文举例说明的 `type` 属性尤其重要。由于所有 `<input>` 元素无论是哪种 `type`，都基于 `HTMLInputElement` 接口，所以理论上说，它们共享一套相同的属性。但实际上大部分属性只作用于特定一组 `type`。此外，一些属性作用于 `<input>` 的方式取决于 `<input>` 的 `type` 属性，不同的 `type` 有不同的效果。

下面的表格列出了所有属性，每个属性都有简短的描述。表格后的列表更详细地描述了各个属性及它们与哪些 input 类型相关。与大部分或者全部 input 类型都相关的属性会讲述更多细节。一些针对特定 input 类型的属性，或者所有 input 类型都有，但在特定的 input 类型上有特定表现的属性，会在相应的类型页面中说明。这个元素包含全局属性，一些针对 `<input>` 元素有额外意义的全局属性也会特别说明。

`<input>` 元素包含的属性包含全局的 HTML 属性和以下这些额外属性：

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `accept` | `file` | 文件上传控件中预期文件类型的提示 |
| `alt` | `image` | 图片类型的 alt 属性。对无障碍是必需的 |
| `autocomplete` | 除了 `checkbox`、`radio` 和按钮以外 | 表单自动填充特性提示 |
| `capture` | `file` | 文件上传控件中媒体捕获方法的提示 |
| `checked` | `checkbox`、`radio` | 控件是否选中 |
| `dirname` | `search`、`text` | 表单字段的名称，用于在提交表单时发送元素的方向性 |
| `disabled` | 所有类型 | 表单控件是否禁用 |
| `form` | 所有类型 | 将控件联系到表单元素中 |
| `formaction` | `image`、`submit` | 要提交表单的 URL 地址 |
| `formenctype` | `image`、`submit` | 提交表单时使用的表单数据编码类型 |
| `formmethod` | `image`、`submit` | 提交表单时所使用的 HTTP 方法 |
| `formnovalidate` | `image`、`submit` | 绕过表单提交时的表单控件验证 |
| `formtarget` | `image`、`submit` | 提交表单时的浏览上下文 |
| `height` | `image` | 与 `<img>` 元素的 height 属性有相同含义，垂直方向上的维度值 |
| `list` | 除了 `hidden`、`password`、`checkbox`、`radio` 和按钮以外 | 自动完成选项的 `<datalist>` 的 id 属性的值 |
| `max` | `date`、`month`、`week`、`time`、`datetime-local`、`number`、`range` | 最大值 |
| `maxlength` | `text`、`search`、`url`、`tel`、`email`、`password` | `value` 的最大长度（字符数） |
| `min` | `date`、`month`、`week`、`time`、`datetime-local`、`number`、`range` | 最小值 |
| `minlength` | `text`、`search`、`url`、`tel`、`email`、`password` | `value` 的最小长度（字符数） |
| `multiple` | `email`、`file` | 布尔值。是否允许多个值 |
| `name` | 所有类型 | 表单的控件名称，作为键值对的一部分与表单一同提交 |
| `pattern` | `text`、`search`、`url`、`tel`、`email`、`password` | 为了使得 `value` 有效，必须符合的模式 |
| `placeholder` | `text`、`search`、`url`、`tel`、`email`、`password`、`number` | 当没有值设定时，出现在表单控件上的文字 |
| `readonly` | 除了 `hidden`、`range`、`color`、`checkbox`、`radio` 和按钮以外 | 布尔值。如果存在，其中的值将不可编辑。 |
| `required` | 除了 `hidden`、`range`、`color` 和按钮以外 | 布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。 |
| `size` | `text`、`search`、`url`、`tel`、`email`、`password` | 控件的尺寸 |
| `src` | `image` | 与 `<img>` 元素的 `src` 属性含义相同，图片资源的地址 |
| `step` | `date`、`month`、`week`、`time`、`datetime-local`、`number`、`range` | 有效的增量值 |
| `type` | 所有类型 | 表单控件的类型 |
| `value` | 所有类型 | 表单控件的初始值 |
| `width` | `image` | 与 `<img>` 元素的 `width` 属性含义相同 |

一些额外的非标准属性被列在标准属性的描述之后。

### 属性各论

`accept`

仅对 `file` 输入类型有效。`accept` 属性定义了 `file` 上传控件可选择文件类型的列表。参见 file 输入类型以了解更多信息。

`alt`

仅对 `image` 类型有效。`alt` 属性提供了图片的替代文字，在图片的 `src` 属性缺失或对应资源加载失败时，会显示该属性的值。参见 image 输入类型以了解更多信息。

`autocomplete`

（**不是**一个布尔属性！）`autocomplete` 属性将一个空格分隔的字符串作为其值，描述输入应该提供什么类型的自动完成功能。一个典型的自动完成的实现是回忆以前在同一输入字段中输入的值，但也可能存在更复杂的自动完成形式。例如，浏览器可以与设备的联系人列表集成，在电子邮件输入栏中自动完成 `email` 地址。请参阅 `autocomplete` 以了解允许的值。

`autocomplete` 属性对 `hidden`、`text`、`search`、`url`、`tel`、`email`、`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range`、`color` 和 `password` 类型的输入有效。该属性对于那些不返回数值或文本数据的输入控件没有效果，对除了 `checkbox`、`radio`、`file` 和任何按钮类型的所有输入类型均有效。

查看 HTML autocomplete 属性以了解额外信息，包括密码安全和对于 `hidden` 来说，`autocomplete` 的方式与其他输入类型略有不同。

`autofocus`

一个布尔属性，如果存在，表示当页面加载完毕（或包含该元素的 `<dialog>` 显示完毕）时，该 input 元素应该自动拥有焦点。

**备注：** 具有 `autofocus` 属性的元素可能在 `DOMContentLoaded` 事件触发前获得焦点。

文档中只有一个表单元素可以具有 `autofocus` 属性。如果放置了多于一个元素，会聚焦第一个具有该属性的元素。

`autofocus` 不能应用于类型为 `hidden` 的输入控件上，因为隐藏的控件不可聚焦。

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

在应用 `autofocus` 属性时，要仔细考虑无障碍问题。自动聚焦于一个控件会导致页面在加载时滚动。焦点也会导致动态键盘在某些触摸设备上显示。虽然屏幕阅读器会宣布收到焦点的表单控件的标签，但屏幕阅读器不会宣布标签之前的任何内容，在小设备上的视力良好的用户同样会错过前面的内容所创造的背景。

`capture`

在 HTML 媒体捕获规范中引入，仅对 `file` 输入类型有效，`capture` 属性定义了应该使用哪种媒体（如麦克风、视频或相机）来捕获一个新文件，以便在支持场景中用 `file` 上传控件上传。参见 file 输入类型。

`checked`

布尔属性，对于 `radio` 和 `checkbox` 类型有效。如果在 `radio` 类型上出现，代表该单选按钮是当前同名称组中所选定的那一个。如果在 `checkbox` 类型上出现，代表页面加载时，默认选择该复选框，这并*不*代表复选框当前是否选择：如果复选框状态改变，该内容属性不会反馈这种改变，只会更新 `HTMLInputElement` 的 `checked` IDL 属性。

**备注：** 与其他输入控件不同，复选框和单选按钮的值只会在 `checked` 状态时才会包括在提交的数据中。如果当前是 `checked` 状态，复选框的名称和值就会被提交。

例如，`name` 为 `fruit` 的复选框含有 `value` 为 `cherry` 的一项，且该复选框为选中状态，提交的表单数据将包含 `fruit=cherry`；如果复选框为非活动状态，它不会列入到表单数据中。复选框和单选按钮的默认 `value` 值为 `on`。

`dirname`

仅对 `text` 和 `search` 输入类型有效。`dirname` 属性允许提交元素的方向。当包含这个属性时，表单控件将提交两个名称/值对：第一个是 `name` 和 `value`，第二个是 `dirname` 作为名称，其值为浏览器设置的 `ltr` 或 `rtl`。

```html
<form action="page.html" method="post">
  <label
 >水果：
    <input type="text" name="fruit" dirname="fruit.dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit.dir=ltr -->
```

当提交上述表单时，会发送 `name` / `value` 对 `fruit=cherry` 和 `dirname` / 方向对 `fruit.dir=ltr`。

`disabled`

一个布尔属性，如果存在的话，表示用户不应该与该输入进行交互。禁用的输入通常以较暗的颜色呈现，或使用一些其他形式的指示，表明该字段不能使用。

具体来说，禁用的输入不会接收 `click` 事件，而且禁用的输入不会随表单提交。

**备注：** 虽然规范中没有要求，但 Firefox 默认会在不同的页面加载中保持 `<input>` 的动态禁用状态。使用 `autocomplete` 属性来控制这个特性。

`form`

一个字符串，指定该输入与之相关的 `<form>` 元素（即其**表单所有者**）。如果存在该属性，该字符串的值必须与相同文档中的 `<form>` 元素的 `id` 相同。如果没有指定该属性，该 `<input>` 元素与最近包含它的表单相关。

`form` 属性可以让你在文档的任何地方放置一个输入控件，但在文档的其他地方包含一个表单。

**备注：** 一个输入只能与一个表单相关。

`formaction`

仅对 `image` 和 `submit` 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

`formenctype`

仅对 `image` 和 `submit` 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

`formmethod`

仅对 `image` 和 `submit` 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

`formnovalidate`

仅对 `image` 和 `submit` 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

`formtarget`

仅对 `image` 和 `submit` 输入类型有效。参见 submit 输入类型介绍以获得更多信息。

`height`

仅对 `image` 输入按钮有效。`height` 是要显示代表图形提交按钮的图片的高度。参见 image。

`id`

全局属性对所有元素有效，包括所有的输入类型，它定义了一个唯一的标识符（ID），在整个文档中必须是唯一的。其目的是为了在链接时识别该元素。该值被用作 `<label>` 的 `for` 属性的值，以便将标签与表单控件连接起来。参见 `<label>`。

`inputmode`

对所有元素都有效的全局值，它为浏览器提供了一个提示，说明在编辑这个元素或其内容时要使用的虚拟键盘配置类型。值包括 `none`、`text`、`tel`、`url`、`email`、`numeric`、`decimal` 和 `search`。

`list`

给予 `list` 属性的值应该是位于同一文档中的 `<datalist>` 元素的 {domxref("Element.id", "id")}}。`<datalist>` 提供了一个预定义值的列表，向用户建议这个输入。列表中任何与`type`不兼容的值都不包括在建议的选项中。所提供的值是建议，不是要求：用户可以从这个预定义的列表中选择，或者提供不同的值。

在 `text`、`search`、`url`、`tel`、`email`、`date`、`month`、`week`、`time`、`datetime-local`、`number`、`range` 和 `color` 上均有效。

根据规范，`hidden`、`password`、`checkbox`、`radio`、`file` 或任何按钮类型不支持 `list` 属性。

根据浏览器的不同，用户可能会看到一个建议的自定义调色板、沿着一个范围的跳动标记、甚至是一个像选择一样打开但允许非列表值的输入。查看浏览器兼容性表，了解其他输入类型。

参见 `<datalist>` 元素。

`max`

对 `date`、`month`、`week`、`time`、`datetime-local`、`number` 和 `range` 输入类型有效，定义了允许值范围内的最大值。如果输入到元素中的 `value` 超过此值，则该元素将无法通过约束验证。如果 `max` 属性的值不是数字，则元素没有最大值。

有一种特殊情况：如果数据类型是周期性的（如日期或时间），`max` 的值可能低于 `min` 的值，这表明范围可以环绕；例如，这允许你指定一个从晚上 10 点到凌晨 4 点的时间范围。

`maxlength`

对 `text`、`search`、`url`、`tel`、`email` 和 `password` 类型有效。它定义了用户可以输入到该字段中的最大字符数（以 UTF-16 码点为单位）。必须为大于等于 `0` 的整数。如果未指定 `maxlength` 或指定了无效的值，则该字段将没有最大值。这个值也必须大于等于 `minlength` 的值。

如果文本框中的字符数大于 `maxlength` UTF-16 编码单元长度，则输入将无法通过约束验证。默认情况下，浏览器将阻止用户输入超过 `maxlength` 属性所指定的值的字符。参见客户端验证一节以了解更多信息。

`min`

对 `date`、`month`、`week`、`time`、`datetime-local`、`number` 和 `range` 输入类型有效，定义了允许值范围内的最小值。如果输入到元素的 `value` 小于此值，则该元素将无法通过约束验证。如果 `min` 指定的值不是数字，则输入没有最小值。

该值必须小于或等于 `max` 属性的值。如果 `min` 属性存在但没有指定或无效，则不应用 `min` 值。如果 `min` 属性有效，并且非空值小于 `min` 属性所允许的最小值，约束验证将阻止表单提交。参见客户端验证一节以获取更多信息。

有一种特殊情况：如果数据类型是周期性的（如日期或时间），`min` 的值可能高于 `max` 的值，这表明范围可以环绕；例如，这允许你指定一个从晚上 10 点到凌晨 4 点的时间范围。

`minlength`

对 `text`、`search`、`url`、`tel`、`email` 和 `password` 类型有效。它定义了用户可以输入到该字段中的最小字符数（以 UTF-16 码点为单位）。该值必须是小于等于 `maxlength` 指定的值的非负整数值。如果未指定 `minlength` 或指定了无效的值，则该字段将没有最小值。

如果输入字段的文本长度小于 `minlength` UTF-16 代码单元的长度，输入将无法通过约束验证，阻止表单提交。参见客户端验证一节以了解更多信息。

`multiple`

如果设置了布尔值 `multiple` 属性，意味着用户可以在电子邮件部件中输入逗号分隔的电子邮件地址，或者可以通过 `file` 输入选择多个文件。参见 email 和 file 输入类型。

`name`

一个指定输入控件名称的字符串。当表单数据被提交时，这个名字会和控件的值一起提交。

通常把 `name` 看作是一个必需的属性（即使它不是）。如果一个输入没有指定 `name`，或者 `name` 是空的，那么这个输入的值就不会和表单一起提交！禁用的控件、未选中的单选按钮、未选中的复选框和重置按钮也不会被发送。

考虑这两个特殊情况：

1. `_charset_`：如果被用作 hidden 类型的 `<input>` 元素的名称，该输入的 `value` 会被用户代理自动设置为提交表单时使用的字符编码。
2. `isindex`：由于历史原因，不允许使用 `isindex` 这个名字。

`name` 属性对单选按钮的行为完全不同。

在一个同名的单选按钮组中，一次只能选中一个单选按钮。选择该组中的任何一个单选按钮会自动取消对同一组中当前被选中的单选按钮的选择。如果表单被提交，这一个被选中的单选按钮的值会和名称一起被发送。

当标签进入一系列同名的单选按钮组时，如果有一个被选中，将聚焦该单选按钮。如果它们没有按源顺序分组，如果组中有一个被选中，当遇到组中的第一个时，标签进入组开始，跳过所有没有选中的。换句话说，如果有一个被选中，标签就会跳过该组中未被选中的单选按钮。如果没有勾选，当到达同名组中的第一个按钮时，就会聚焦该单选按钮组。

一旦组中的一个单选按钮有了焦点，使用箭头键将浏览所有同名的单选按钮，即使这些单选按钮在源顺序中没有被分组。

如果一个输入元素具有 `name`，该名称成为包含它的表单元素的 `HTMLFormElement.elements` 属性。如果有两个 `name` 分别设置为 `guest` 和 `hat-size` 的输入元素，可以使用如下代码：

```js
let form = document.querySelector("form");
let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];
```

此段代码运行后，`guestName` 将成为 `guest` 字段的 `HTMLInputElement`，`hatSize` 将成为 `hat-size` 字段的 `HTMLInputElement`。

**警告：** 避免给表单元素一个与表单内置属性相对应的 `name`，因为这样你就会用这个对相应输入的引用来覆盖预定义的属性或方法。

`pattern`

对 `text`、`search`、`url`、`tel`、`email` 和 `password` 类型有效。为了使 `value` 通过约束验证，必须满足 `pattern` 属性给定的正则表达式。它必须是 `RegExp` 类型的有效 JavaScript 正则表达式，并且已在我们的正则表达式指南中进行了说明；在编译正则表达式时指定了 `'u'` 标志，因此该模式被视为 Unicode 代码点的序列，而不是 ASCII。模式文本周围无需指定正斜杠。

如果 `pattern` 属性存在，但是未指定模式或无效，则不应用任何正则表达式，并且将完全忽略此属性。如果模式属性是有效的，并且该非空值与模式不匹配，约束验证将阻止表单提交。

**备注：** 如果使用了 `pattern` 属性，要在附近告知用户所期望的输入格式。你可以包含 `title` 属性来解释满足模式的需求说明，大多数浏览器将它们显示为工具提示（tooltip）。对于无障碍来说，视觉的解释是必要的，工具提示是一种改进点。
 参见客户端验证一节以了解更多信息。

`placeholder`

对 `text`、`search`、`url`、`tel`、`email`、`password` 和 `number` 有效。`placeholder` 属性可向用户提供有关该字段中需要什么样的信息的简短提示。它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。文本中*不得*包含回车符或换行符。例如，某个字段需要收集用户的姓氏，其标签为“First Name”，一个适合的占位文字可能是“如 Mustafa”。

**备注：** `placeholder` 属性在语义上不如其他解释表单的方式有用，而且会对你的内容造成意想不到的技术问题。参见标签以获得更多信息。

`readonly`

一个布尔属性，如果存在，则表示该字段不能由用户编辑。`readonly` 属性支持 `text`、`search`、`url`、`tel`、`email`、`date`、`month`、`week`、`time`、`datetime-local`、`number` 和 `password` 输入类型。

参见 HTML 属性：`readonly` 以了解更多信息。

`required`

`required` 是一个布尔属性，如果存在，则表示用户必须在提交表单之前指定一个非空值。`required` 属性支持 `text`、`search`、`url`、`tel`、`email`、`date`、`month`、`week`、`time`、`datetime-local`、`number`、`password`、`checkbox`、`radio` 和 `file` 输入类型。

参见客户端验证和 HTML 属性：`required` (en-US)以了解更多信息。

`size`

对 `email`、`password`、`tel`、`url` 和 `text` 有效。`size` 属性指示显示输入控件的多少。基本上创建了与设置 CSS `width`属性相同的结果，但有一些特殊性，值的具体单位取决于输入类型。对于 `password` 和 `text`，它是字符数量（或 `em` 单位大小），默认值是 `20`。对于其他情况，是像素值（或 `px` 单位大小）。CSS `width` 的优先级会高于 `size` 属性。

`src`

仅对 `image` 输入按钮有效。指定将要在提交按钮上显示的图像的 URL。参见 image 输入类型。

`step`

对 `date`、`month`、`week`、`time`、`datetime-local`、`number` 和 `range` 输入类型有效。`step` (en-US) 属性指定了值必须满足的粒度。

如果没有明确包含它：

* `step` 对于类型为 `number` 和 `range` 的默认值为 1。
* 每一种日期/事件输入类型有一个适合的默认 `step` 值，请查阅相关的页面以获取：`date`、`datetime-local`、`month`、`time` 和 `week`。

值必须为一个正数（整数或小数）或特殊值 `any`（意味着不指定任何步进值，任意值都可以接受（除其他制约因素如 `min` 或 `max` 之外））。

如果没有明确设置 `any`，`number`、日期/时间输入类型和 `range` 输入类型的有效值等于步进的基础——`min`值和步进值的增量，如果指定的话，最高为`max`值。

例如，如果存在这样一个元素 `<input type="number" min="10" step="2">`，那么任何大于等于 `10` 的偶整数都是有效的。如果省略（`<input type="number">`），任何整数都有效，但浮点数（如 `4.2`）无效，因为 `step` 默认为`1`。为了使 `4.2` 有效，`step` 必须被设置为 `any`、0.1、0.2 或任何 `min` 值以 `.2` 结尾的数字，例如 `<input type="number" min="-5.2">`。

**备注：** 当用户输入的数据不符合步进配置时，该值在约束验证中被认为是无效的，将匹配 `:invalid` 伪类。
 参见客户端验证以获取更多信息。

`tabindex`

对所有元素有效的全局属性，包括所有的输入类型，是一个整数属性，表示该元素如果参与顺序键盘导航，是否可以接受输入焦点（可聚焦）。由于除了隐藏类型的输入外，所有的输入类型都是可聚焦的，这个属性不应该用在表单控件上，因为这样做需要管理文档中所有元素的聚焦顺序，如果设置错误，就有可能损害可用性和无障碍性。

`title`

对所有元素有效的全局属性，包括所有的输入类型，包含一个代表与它所属的元素相关的咨询信息的文本。这样的信息通常以工具提示的形式呈现给用户（但不必要）。标题不应作为表单控件用途的主要解释。相反，可以使用 `<label>` 元素，其 `for` 属性设置为表单控件的 `id` 属性。参见下面的标签。

`type`

一个字符串，指定要渲染的控件的类型。例如，要创建一个复选框，使用 `checkbox` 的值。如果省略（或指定一个未知值），则使用输入类型 `text`，创建一个纯文本输入字段。

允许的值列在了上方的 Input 类型中。

`value`

输入控件的值。当在 HTML 中指定时，这是初始值。从那时起，它可以在任何时候用 JavaScript 访问相应的 `HTMLInputElement` 对象的 `value` 属性，用于改变或检索。`value` 属性总是可选的，不过对于 `checkbox'、`radio`和`hidden` 来说，应该被认为是必须的。

`width`

仅对 `image` 输入按钮有效。`width` 是呈现在图片提交按钮上的图片宽度。参见 image 输入类型。

### 非标准属性

以下非标准属性在某些浏览器中可以使用。一般地，除非无法实现你所需要的功能，否则不要使用它们。

| 属性 | 描述 |
| --- | --- |
| `autocorrect` | 指定 autocorrect 状态的字符串，状态为 code>on 或 `off`。**仅 Safari 适用。** |
| `incremental` | 是否重复发送 `search` (en-US) 事件，以便在用户仍在编辑字段值时更新实时搜索结果。**WebKit 和 Blink 适用（Safari、Chrome、Opera 等）。** |
| `mozactionhint` | 当用户在编辑字段时按下键盘的 `Enter` 或 `Return` 键时，所需要进行的动作的字符串表示，这用于决定虚拟键盘上那个键的合适的标签。
**已弃用，请使用 `enterkeyhint` (en-US) 替代。** |
| `orient` | 设置范围滑块的呈现方向。**仅 Firefox 适用。** |
| `results` | 下拉菜单显示的最大查找结果数量。**仅 Safari 适用。** |
| `webkitdirectory` | 一个布尔值，表示是否只允许用户选择一个目录（或多个目录，如果同时存在 `multiple` 属性）。 |

`autocorrect`
非标准

（仅 Safari 适用）。一个字符串，表示是否在用户编辑该字段时激活自动更正。允许的值为：

`on`

启用自动更正，如果配置了文字替换，则一同处理它们。

`off`

禁用自动更正和文字替换。

`incremental`
非标准

布尔属性 `incremental` 是 WebKit 和 Blink 的扩展（所以 Safari、Opera、Chrome 等都支持），如果存在的话，就会告诉用户代理将输入作为实时搜索处理。当用户编辑该字段的值时，用户代理将 `search` (en-US) 事件发送到代表搜索框的 `HTMLInputElement` 对象。这使得你的代码能够在用户编辑搜索时实时更新搜索结果。

如果没有指定 `incremental` 属性，则仅当用户明确发起搜索（如按下键盘上 `Enter` 或 `Return`）时，才会发送 `search` (en-US) 事件。

`search` 事件是限速的，因此它的发送频率不会超过实施定义的间隔。

`orient`
非标准

类似于影响 `<progress>` 和 `<meter>` 元素的非标准 CSS 属性 -moz-orient，`orient` 属性定义范围滑块的方向。值包括 `horizontal`，代表范围滑块水平呈现；和 `vertical`，代表范围滑块垂直呈现。

`results`
非标准

只有 Safari 支持的 `results` 属性是一个数值，可以让你覆盖 `<input>` 元素原生提供的先前搜索查询下拉菜单中显示的最大条目数。

该值必须是一个非负的十进制数字。如果没有提供，或者提供了一个无效的值，则使用浏览器的默认最大条目数。

`webkitdirectory`
非标准

布尔属性 `webkitdirectory` 如果存在，表示在文件选取界面中，只有目录可供用户选择。参见 `HTMLInputElement.webkitdirectory` 以了解更多细节和例子。

虽然最初只为基于 WebKit 的浏览器实现，但 `webkitdirectory` 也可以在 Microsoft Edge 以及 Firefox 50 和更高版本中使用。然而，尽管它有相对广泛的支持，它仍然不是标准的，除非你没有其他选择，否则不应该使用。

方法
--

以下方法由 DOM 中代表 `<input>` 元素的 `HTMLInputElement` 接口提供。还有一些方法是由父接口 `HTMLElement`、`Element`、`Node` 和 `EventTarget` 提供的。

`checkValidity()` (en-US)

如果元素的值通过了有效性检查，返回 `true`；否则，返回 `false` 并在该元素上触发 `invalid` 事件。

`reportValidity()` (en-US)

如果元素的值通过了有效性检查，返回 `true`；否则，返回 `false` 并在该元素上触发 `invalid` 事件，如果事件没有取消，将问题报告给用户。

`select()`

如果 `<input>` 元素中的内容可选择，则选择其中的全部内容。对于没有可供选择的文字内容的元素（如可视化颜色选择器或日历日期输入），这个方法不做任何事情。

`setCustomValidity()` (en-US)

如果输入元素的值不合法，设置显示的自定义信息。

`setRangeText()` (en-US)

将输入元素中指定的字符范围的内容设置为一个给定的字符串。`selectMode` 参数可以控制现有内容如何被影响。

`setSelectionRange()`

在一个文本输入元素中选择指定的字符范围。对不以文本输入字段形式出现的输入没有任何作用。

`stepDown()` (en-US)

默认情况下，将一个数字输入的值减少 1，或减少指定的单位数量。

`stepUp()` (en-US)

默认情况下，将一个数字输入的值增加 1，或增加指定的单位数量。

CSS
---

输入元素作为被替换的元素，有一些功能不适用于非表单元素。有一些 CSS 选择器可以根据表单控件的 UI 特征专门针对它们，也被称为 UI 伪类。输入元素也可以用属性选择器按类型定位。有一些属性也是特别有用的。

### UI 伪类

与 `<input>` 元素非常相关的标题：| 伪类 | 描述 |
| --- | --- |
| `:enabled` | 任何当前启用的元素，可以被激活（选择、点击、输入等）或接受焦点；也有一个禁用状态，在这个状态下，它不能被激活或接受焦点。 |
| `:disabled` | 任何当前禁用的元素都有一个启用的状态，这意味着如果它没有被禁用，它可以被激活（选择、点击、输入等等）或接受焦点。 |
| `:read-only` | 不能被用户编辑的元素。 |
| `:read-write` | 可以被用户编辑的元素。 |
| `:placeholder-shown` | 当前显示 `placeholder` 文字的元素，包括有 `placeholder` 显示，尚未拥有值的 `<input>` 和 `<textarea>` 元素。 |
| `:default` | 在一组相关元素中属于默认的表单元素。匹配 checkbox 和 radio 在页面加载或渲染时被选中的输入类型。 |
| `:checked` | 匹配当前被选中的 checkbox 和 radio 输入类型（以及当前被选中的 `<select>` 中的 `<option>`）。 |
| `:indeterminate` | indeterminate 属性被 JavaScript 设置为真的 checkbox 元素，表单中所有具有相同名称值的单选按钮被取消选中的 radio 元素，以及处于不确定状态的 `<progress>` 元素。 |
| `:valid` | 可以应用约束验证的表单控件，并且当前是有效的。 |
| `:invalid` | 应用了约束条件验证的表单控件，并且当前是无效的。匹配一个表单控件，它的值与它的属性设置的约束条件不一致，如 `required`、`pattern`、`step` 和 `max`。 |
| `:in-range` | 一个非空的输入，其当前值在 `min` 和 `max` 属性以及 `step` 指定的范围限制内。 |
| `:out-of-range` | 一个非空的输入，其当前值不在 `min` 和 `max` 属性以及 `step` 指定的范围限制内。 |
| `:required` | 有 `required` 属性设置的 `<input>`、`<select>` 或 `<textarea>` 元素。只匹配可以被 required 的元素，不匹配不能被 required 的元素。 |
| `:optional` | 没有 `required` 属性设置的 `<input>`、`<select>` 或 `<textarea>` 元素。只匹配可以被 required 的元素，不匹配不能被 required 的元素。 |
| `:blank` | 没有值的 `<input>` 和 `<textarea>` 元素。 |
| `:user-invalid` (en-US) | 与 `:invalid` 相似，但是在失焦的情况下激活。匹配无效的输入，但只在用户交互之后，例如关注该控件、离开该控件或试图提交包含无效控件的表单。 |

#### 伪类示例

我们可以根据复选框是否被选中来为复选框的标签添加样式。在这个例子中，我们对紧跟在复选输入之后的 `color` 和 `font-weight` 的 `<label>` 进行样式设置。如果 `input` 没有选中，我们没有应用任何样式。
```

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">切换复选框状态</label>
```

```css
input:checked + label {
  color: red;
  font-weight: bold;
}
```

### 属性选择器

使用属性选择器，可以根据表单控件的 `type` 来锁定不同类型的表单控件。CSS 属性选择器只需根据一个属性的存在或一个给定属性的值来匹配元素。

```css
/\* 匹配密码输入 \*/
input[type="password"] {
}
/\* 匹配合法值限制在一个范围内的表单控件 \*/
input[min][max] {
}
/\* 匹配含有 pattern 属性的表单控件 \*/
input[pattern] {
}
```

### ::placeholder

默认情况下，占位符文本的外观是半透明或浅灰色。`::placeholder` 伪元素是输入的 `placeholder` 文本。可以使用有限的 CSS 属性子集为其赋予样式。

```css
::placeholder {
  color: blue;
}
```

只有适用于 `::first-line` 伪元素的 CSS 属性子集可以在选择器中使用 `::placeholder` 的规则。

### appearance

`appearance` 属性可以将（几乎）任何元素显示为基于操作系统主题的平台原生样式，也可以用 `none` 值去除任何平台原生样式。

你可以用 `div {appearance: radio;}` 使 `<div>` 看起来像一个单选按钮，或者用 `[type="radio"] {appearance: checkbox;}` 使一个单选看起来像一个复选框，但不要这样做。

设置 `appearance: none` 移除了平台原生的边框，但没有移除其功能。

### caret-color

一个专门针对文本输入相关元素的属性是 CSS `caret-color` 属性，它可以让你设置用于绘制文本输入光标的颜色：

#### HTML

```html
<label for="textInput">请注意红色光标：</label>
<input id="textInput" class="custom" size="32" />
```

#### CSS

```css
input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    "sans-serif";
}
```

#### 结果

### object-position 和 object-fit

在某些情况下（通常涉及非文本输入和专门的界面），`<input>` 元素是一个被替换的元素。当它为替换元素时，该元素在其框架内的位置和大小可以使用 CSS `object-position` 和 `object-fit` 属性来调整。

### 赋予样式

关于在 HTML 中为元素添加颜色的更多信息，参见：

* 使用 CSS 为 HTML 元素添加颜色。

还可以参考：

* 为 HTML 表单赋予样式
* HTML 表单高级样式化 和
* CSS 属性兼容性表格。
额外特性
----

### 标签

需要标签来将辅助性文本与 `<input>` 联系起来。`<label>` 元素提供了关于一个表单字段的适合的解释信息（除了任何布局方面的考虑）。使用 `<label>` 解释输入至 `<input>` 或 `<textarea>` 的内容总是好的。

#### 关联标签

`<input>` 和 `<label>` 元素的语义配对对于屏幕阅读器等辅助技术是很有用的。通过使用 `<label>` 的 `for` 属性对它们进行配对，可以将标签与输入结合起来，让屏幕阅读器更精确地描述输入。

仅仅在 `<input>` 元素旁边有纯文本是不够的。相反，可用性和无障碍性要求包含隐式或显式 `<label>`：

```html
<!-- 非无障碍的 -->
<p>输入你的名字：<input id="name" type="text" size="30" /></p>

<!-- 隐式标签 -->
<p>
  <label>输入你的名字：<input id="name" type="text" size="30" /></label>
</p>

<!-- 显式标签 -->
<p>
  <label for="name">输入你的名字：</label>
  <input id="name" type="text" size="30" />
</p>
```

第一个示例没有无障碍性：提示和 `<input>` 元素没有关系。

除了无障碍名称外，标签还提供了一个更大的“命中”区域，供鼠标和触摸屏用户点击或触摸。通过将 `<label>` 和 `<input>` 配对，点击任何一个元素将聚焦 `<input>` 元素。如果你使用纯文本来给你的输入元素作“标签”，将不会享受到以上特性。将激活区的提示部分用于输入，对有运动控制条件的人是有帮助的。

作为 web 开发者，我们永远不要假定使用者知道所有的事情。使用 web 的人的多样性——可能延伸到你的网站中——实际上保证了你的网站的一些访问者在思维过程和/或情况上会有一些变化，导致他们在没有明确和适当的标签的情况下对你的表单有非常不同的解释。

#### 占位符不具有无障碍性

`placeholder` 属性可以让你指定在 `<input>` 元素的内容区域本身为空时出现的文本。不应该依靠占位符去理解表单。它不是一个标签，也不应该被用来替代。占位符是用来提示输入的值应该是什么样子，而不是解释。

不仅屏幕阅读器无法访问占位符，而且一旦用户在表单控件中输入任何文本，或者如果表单控件已经有一个值，占位符就会消失。具有自动页面翻译功能的浏览器在翻译时可能会跳过属性，这意味着 `placeholder` 可能不会被翻译。

**备注：** 尽可能不要使用 `placeholder` 属性。如果需要标记 `<input>` 元素，请使用 `<label>` 元素。

### 客户端验证

**警告：** 客户端验证是有用的，但它并*不能*保证服务器会收到有效的数据。如果数据必须是特定的格式，*总是*应该在服务器端进行验证，如果格式无效，则返回一个 `400` HTTP 响应。

除了如上文 UI 伪类部分所述，使用 CSS 根据 `:valid` 或 `:invalid` 每个输入的当前状态来设计输入的样式之外，浏览器还在（试图）提交表单时提供了客户端验证。在表单提交时，如果有一个表单控件没有通过约束验证，支持的浏览器将在第一个无效的表单控件上显示一个错误信息；根据错误类型显示一个默认信息，或者由你设置的信息。

某些输入类型和其他属性对特定输入的有效值进行了限制。例如，`<input type="number" min="2" max="10" step="2">` 意味着只有数字 2、4、6、8 或 10 有效。某些错误可能发生，当值小于 2 时会发生 `rangeUnderflow` 错误，值大于 10 时会发生 `rangeOverflow` 错误，当值在 2 至 10 之间，但不是偶数（不满足 `step` 属性的需求）时会发生 `stepMismatch` 错误，如果值不是一个数字时会发生 `typeMismatch` 错误。

对于可能的值域是周期性的输入类型（也就是说，在可能的最高值时，值会绕回开始而不是结束），`max` 和 `min` 属性的值有可能是相反的，这表明允许的值范围从 `min` 开始，绕到可能的最低值，然后继续下去直到达到 `max`。这对日期和时间特别有用，比如你想让范围从晚上 8 点到早上 8 点：

```html
<input type="time" min="20:00" max="08:00" name="overnight" />
```

特定的属性和它们的值会导致一个特定的错误 `ValidityState`：

Validity 对象的错误取决于 `<input>` 的属性及其值：| 属性 | 相关属性 | 描述 |
| --- | --- | --- |
| `max` | `validityState.rangeOverflow` (en-US) | 当值大于 `max` 属性所定义的最大值时发生 |
| `maxlength` | `validityState.tooLong` (en-US) | 当字符数大于 `maxlength` 属性所允许的数量时发生 |
| `min` | `validityState.rangeUnderflow` (en-US) | 当值小于 `min` 属性所定义的最小值时发生 |
| `minlength` | `validityState.tooShort` (en-US) | 当字符数小于 `minlength` 属性所允许的数量时发生 |
| `pattern` | `validityState.patternMismatch` (en-US) | 当模式属性包含一个有效的正则表达式，而 `value` 与之不匹配时发生 |
| `required` | `validityState.valueMissing` (en-US) | 当 `required` 存在时，但是值为 `null` 或单选钮、复选框未选中时发生 |
| `step` | `validityState.stepMismatch` (en-US) | 值不满足步进增量。增量默认值为 `1`，所以对于 `type="number"` 来说，只有整数才有效，`step="any"` 永远不会抛出这个错误。 |
| `type` | `validityState.typeMismatch` (en-US) | 当值的类型不正确时发生，例如，电子邮件不包含 `@`，或者不包含协议的 url。 |

如果一个表单控件没有 `required` 属性，没有值，或者是一个空字符串，都不是无效的。即使上述属性存在，除了 `required` 之外，和空字符串也不会导致错误。

我们可以对接受的值进行限制，支持的浏览器会对这些表单的数值进行原生验证，并在表单提交时提醒用户是否有错误。

除了上表中描述的错误外，`validityState` 接口还包含 `badInput`、`valid` 和 `customError` 布尔值只读属性。有效性对象包括：

* `validityState.valueMissing` (en-US)
* `validityState.typeMismatch` (en-US)
* `validityState.patternMismatch` (en-US)
* `validityState.tooLong` (en-US)
* `validityState.tooShort` (en-US)
* `validityState.rangeUnderflow` (en-US)
* `validityState.rangeOverflow` (en-US)
* `validityState.stepMismatch` (en-US)
* `validityState.badInput` (en-US)
* `validityState.valid`
* `validityState.customError`

对于这些布尔属性中的每一个，值为 `true` 表示指定的验证可能失败的原因是真实的，但 `valid` 属性除外，如果元素的值服从所有的约束，则为 `true`。

如果有错误，支持的浏览器会提醒用户，并阻止表单的提交。需要注意的是：如果自定义错误被设置为一个真值（除了空字符串或 `null` 以外的任何值），表单将被阻止提交。如果没有自定义错误信息，并且其他属性都没有返回真值，那么 `valid` 将为真，表单可以被提交。

```js
function validate(input) {
  let validityState_object = input.validity;
  if (validityState_object.valueMissing) {
    input.setCustomValidity("需要一个值");
  } else if (validityState_object.rangeUnderflow) {
    input.setCustomValidity("值太小了");
  } else if (validityState_object.rangeOverflow) {
    input.setCustomValidity("值太大了");
  } else {
    input.setCustomValidity("");
  }
}
```

最后一行，将自定义的有效性信息设置为空字符串是至关重要的。如果用户出错，而有效性被设置，即使所有的值都是有效的，也会提交失败，直到消息为 `null`。

#### 自定义验证错误示例

如果你想在一个字段验证失败时显示一个自定义的错误信息，你需要使用约束验证 API，在 `<input>`（及相关）元素上可用。以下面的表格为例：

```html
<form>
  <label for="name">输入用户名（允许使用大小写字母）：</label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>提交</button>
</form>
```

如果你试图提交的表单没有填写有效的内容，或者是一个不符合 `pattern` 的值，基本的 HTML 表单验证功能将使其产生一个默认的错误信息。

如果你想转而显示自定义的错误信息，你可以使用下面这样的 JavaScript 代码：

```js
const nameInput = document.querySelector("input");
nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});
nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity("输入一个用户名！");
  } else {
    nameInput.setCustomValidity("用户名只能包含大写或小写字母，请再试一遍。");
  }
});
```

此示例会像这样渲染：

简单来说：

* 每次输入元素的值发生变化时，我们通过 `input` 事件处理程序运行 `checkValidity()` 方法来检查其有效状态。
* 如果值是无效的，会引发 `invalid` 事件，运行 `invalid` 事件处理函数。在这个函数中，我们使用 `if()` 块来决定值无效是因为它是空的，还是因为它不符合模式，并设置一个自定义的有效性错误信息。
* 因此，如果在按下提交按钮时，输入值是无效的，将显示其中一个自定义错误信息。
* 如果它是有效的，它就会像你所期望的那样提交。要做到这一点，必须取消自定义的有效性，通过使用空字符串调用 `setCustomValidity()` 来实现。我们在每次 `input` 事件发生时都要这样做。如果你不这样做，并且之前设置了一个自定义的有效性，那么输入将会认为无效，即使它目前包含一个有效的提交值。

**备注：** 始终在客户端和服务器端验证输入约束。约束验证并不能消除在*服务器端*进行验证的必要性。无效的值仍然可以由旧的浏览器或坏的行为者发送。
 **备注：** Firefox 在许多版本中支持一个专有的错误属性——`x-moz-errormessage`，它允许你以类似的方式设置自定义错误信息。从第 66 版开始，这个属性已被移除（见Firefox bug 1513890）。

### 本地化

某些 `<input>` 类型所允许的输入方式取决于当地的语言。在某些地区，1,000.00 是一个有效的数字，而在其他地区，输入这个数字的有效方式是 1.000,00。

Firefox 使用以下启发式方法来确定验证用户输入的语言（至少对于 `type="number"`）。

* 尝试该元素或其任何父元素上的 `lang`/`xml:lang` 属性所指定的语言。
* 尝试任何 `Content-Language` HTTP 头所指定的语言。或者，
* 如果没有指定，则使用浏览器的区域设置。
### 技术总结

|  |  |
| --- | --- |
| 内容分类 | 流式内容、列表元素、可提交元素、可重设元素、表单相关元素短语内容。如果 `type` 不是 `hidden` 的，则也是可标签元素、可感知内容。 |
| 允许内容 | 无，这是一个空元素。 |
| 标签省略 | 必须有开始标签，不可以有结束标签。 |
| 允许的父元素 | 任何接受短语内容的元素。 |
| 允许的 ARIA 角色 | * `type=button`：`link`、`menuitem`、`menuitemcheckbox`、`menuitemradio`、`radio`、`switch`、`tab`
* `type=checkbox`：`button`、`menuitemcheckbox`、`option`、`switch`
* `type=image`：`link`、`menuitem`、`menuitemcheckbox`、`menuitemradio`、`radio`、`switch`
* `type=radio`：`menuitemradio`
* `type=color|date|datetime|datetime-local|email|file`：无
* `type=hidden|month|number|password|range|reset`：无
* `type=search|submit|tel|text|url|week`：无
 |
| DOM 接口 | `HTMLInputElement` |

无障碍考虑
-----

### 标签

当包括输入元素时，在旁边添加标签是一项无障碍要求，这样那些使用辅助技术的人就可以知道输入的内容是什么。另外，点击或触摸一个标签会将焦点集中到该标签的相关表单控件上。这提高了视力用户的可及性和可用性，增加了用户可以点击或触摸以激活表单控件的区域。这对单选按钮和复选框特别有用（甚至非常必要），因为它们很小。关于标签的更多信息，请参见标签一节。

以下示例是将 `<label>` 和一个 `<input>` 元素建立联系。你需要赋予 `<input>` 元素一个 `id` 属性。 `<label>` 需要一个 `for` 属性，其值与输入的 `id` 相同。

```html
<label for="peas">你喜欢豌豆吗？</label>
<input type="checkbox" name="peas" id="peas" />
```

### 尺寸

像表单输入这样的互动元素应该提供一个足够大的区域，以便于激活它们。这有助于各种人，包括有运动控制问题的人和使用非精确形式的输入（如手写笔或手指）的人。建议最小互动尺寸为 44×44 CSS 像素。

* 了解成功标准 2.5.5：目标尺寸 | W3C Understanding WCAG 2.1
* 目标尺寸和 2.5.5 | Adrian Roselli
* 快速测试：大型点击目标——The A11Y Project
规范
--

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

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

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

参见
--

* 表单约束验证
* 你的第一个表单
* 如何构建 Web 表单
* 原生表单控件
* 发送表单数据
* 表单数据验证
* 如何构建自定义表单控件
* 旧式浏览器中的 HTML 表单
* 为 HTML 表单添加样式
* HTML 表单高级样式
* CSS 属性兼容性表格


<var>：表示变量的元素 - HTML（超文本标记语言）

<var>：表示变量的元素
=============

HTML **`<var>`** 元素表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、
 短语内容、可感知内容
  |
| 允许的内容 | 短语内容 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 显式 ARIA 角色 | 没有相应角色 |
| 允许的 ARIA 角色 | 任何 |
|
| DOM 接口 | `HTMLElement` |

属性
--

本元素仅包含全局属性。

使用说明
----

### 相关元素

与 `<var>` 一同使用的元素一般包含：

* `<code>`：HTML 代码元素
* `<kbd>`：HTML 键盘输入元素
* `<samp>`：HTML 示例输出元素

如果遇到的代码是出于样式目的而不是语义目的地错误使用 `<var>`，应该使用带有适当 CSS 的 `<span>` 元素或者在下列元素中使用适当的语义元素。

* `<em>`
* `<i>`
* `<q>`
### 默认样式

大部分浏览器在渲染 `<var>` 元素时为 `font-style` 赋予 `"italic"` 样式，此样式可像这样由 CSS 覆盖：

```css
var {
  font-style: normal;
}
```

示例
--

### 基本示例

这里有一条基本示例，使用 `<var>` 来代表数学方程式的变量名称。

```html
<p>一个简单的方程式：<var>x</var> = <var>y</var> + 2</p>
```

输出为：

### 覆盖默认样式

使用 CSS 可以为 `<var>` 元素覆盖样式。在这个示例中，如果 Courier 字体可用，将使用该字体渲染变量名称，否则会回退至默认的等宽字体。

#### CSS

```css
var {
  font:
    bold 15px "Courier",
    "Courier New",
    monospace;
}
```

#### HTML

```html
<p>
  变量 <var>minSpeed</var> 和
  <var>maxSpeed</var> 控制设备的最低和最高速度，以每分钟转数（RPM）计算。
</p>
```

此 HTML 使用 `<var>` 来包裹两个变量的名称。

#### 运行结果

规范
--

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

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

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


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

<plaintext>
===========

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

概述
--

*HTML 纯文本元素* (`<plaintext>`) 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。

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

* 它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。此外，它在 HTML5 中已过时；仍然接受它的浏览器，可能将其看做 `<pre>` 元素，它仍然会解释其中的 HTML，即使这不是你想要的结果。
* 如果 `<plaintext>` 元素是页面的第一个元素（除了任何不显示的元素），那就不要使用 HTML 了。配置你的服务器，使用 `text/plain` MIME-type (en-US) 来发送你的页面。
* 不要使用这个元素，你应该使用 `<pre>` 元素，或者如果满足语义的话，使用 `<code>` 元素。要确保转义了任何 '`<`' 、' `>`' 和 "&" 字符，来避免将内容解释为 HTML。
* 等宽字体也可以显示在 `<div>` 元素中，通过使用足够的 CSS 样式，在 `font-family` 中将 `monospace` 用作通用字体（generic-font）的值。

属性
--

除了 全局属性 之外，这个元素没有其他属性。

DOM 接口
------

元素实现了 `HTMLElement` 接口。

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

另见
--

* `<pre>` 和 `<code>` 元素可以用于替代。
* `<listing>` 和 `<xmp>` 元素，类似于 `<plaintext>` 但是也过时了。


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

<font>
======

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

概要
--

*HTML Font 元素*（`<font>`）定义了该内容的字体大小、顏色与表现。

**备注：** 不要使用这个元素！请使用 CSS 字体属性来为文本添加样式。

属性
--

如同其他 HTML 元素，这个元素支持全局属性 (en-US)。

`color`
已弃用

这个属性使用颜色名称或是十六进制的 #RRGGBB 格式，来设置文字的颜色。

`face`
已弃用

这个属性列出了一个或多个逗号分隔的字体名称。默认样式中的文档文字，会使用客户端浏览器所支持的，第一个字体风格来渲染。如果本地系统中并没有安装列出的字体，浏览器会使用系统预设的均衡（proportional）或等宽（fixed-width）字体。

`size`
已弃用

该属性将字体大小指定为数字或相对值。数值范围从 `1` 到 `7`，其中 `1` 是最小的，`3` 是默认值。可以使用相对值来定义它，例如 `+2` 或 `-3`，这将其设置为相对于默认值 `3`。

DOM 接口
------

这个元素实现了 `HTMLFontElement` (en-US) 接口。

规范
--

| Specification |
| --- |
| HTML Standard # font |

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

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


<embed>：外部内容嵌入元素 - HTML（超文本标记语言）

<embed>：外部内容嵌入元素
================

**HTML `<embed>` 元素**将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。

**备注：** 这篇文档仅定义该元素在 HTML5 中定义的部分，不包含该元素之前的声明内容和非标准的实现。

请记住，大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果你希望你的网站可以在普通用户的浏览器上运行，那么依靠 `<embed>` 通常是不明智的。

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), embedded content, interactive content, palpable content. |
| Permitted content | None, it is an empty element. |
| Tag omission | Must have a start tag, and must not have an end tag. |
| Permitted parents | Any element that accepts embedded content. |
| Permitted ARIA roles | `application` (en-US), `document` (en-US), `img` (en-US), `presentation` (en-US) |
| DOM interface | `HTMLEmbedElement` (en-US) |

属性
--

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

`height`

资源显示的高度，in CSS pixels. — (Absolute values only. NO percentages)

`src`

被嵌套的资源的 URL。

`type`

用于选择插件实例化的 MIME 类型。

`width`

资源显示的宽度，in CSS pixels. — (Absolute values only. NO percentages)

例子
--

```html
<embed type="video/quicktime" src="movie.mov" width="640" height="480" />
```

规范
--

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

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

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

**备注：** 不同浏览器之间显示有差异。Blink 内核浏览器（Chrome，Opera）会显示 HTML 资源的内容，但 Firefox 会显示一条通知消息，指出内容需要一个插件（见 Firefox bug 730768）。建议使用 <object> 或 <iframe> 元素。

参见
--

* 其他用于嵌入各种类型内容的元素还包括：`<audio>`, `<canvas>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>` 和 `<video>`.


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

<title>
=======

**HTML `<title>` 元素** 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

```html
<title>第十五届秋季运动会</title>
```

|  |  |
| --- | --- |
| 内容分类 | 元数据内容。 |
| 允许内容 | 非空字符或特殊字符（whitespace）的文本 |
| 标签遗漏 | 同时需要开标签和闭标签。注意：遗漏 `</title>` 标签会导致浏览器忽略掉页面的剩余部分。 |
| 允许的父标签 | 一个 `<head>` 元素只能包含一个 `<title>` 元素 |
| 允许的无障碍角色 | 无 |
| DOM 接口 | `HTMLTitleElement` (en-US) |

属性
--

这个元素只拥有全局属性。

使用说明
----

<title>元素始终在页面的 `<head>` 块内使用。

### 页面标题和 SEO

页面标题的内容可能对搜索引擎优化（SEO）具有重要意义。通常，较长的描述性标题要比简短或一般性标题更好。标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。同样，标题是初始的“挂钩”，你可以通过它吸引浏览浏览结果页面的读者的注意力。

撰写好标题的一些准则和技巧：

* 避免使用一两个单词的标题。对于词汇表或参考样式的页面，请使用描述性短语或术语 - 定义对。
* 搜索引擎通常显示页面标题的前 55 至 60 个字符。超出此范围的文本可能会丢失，因此请尽量不要使标题更长。如果你必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。
* 不要使用“关键字集合”。如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。
* 尝试确保你的标题在你自己的网站中尽可能唯一。标题重复（或几乎重复）可能会导致搜索结果不准确。
示例
--

```html
<title>Amazing！</title>
```

本示例建立一个页面，其标题（如显示在窗口顶部或在窗口的选项卡中）为“Amazing！”。

无障碍问题
-----

提供描述页面用途的标题值很重要。

辅助技术用户的常用导航技术是读取页面标题并推断页面包含的内容。这是因为导航到页面以确定其内容可能是一个耗时且可能引起混乱的过程。

### 示例

```html
<title>菜单 - 蓝屋中餐 - FoodYum：今日可送达的在线外卖！</title>
```

为了帮助用户，更新页面标题值以反映重大的页面状态更改（例如表单验证问题）。

```html
<title>2 个异常 - 你的订单 - 海鲜店铺 - Food：今日可送达的在线外卖！</title>
```

* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0
规范
--

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

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

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


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

<center>
========

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

HTML Center 元素（`<center>`）是个块级元素，可以包含段落，以及其他块级和内联元素。这个元素的整个内容在它的上级元素中水平居中（通常是 `<body>`）。

这个标签已经在 HTML 4（以及 XHTML 1）中废除了，以支持 CSS `text-align` 属性，它可以用于 `<div>` 元素，或者独立的 `<p>`。对于居中的块，使用其他 CSS 属性，例如 `margin-left` 和 `margin-right`，并将其设置为 `auto` (或者将 `margin` 设为 `0 auto`).

DOM 接口
------

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

**备注：** 直到 Gecko 1.9.2（包含）, Firefox 为这个元素实现了 `HTMLSpanElement` 接口。

示例 1
----

```html
<center>
  This text will be centered.
  <p>So will this paragraph.</p>
</center>
```

示例 2 (CSS 替代)
-------------

```html
<div style="text-align:center">
  This text will be centered.
  <p>So will this paragraph.</p>
</div>
```

示例 3 (CSS 替代)
-------------

```html
<p style="text-align:center">
  This line will be centered.<br />
  And so will this line.
</p>
```

注
-

向 `<div>` 或者 `<p>` 元素应用 `text-align``:center` 会使这些元素的*内容*居中，同时保留其整体大小不变。

另见
--

* `text-align`
* `display`


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

<legend>
========

**HTML <legend>** 元素用于表示其父元素 `<fieldset>` 的内容标题。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 (en-US) | 无。 |
| 允许的内容 | 语句内容（Phrasing content）。 |
| 标签忽略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | `<fieldset>` ，并且`<legend>`作为第一个子元素 |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM 接口 | `HTMLLegendElement` (en-US) |

属性
--

这个元素只有全局属性。

示例
--

在 `<form>` 中查看关于 `<legend>` 元素的示例。

规范
--

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

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

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

参见
--

* 其他与表单相关的元素：`<form>`, `<option>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` 和 `<meter>`。
* ARIA: Form role (en-US)


<html>：HTML 文档/根元素 - HTML（超文本标记语言）

<html>：HTML 文档/根元素
==================

HTML **`<html>`** 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为*根元素*。所有其他元素必须是此元素的后代。

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 一个 `<head>` 元素，后跟一个 `<body>` 元素 |
| 忽略标签 | 如果 `<html>` 元素中的第一个元素不是注释，则可以忽略开始标签。如果 `<html>` 元素没有紧接着注释，则可以忽略结束标签。 |
| 允许的父元素 | 无。这是文档的根元素。 |
| 隐式 ARIA 角色 | document (en-US) |
| 允许的 ARIA 角色 | 无 |
| DOM 接口 | `HTMLHtmlElement` |

属性
--

元素包含全局属性。

`manifest`
已弃用

非标准

指定一个资源清单的 URI，指示应在本地缓存的资源。

`version`
已弃用

指定控制当前文档的 HTML 版本文档类型定义。这个属性已不再需要，因为这在文档类型声明中是多余的版本信息。

`xmlns`

指派文档的 XML 命名空间 (en-US)。默认的值是`"http://www.w3.org/1999/xhtml"`。这在由 XML 解析器 (en-US)解析的文档中是必需的，而在 text/html 文档中是可选的。

示例
--

```html
<!doctype html>
<html lang="zh">
  <head>
    <!-- … -->
  </head>
  <body>
    <!-- … -->
  </body>
</html>
```

无障碍考虑
-----

虽然 HTML 并不要求作者指定 `<html>` 元素的开始和结束标记，但作者必须这样做，因为这将允许他们为网页指定 `lang`。根据 RFC 5646: 识别语言的标签（也称为 BCP 47），在 `<html>` 元素上提供一个带有有效语言标记的 `lang` 属性，将有助于屏幕阅读技术确定要发布的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它，屏幕阅读器通常会默认使用操作系统设置的语言，这可能会导致发音错误。

在 `<html>` 元素中包含一个有效的 `lang` 声明，还可以确保页面的 `<head>` 中包含的重要元数据，如页面的 `<title>`，也会被正确地声明。

* MDN | 理解 WCAG，指引 3.1 的解释 (en-US)
* 理解成功准则 3.1.1 | W3C 理解 WCAG 2.1
规范
--

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

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

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

参见
--

* MathML 顶级元素：`<math>`
* SVG 顶级元素：`<svg>`