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

form
====

**HTML `<form>` 元素**表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

尝试一下
----

可以用 `:valid` 和 `:invalid` CSS 伪类来设置 `<form>` 元素的样式，此时样式的表现取决于表单中的 `elements` 是否有效。

|  |  |
| --- | --- |
| 内容类别 | Flow content, palpable content |
| 可包含内容 | Flow content, but not containing `<form>` elements |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级元素 | 可以是 HTML 的任何标签 |
| Implicit ARIA role | `form (en-US)` if the form has an accessible name, otherwise no corresponding role |
| Permitted ARIA roles | `search (en-US)`, `group` (en-US), `presentation` (en-US) |
| DOM 接口 | `HTMLFormElement` |

属性
--

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

`accept`
已弃用

一个逗号分隔的列表，包括服务器能接受的内容类型。

**备注：** **此属性已在 HTML5 中被移除并且不再被使用**。作为替代，可以使用 `<input type=file>` 元素中的 `accept` 属性。

`accept-charset`

 一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 `"UNKNOWN"`。此字符串指的是，和包含此表单元素的文档相同的编码。
 在之前版本的 HTML 中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只有空格可以允许作为分隔符。

`autocapitalize`
非标准

这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中，输入/编辑一些文本值时，此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 `autocapitalize` 属性在某个单独的表单后代控件被指定的话，那么此单独的设定会覆盖原来表单范围内的 `autocapitalize` 设定。默认值为 `sentences`。可以选择的值如下：

* `none`：完全禁用自动首字母大写。
* `sentences`：自动对每句话首字母大写。
* `words`：自动对每个单词首字母大写。
* `characters`：自动大写所有的字母。

`autocomplete`

用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 `autocomplete` 属性覆盖。可能的值有：

* `off`：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 自动填充属性和登录）
* `on`：浏览器可自动补全条目

`name`

表单的名称。HTML 4 中不推荐（应使用 `id`）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。

`rel`

根据 value 创建一个超链接或 Creates a hyperlink or annotation depending on the value, see the `rel` attribute for details.

### 关于提交表单的属性

下列属性控制提交表单时的行为。

`action`

处理表单提交的 URL。这个值可被 `<button>`、`<input type="submit">` 或 `<input type="image">` 元素上的 `formaction` 属性覆盖。

`enctype`

当 `method` 属性值为 `post` 时，`enctype` 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：

* `application/x-www-form-urlencoded`：未指定属性时的默认值。
* `multipart/form-data`：当表单包含 `type=file` 的 `<input>` 元素时使用此值。
* `text/plain`：出现于 HTML5，用于调试。这个值可被 `<button>`、`<input type="submit">` 或 `<input type="image">` 元素上的 `formenctype` 属性覆盖。

`method`

浏览器使用这种 HTTP 方式来提交 表单。可能的值有：

* `post`：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
* `get`：指的是 HTTP GET 方法；表单数据会附加在 `action` 属性的 URL 中，并以 '?' 作为分隔符，没有副作用 时使用这个方法。
* `dialog`：如果表单在 `<dialog>` 元素中，提交时关闭对话框。此值可以被 `<button>`、`<input type="submit">` 或 `<input type="image">` 元素中的 `formmethod` 属性覆盖。

`novalidate`

此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 `<button>`、`<input type="submit">` 或 `<input type="image">` 元素中的 `formnovalidate` 属性覆盖。

`target`

表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个*浏览上下文* 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：

* `_self`：默认值。在相同浏览上下文中加载。
* `_blank`：在新的未命名的浏览上下文中加载。
* `_parent`：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 \_self 表现一致。
* `_top`：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 \_self 表现一致。此值可以被 `<button>`、`<input type="submit">` 或 `<input type="image">` 元素中的 `formtarget` 属性覆盖。

示例
--

### HTML

```html
<!-- Form which will send a GET request to the current URL -->
<form>
  <label
 >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label
 >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio" /> Select me</label>
  </fieldset>
</form>
```

规范
--

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

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

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

参见
--

* HTML 表单指南
* 还有其他的一些元素也用于创建表单：`<button>`、`<datalist>`、`<fieldset>`、`<input>`、`<label>`、`<legend>`、`<meter>`、`<optgroup>`、`<option>`、`<output>`、`<progress>`、`<select>`、`<textarea>`
* Getting a list of the elements in the form: `HTMLFormElement.elements`
* ARIA: Form role (en-US)
* ARIA: Search role (en-US)


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

<ins>
=====

简介
--

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

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

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

`cite`

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

`datetime`

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

示例
--

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

### 结果

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

规范
--

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

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

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

参阅
--

* `<del>`


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

========

总结
--

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

使用环境
----

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

属性
--

只具有全局属性.

DOM 接口
------

实现了 `HTMLElement` 接口。

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

举例
--

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

效果
--
```

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

### Bold vs. Strong

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

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

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

### Emphasis vs. Strong

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

规范
--

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

同样参见
----

* HTML bold element
* HTML em element


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

<acronym>
=========

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

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

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

属性
--

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

DOM 接口
------

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

示例
--

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

### 结果

默认样式
----

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

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

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

规范
--

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

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

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

参见
--

* `<abbr>` HTML 元素


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

<strike>
========

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

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

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

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

属性
--

这个元素包含全局属性。

示例
--

```html
<strike>: <strike>Today's Special: Salmon</strike> SOLD OUT<br />
<s>: <s>Today's Special: Salmon</s> SOLD OUT
```

代码结果为：

规范
--

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

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

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

参见
--

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


<body>：文档主体元素 - HTML（超文本标记语言）

<body>：文档主体元素
=============

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

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

属性
--

此元素包含 全局属性 。

`alink`
已弃用

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

`background`
已弃用

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

`bgcolor`
已弃用

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

`bottommargin`
已弃用

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

`leftmargin`
已弃用

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

`link`
已弃用

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

`onafterprint`

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

`onbeforeprint`

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

`onbeforeunload`

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

`onblur`

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

`onerror`

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

`onfocus`

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

`onhashchange`

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

`onlanguagechange`
实验性

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

`onload`

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

`onmessage`

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

`onoffline`

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

`ononline`

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

`onpopstate`

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

`onredo`

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

`onresize`

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

`onstorage`

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

`onundo`

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

`onunload`

文档关闭时调用的函数。

`rightmargin`
已弃用

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

`text`
已弃用

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

`topmargin`
已弃用

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

`vlink`
已弃用

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

例子
--

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

规范
--

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

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

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

参见
--

* `<html>`
* `<head>`


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

<noscript>
==========

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

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

属性
--

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

示例
--

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

### 允许脚本时的结果

Rocks!

### 禁用脚本时的结果

External Link

Rocks!

规范
--

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

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

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


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

<caption>
=========

简介
--

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

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

特性
--

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

`align`
已弃用

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

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

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

使用说明
----

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

实例
--

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

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

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

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

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

See also
--------

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


<template>：内容模板元素 - HTML（超文本标记语言）

<template>：内容模板元素
=================

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

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

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

属性
--

此元素仅包含全局属性。

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

示例
--

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

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

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

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

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

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

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

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

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

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

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

规范
--

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

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

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

参见
--

* Web components: `<slot>` (and historical: `<shadow>`)
* Using templates and slots


<progress>：进度指示元素 - HTML（超文本标记语言）

<progress>：进度指示元素
=================

概述
--

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

尝试一下
----

使用上下文
-----

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

属性
--

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

`max`

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

`value`

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

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

DOM 接口
------

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

示例
--

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

### 结果

规范
--

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

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

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

参见
--

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


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

<dl>
====

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

尝试一下
----

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

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

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

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

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

示例
--

### 单条术语与描述

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

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

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

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

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

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

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

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

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

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

### 元数据

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

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

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

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

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

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

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

备注
--

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

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

规范
--

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

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

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

参见
--

* `<dt>`
* `<dd>`


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

<code>
======

摘要
--

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

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

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

例子
--

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

### 结果

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

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

注意
--

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

规范
--

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

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

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

参见
--

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


<tbody>：表格主体元素 - HTML（超文本标记语言）

<tbody>：表格主体元素
==============

**`<tbody>`** HTML 元素封装了一系列表格的行（`<tr>` 元素），代表了它们是表格（`<table>`）主要内容的组成部分。

尝试一下
----

`<tbody>` 元素和它的兄弟节点 `<thead>` 和 `<tfoot>` 为出于无障碍访问需求的屏幕或打印机上的表格渲染提供了有用的语义信息。

|  |  |
| --- | --- |
| 内容分类 | 无。 |
| 允许的内容物 | 0 个或多个 `<tr>` 元素。 |
| 标签是否可省略 | 元素 `<table>` 父元素的渲染无需 `<tbody>` 子元素。然而，如果 `<table>` 父元素有 `<thead>`、`<tfoot>` 或另一个 `<tbody>` 子元素，它必须存在。如果 `<tbody>` 元素以 `<tbody>` 元素开始，并且并不紧跟着一个未关闭的 `<tbody>` 元素，则其打开标签可以省略。 |
| 允许的父元素 | 在所需的 `<table>` 父元素内，`<tbody>` 元素可以添加在 `<caption>`、`<colgroup>` 和 `<thead>`的后方。 |
| 隐式 ARIA 角色 | `rowgroup (en-US)` |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLTableSectionElement` (en-US) |

属性
--

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

### 废弃的属性

`align`
已弃用

该枚举 (en-US)属性指定了每个单元格的水平对齐方式。可能的值如下：

* `left`，表格内容左对齐
* `center`，表格内容居中对齐
* `right`，表格内容右对齐
* `justify`，在文本内容中插入空格，使内容在单元格中对齐。
* `char`，将文本内容对准一个特殊的字符，其最小偏移量由 `char` 和 `charoff` 属性定义。

如果没有设定该属性，则假定使用 `left` 值。

由于该属性已经废弃，请使用 CSS `text-align` 属性作为替代。

**备注：** `text-align` 属性的 `align="char"` 取值尚未在任何浏览器中实现。请参阅 `text-align` 的浏览器兼容性小节以获取 `<string>` 的可能取值。

`bgcolor`
已弃用

表格的背景颜色。它是一个以 '`#`' 开头的 6 位数十六进制 RGB 代码。也可以使用任意一个预定义的颜色关键字。

由于该属性已经废弃，请使用 CSS `background-color` 属性作为替代。

`char`
已弃用

该属性用于设置列中单元格的对齐字符。当试图对齐数字或货币价值时，其典型值包括一个句号（`.`）。如果 `align` 没有设置为 `char`，这个属性就会被忽略。

`charoff`
已弃用

这个属性用来表示从 `char` 属性指定的对齐字符中偏移列数据的字符数。

`valign`
已弃用

该属性指定了每个单元格的垂直对齐方式。可能的值如下：

* `baseline` 将文本尽量放置在单元格底部，但在基线处而不是字符底部对齐。如果字符具有相同大小，则与 `bottom` 效果一致。
* `bottom` 将文本尽量放置在单元格底部。
* `middle` 将文本放置在单元格中间。
* 和 `top` 将文本尽量放置在单元格顶部。

由于该属性已经废弃，请使用 CSS `vertical-align` 属性作为替代。

使用说明
----

* 如果表格包含 `<thead>` 块（语义上标识表头行），那么 `<tbody>` 块*必须*紧随它。
* 如果你使用 `<tbody>`，你就不能同时拥有表格行（`<tr>` 元素），它们是 `<table>` 的直接子元素，但不包括在 `<tbody>` 内。如果使用了 `<tbody>`，所有非标题和非页脚的行都必须在其内。
* 在打印文档时，`<thead>` 和 `<tfoot>` 元素指定的信息在多页表格的每一页都可能是相同的，或者至少是非常相似的，而 `<tbody>` 元素的内容一般会在不同的页面上有所不同。
* 当一个表格呈现在屏幕环境（如窗口）中，而屏幕环境又不足以显示整个表格时，用户代理可以让用户滚动同一父表的`<thead>`、`<tbody>`、`<tfoot>`和 `<caption>` 块中的内容，彼此分开。
* 你*可以*在每一个表格使用多于一个 `<tbody>`，只要它们是连续的。这可以让你把大表格中的行分成几个部分，如果需要的话，每个部分都可以单独设置格式。
示例
--

下面是一些说明 `<tbody>` 元素用途的示例。要知道该标签使用的更多示例，请查看 `<table>`。

### 基本示例

在这个相对简单的示例中，我们创建了带有 `<thead>` 和 `<tbody>` 的一组学生信息表，表格中含有若干行。

#### HTML

该表的 HTML 显示在这里。请注意，所有的主体单元包括学生的信息都包含在一个单一的 `<tbody>` 元素中。

```html
<table>
  <thead>
    <tr>
      <th>学生 ID</th>
      <th>姓名</th>
      <th>专业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>计算机科学</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>俄国文学</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>天体物理学</td>
    </tr>
  </tbody>
</table>
```

#### CSS

表格的 CSS 样式如下所示：

```css
table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}
```

首先，设置表格的整体样式属性，配置表格外部边框的厚度、样式和颜色，并使用 `border-collapse` 确保相邻单元格之间共享边框线，而不是每个单元格都有自己的边框，中间有空间。`font` 用于为表格建立一个初始字体。

```css
th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}
```

然后为表格中的大部分单元格设置样式，包括所有的数据单元格，以及那些在我们的 `<td>` (en-US) 和 `<th>` 单元格之间共享的样式。这些单元格被赋予了一个单像素厚的浅灰色轮廓，调整了填充，并使用 `text-align` 对所有单元格进行左对齐。

```css
thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}
```

最后，包含在 `<thead>` 块中的标题单元被赋予额外的样式。它们使用更深的 `background-color`，更大的字体大小，以及比其他单元格边框更厚、更深的底边。

#### 结果

生成的表格看起来像这样：

### 多个表格主体

你可以使用多个 `<tbody>` 元素来在一个表格中建立多个部分。每个部分可能包含它自己的表头或一些行；然而，*每个表格里只能有一个 `<thead>` 元素！* 由于刚才所述的原因，你需要用 `<tr>` 填充 `<th>` 元素，在每个 `<tbody>` 内创建标题。让我们来看看这是怎么做到的。

让我们以前面的例子为例，在列表中增加一些学生，并更新表格，使其不再在每一行列出每个学生的专业，而是按专业分组，每个专业都有标题行。

#### 结果

为了让你知道我们在做什么，首先在这里给出生成的表格：

#### HTML

改变的 HTML 看起来像这样：

```html
<table>
  <thead>
    <tr>
      <th>学生 ID</th>
      <th>姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">计算机科学</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">俄国文学</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">天体物理学</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
    </tr>
  </tbody>
</table>
```

注意，每个专业都放在了分开的 `<tbody>` 块之下，其中的第一列包含了一个带有 `colspan` 属性的 `<th>` 元素，横跨了整个表格的宽度。该标题列出了包含在 `<tbody>` 中的专业名称。

在每个专业的 `<tbody>` 下的剩余行包含两个单元格：第一个是学生的 ID，第二个是它们的名字。

#### CSS
```

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}
```

大部分 CSS 代码均未改变。我们只是为直接包含在 `<tbody>` 中的表头的单元格添加了一些样式（而不是在 `<thead>` 中）。这用于表示每个表格部分对应的主要内容的标题。

```css
tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}
```

规范
--

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

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

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

参见
--

* 对于 `<tbody>` 元素可能特别有用的 CSS 属性和伪类：
    + `:nth-child` 伪类用于设置单元格的对齐方式；
    + `text-align` 属性用于将所有单元格内容对齐在同一个字符上，如 `.`。


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

<bdi>
=====

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

尝试一下
----

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

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

属性
--

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

示例
--

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

### 结果

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

规范
--

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

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

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

参见
--

* 相关元素：`<bdo>`
* 相关属性：`direction`, `unicode-bidi`


<summary>：摘要展现元素 - HTML（超文本标记语言）

<summary>：摘要展现元素
================

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

尝试一下
----

属性
--

本元素仅包含全局属性。

使用注意
----

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

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

### 默认标签文字

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

### 默认样式

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

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

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

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

示例
--

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

### 基本示例

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

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

#### 结果

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

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

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

#### 结果

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

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

### summary 元素中的 HTML

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

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

#### 结果

技术概要
----

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

规范
--

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

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

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

参见
--

* `<details>`


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

<fieldset>
==========

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

尝试一下
----

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

属性
--

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

`disabled`

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

`form`

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

`name`

元素分组的名称

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

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

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

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

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

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

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

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

示例
--

### 简单的 fieldset

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

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

### 禁用 fieldset

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

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

技术概览
----

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

规范
--

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

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

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

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

参见
--

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


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

<del>
=====

HTML 的 **`<del>`** 标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。`<ins>`标签的作用恰恰于此相反：表示文档中添加的内容。

这个标签通常（但不一定要）在文字上显示删除线。

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

属性
--

这个标签包含全局属性。

`cite`

提供一个 URI，其中的资源解释作出修改的原因（比如：根据某次会议讨论）。

`datetime`

这个属性说明修改的时间和日期，这里的时间和日期格式要符合规范。如果设置的值不符合该规范，那么它将没有任何意义。

示例
--

```html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
```

### 结果

~~This text has been deleted~~, here is the rest of the paragraph.

~~This paragraph has been deleted.~~

规范
--

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

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

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

相关链接
----

* `<ins>` 标签用来表示插入文本的内容
* `<s>` 标签用来显示删除线，代表内容被删除了


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

<rp>
====

**HTML `<rp>` 元素**用于为那些不能使用 `<ruby>` 元素展示 ruby 注解的浏览器，提供随后的圆括号。

|  |  |
| --- | --- |
| Content categories | 无 |
| 允许的内容 | 文本 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | `<ruby>` 元素。 `<rp>` 必须位于 `<rt>` 的前面和后面。 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

这个元素仅仅支持 全局属性 (en-US)。

用法注解
----

* Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 `<rp>` 元素用于不支持 `<ruby>` 元素的情况。 `<rp>` 的内容提供了应该展示的东西，通常是圆括号，以便表示 ruby 注解的存在。
示例
--

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

规范
--

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

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

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

另见
--

* `<ruby>`
* `<rt>`
* `<rb>`
* `<rtc>`


<dialog>：对话框元素 - HTML（超文本标记语言）

<dialog>：对话框元素
==============

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
HTML **`<dialog>`** 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。

|  |  |
| --- | --- |
| 内容分类 | 流式元素、分段内容 |
| 允许的内容 | 流式元素 |
| 标签是否可省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受流式元素的元素 |
| 隐式 ARIA 角色 | dialog (en-US) |
| 允许的 ARIA 角色 | `alertdialog` (en-US) |
| DOM 接口 | `HTMLDialogElement` |

属性
--

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

**警告：** `tabindex` 属性不能被使用在 `<dialog>` 元素上。

`open`

指示这个对话框是激活的和能互动的。当没有设置 `open` 属性时，对话框*不应该*显示给用户。推荐使用 `.show()` 或 `.showModal()` 方法来渲染对话框，而不是使用 `open` 属性。

无障碍考虑
-----

`<dialog>` 元素的早期实现在某些形式的辅助技术上仍存在可用性问题。为了保证 Safari 15.4 版本以下的无障碍性，推荐使用临时的解决方案（如：a11y-dialog）以获得持续的可用性支持。

在实现一个对话框时，考虑最合适的地方来设置用户焦点是很重要的。通过使用 autofocus 属性明确指出初始焦点的位置，将有助于确保初始焦点被设置到被认为是任何特定对话框的最佳初始焦点位置的元素。由于并不总是知道初始焦点可以设置在对话框中的什么地方，特别是对于对话框的内容在被调用时动态呈现的情况，如果有必要，作者可以决定聚焦于 `<dialog>` 元素本身，提供最佳的初始焦点位置。

确保给予用户关闭对话框的机制。最有力的方法是给用户提供一个明确的按钮，如确认、取消或关闭按钮。此外，对于那些使用键盘设备的人来说，`Escape` 键通常也会用来关闭模态对话框。默认情况下，一个由 `showModal()` 方法调用的 `<dialog>` 将允许其被 `Escape` 关闭。非模态对话框默认不会通过 `Escape` 键来关闭，而且根据非模态对话框所代表的内容，它可能不希望有这种行为。如果打开了多个模态对话框，`Escape` 只应该关闭最后一个可见对话框。

浏览器使用 ARIA role="dialog" (en-US) 属性对 `<dialog>` 元素进行了类似于自定义对话框的暴露。由 `showModal()` 方法调用的 `<dialog>` 元素将有一个隐含的 aria-modal="true" (en-US)。而由 `show()` 方法调用的 `<dialog>` 元素，或通过使用 `open` 属性，或改变 `<dialog>` 的默认 `display` 而呈现的，将被暴露为 `[aria-modal="false"]`。建议使用适当的 `showModal()` 或 `show()` 方法来渲染对话框。

确保你的对话框实现不会破坏预期的默认行为，并遵循正确的标签建议。

使用说明
----

* `<form>` 元素可关闭含有属性 `method="dialog"` 的对话框。当提交表单时，对话框的 `returnValue` (en-US) 属性将会等于表单中被使用的提交按钮的 `value`。
* `::backdrop` CSS 伪元素可用于给使用 `HTMLDialogElement.showModal()` (en-US) 显示的 `<dialog>` 元素背景添加样式，例如在对话框被打开激活时，调暗背景中不可访问的内容。
示例
--

### 简单示例

下面的示例会渲染一个非模态对话框。在对话框激活的状态下，点击“OK”按钮将会关闭对话框。提供一种机制来关闭 `dialog` 元素中的对话框是很重要的。例如，`Esc` 键在默认情况下不会关闭非模态对话框，同时也不能假设用户可以使用一个物理键盘（例如，使用不带物理键盘的触摸屏设备）。

```html
<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>
```

### 高级示例

当单击“Update details”按钮时，此示例打开一个包含一个表单的弹出对话框。

#### HTML

```html
<!-- Simple modal dialog containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label
 >Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="updateDetails">Update details</button>
</p>
<output></output>
```

#### JavaScript

```js
const updateButton = document.getElementById("updateDetails");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// If a browser doesn't support the dialog, then hide the
// dialog contents by default.
if (typeof favDialog.showModal !== "function") {
  favDialog.hidden = true;
  /\* a fallback script to allow this dialog/form to function
 for legacy browsers that do not support <dialog>
 could be provided here.
 \*/
}
// "Update details" button opens the <dialog> modally
updateButton.addEventListener("click", () => {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    outputBox.value =
      "Sorry, the <dialog> API is not supported by this browser.";
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener("close", () => {
  outputBox.value = `${
 favDialog.returnValue
 } button clicked - ${new Date().toString()}`;
});
```

### 结果

规范
--

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

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

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

参见
--

* `close` 事件
* `cancel` 事件
* HTML 表单指南
* `::backdrop` 伪元素
* dialog-polyfill


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

<param>
=======

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

概要
--

\*\*HTML `<param>元素`\*\*为`<object>`元素定义参数

|  |  |
| --- | --- |
| 内容分类 (en-US) | 无 |
| 允许内容 | 不允许，它是一个空元素（empty element）。 |
| 标签省略 | 由于它是一个 void 元素，所以开始标签必须出现，而结束标签必须不出现。 |
| 允许的父级元素 | 任何以下内容（flow content (en-US)）都可以在`<object>`元素的前面作为它的父元素。 |
| DOM 接口 | `HTMLParamElement` (en-US) |

属性
--

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

`name`

参数的名字。

`type`
已弃用

仅当 valuetype 设置为“ref”时才使用。根据 URI 中给定的数据确定 MIME 类型。

`value`

确定参数的值。

`valuetype`
已弃用

确定参数的类型。可选值如下：

* data: 默认值。该值作为字符串变量传递给对象实例。
* ref: 该值是存储运行时变量的资源的 URI。
* object: 同一页面（document）中另一个`<object>`的 ID。

示例
--

请在`<object>`页面中查看<param>的示例。

规范
--

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

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

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

参阅
--

* `<object>`


<img>：图像嵌入元素 - HTML（超文本标记语言）

<img>：图像嵌入元素
============

**`<img>`** HTML 元素将一张图像嵌入文档。

尝试一下
----

上面的例子展示了 `<img>` 元素的用法：

* `src` 属性是**必须的**，它包含了你想嵌入的图片的路径。
* `alt` 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它**难以置信地有用**——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 `alt` 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期。

还有很多其他属性，可以实现各种不同的目的：

* Referrer/CORS 控制，保证安全与隐私：详见 `crossorigin` 和 `referrerpolicy` 属性。
* 使用 `width` 和 `height` 设置图像的固有尺寸（intrinsic size）：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。
* 使用 `sizes` 和 `srcset` 设置响应式图像（参见 `<picture>` 元素和我们的响应式图像教程）。
支持的图像格式
-------

HTML 标准并没有给出需要支持的图像格式的列表，因此每个用户代理支持一组不同的格式。

**备注：** 网页浏览器图像格式指南提供了有关图像格式及 Web 浏览器支持的综合信息。本节只是一个总结！

Web 最常用的图像格式是：

* APNG（动态可移植网络图形）——无损动画序列的不错选择（GIF 性能较差）。
* AVIF（AV1 图像文件格式）——静态图像或动画的不错选择，其性能较好。
* GIF（图像互换格式）——*简单*图像和动画的不错选择。
* JPEG（联合图像专家组）——有损压缩静态图像的不错选择（目前最流行的格式）。
* PNG（便携式网络图形）——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
* SVG（可缩放矢量图形）——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
* WebP（网络图片格式）——图像和动画的绝佳选择。

推荐使用诸如 WebP 和 AVIF 等图像格式，因为它们在静态图像和动画的性能均比 PNG、JPEG、JIF 好得多。WebP 得到了广泛的支持，而 AVIF 则缺乏 Safari 的支持。

对于必须以不同尺寸准确绘制的图像，则仍然推荐使用 SVG 格式。

图像加载错误
------

如果在加载或渲染图像时发生错误，且设置了至少一个 `onerror` 事件处理器来处理 `error` 事件，那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下，包括：

* `src` 属性的属性值为空（`""`）或者 `null`。
* `src` 属性的 URL 和用户正在浏览的页面的 URL 完全相同。
* 图像出于某些原因损坏了，从而无法加载。
* 图像的元数据被破坏了，无法检索它的分辨率/宽高，而且在 `<img>` 元素的属性中没有指定宽度/高度。
* 用户代理尚未支持该图片所用的格式。
属性
--

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

`alt`

定义了图像的备用文本描述。

**备注：** 浏览器并非总是会显示图像。比如：

* 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
* 用户选择不显示图像（比如为了节省带宽，或出于隐私考虑）
* 图像文件无效，或是使用了不支持的格式

在这些情况下，浏览器很可能会将图像替换为图像所属 `<img>` 元素的 `alt` 属性所提供的文本。基于上面罗列的原因，建议尽可能地通过 `alt` 属性提供一些有用的信息。

如果把这个属性设置为空字符串（`alt=""`），则表明该图像*不是*内容的关键部分（这是一种装饰或者一个追踪像素点），非可视化浏览器在渲染 (en-US)的时候可能会忽略它。而且，如果图片加载失败，可视化浏览器会隐藏表示图片损坏的图标。

将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。

`crossorigin`

这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 `<canvas>` 元素中重复使用，而不会被标记为“污染（tainted）”。

如果*未指定* `crossorigin` 属性，则会发送不启用 CORS 的请求（不会携带 `Origin` 请求标头），且浏览器会将图像标记为“被污染”并拒绝对图像数据的访问，阻止其在 `<canvas>` 元素中的使用。

如果*指定*了 `crossorigin` 属性，则会发送启用 CORS 的请求（会携带 `Origin` 请求标头）；但是如果服务器不选择允许源站点对图像数据进行跨源访问（不发送任何 `Access-Control-Allow-Origin` 响应标头，或发送的 `Access-Control-Allow-Origin` 标头中不包含源站点），浏览器则会阻止图像的加载，并在开发者工具的控制台中记录 CORS 错误。

允许的值有：

`anonymous`

发送忽略凭据的跨源请求（即，不携带 cookie、X.509 证书 或 `Authorization` 请求标头）。

`use-credentials`

发送携带凭据的跨源请求（比如 cookie、X.509 证书和 `Authorization` 请求标头）。如果服务器不选择与源站共享凭据（通过返回 `Access-Control-Allow-Credentials: true` 响应标头） ，则浏览器会将图像标记为被污染且限制对其图像数据的访问。

如果属性是无效值，浏览器默认将其当做 `anonymous` 关键字。更多信息，请查看 CORS 属性设置。

`decoding`

为浏览器提供图像解码方式上的提示。允许的值：

`sync`

同步解码图像，实现与其他内容互斥的原子渲染。

`async`

异步解码图像，以减少其他内容的渲染延迟。

`auto`

默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。

`fetchpriority`
实验性

提供获取图像时要使用的相对的优先级提示。允许的值：

`high`

表示其获取优先级相对其他图像要高。

`low`

表示其获取优先级相对其他图像要低。

`auto`

默认值：表示自动确定其相对其他图像的获取优先级。

`height`

图像的固有高度，以像素为单位。必须是没有单位的整数值。

**备注：** 同时包括 `height` 和 `width` 使浏览器在加载图像之前计算图像的长宽比。此长宽比用于保留显示图像所需的空间，减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。减少布局偏移是良好用户体验和 Web 性能的主要组成部分。

`ismap`

这个布尔属性表示图像是否是服务器端图像映射的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。

**备注：** 只有在 `<img>` 元素是一个拥有有效 `href` 属性的 `<a>` 元素的后代元素的情况下，这个属性才会被允许使用。

`loading`

指示浏览器应当如何加载该图像。允许的值：

`eager`

立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。

`lazy`

延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。

**备注：** 仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施，因为，如果用户代理在禁用脚本的情况下支持延迟加载，网站可以在会话中策略性地放置图像，通过服务器跟踪请求了多少图像以及请求在何时发起，来跟踪用户在整个会话期间的大致滚动位置。

`referrerpolicy`

一个字符串，指示在获取资源时使用的来源地址（referrer）：

* `no-referrer`：不会发送 `Referer` 标头。
* `no-referrer-when-downgrade`：若未使用 TLS（HTTPS）导航到源站，则不发送 `Referer` 标头。
* `origin`：发送到源站的来源地址将被限制为：协议、主机和端口。
* `origin-when-cross-origin`：发送到其他来源的来源地址会被限制为协议、主机和端口。同源导航仍将包含路径。
* `same-origin`：仅同源请求发送来源地址，而跨源请求则不包含来源地址信息。
* `strict-origin`：仅在协议安全级别保持不变（HTTPS→HTTPS）的情况下将文档的来源作为来源地址发送。而在目标的安全性降低（HTTPS→HTTP）时则不发送来源地址。
* `strict-origin-when-cross-origin`（默认值）：执行同源请求时发送完整的 URL，且仅在协议安全级别保持不变（HTTPS→HTTPS）时发送来源（origin），在目标安全性降低（HTTPS→HTTP）时则不发送来源。
* `unsafe-url`：来源地址包括来源（origin）*和*路径（path）（但不包括片段、密码或用户名）。**这个值是不安全的**，因为它将来源和路径从受 TLS 保护的资源泄露到不安全的来源。

`sizes`

表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：

1. 一个媒体条件。最后一项一定是被忽略的。
2. 一个资源大小的值。

媒体条件描述*视口*的属性，而不是*图像*的属性。例如，如果*视口*不高于 500px，则建议使用 1000px 宽的资源：`(max-height: 500px) 1000px`。

资源尺寸的值被用来指定图像的预期尺寸。当 `srcset` 中的资源使用了宽度描述符 `w` 时，用户代理会使用当前图像大小来选择 `srcset` 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小 (en-US)（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 `srcset` 属性，或者没有属性值，那么 `sizes` 属性也将不起作用。

`src`

图像的 URL，这个属性对 `<img>` 元素来说是必需的。在支持 `srcset` 的浏览器中，`src` 被当做拥有一个像素密度的描述符 `1x` 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 `srcset` 或者 `srcset` 包含 `w` 描述符中定义了。

`srcset`

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

1. 指向图像的 URL。
2. 可选地，再加一个空格之后，附加以下的其一：
    * 一个宽度描述符（一个正整数，后面紧跟 `w` 符号）。该整数宽度除以 `sizes` 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
    * 一个像素密度描述符（一个正浮点数，后面紧跟 `x` 符号）。

如果没有指定源描述符，那它会被指定为默认的 `1x`。

在相同的 `srcset` 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 `srcset` 两个源都是 `2x`）也是无效的。

用户代理自行决定选择任何可用的来源。这位它们提供了一个很大的选择余地，可以根据用户偏好或带宽条件等因素来进行选择。有关示例，可以参阅响应式图像教程。

`width`

图像的宽度，以像素为单位。必须是没有单位的整数。

`usemap`

与元素相关联的图像映射（image map） (en-US)的部分 URL（以 `#` 开始的部分）。

**备注：** 如果 `<img>` 元素是 `<a>` 或 `<button>` 元素的后代元素则不能使用这个属性。

### 已废弃的属性

`align`
已弃用

图像相对于它周围上下文的对齐。使用 `float` 和/或 `vertical-align` 这两个 CSS 属性作为代替。允许的值：

`top`

等价于 `vertical-align: top` 或 `vertical-align: text-top`

`middle`

等价于 `vertical-align: -moz-middle-with-baseline`

`bottom`

默认值，等价于 `vertical-align: unset` 或 `vertical-align: initial`

`left`

等价于 `float: left`

`right`

等价于 `float: right`

`border`
已弃用

图像周围的边框宽度。使用 CSS 属性 `border` 代替此废弃属性。

`hspace`
已弃用

插入到图像的左侧和右侧的空白像素的值。使用 CSS 属性 `margin` 代替此废弃属性。

`longdesc`
已弃用

一个指向更详细的图像描述的链接。可能的值是一个 URL 或一个页面上其他元素的 `id`。

**备注：** 此属性在当前最新的 W3C (en-US) 版本——HTML 5.2 中被提到，但在 WHATWG 组织的 HTML Living Standard 中依然处于被移除的状态。它的未来尚无定数；开发者应使用 WAI (en-US)-ARIA 这一代替方法，例如：`aria-describedby` 或 `aria-details`。

`name`
已弃用

元素的名字。使用 `id` 属性代替此废弃属性。

`vspace`
已弃用

插入到图像的上方和下方的空白像素的数组。使用 CSS 属性 `margin` 代替此废弃属性。

使用 CSS 添加样式
-----------

`<img>` 是一个可替换元素。它的 `display` 属性的默认值是 `inline`，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 `inline-block` 一样。你可以为 `<img>` 设置 `border`/`border-radius`、`padding`/`margin`、`width`、`height` 等 CSS 属性。

`<img>` 没有基线（baseline），这意味着，当在一个内联格式化上下文（inline formatting context）中使用 `vertical-align``: baseline` 时，图像的底部将会与容器的文字基线对齐。

你可以使用 `object-position` 属性将图形定位在元素的框内，并使用 `object-fit` 属性调整框内图像的大小（例如，如果图像需要裁剪，则其是否需要调整以符合框的大小，或填满整个框）。

根据图像的类型，其可能会有一个原始的宽和高（原始分辨率）。对于一些类型的图像，原始分辨率并不是必要的。比如说，SVG 图像，如果它们的根 `<svg>` 元素没有 `width` 或 `height` 属性，SVG 图像就可以没有原始分辨率。

示例
--

### 备用文字

下面的示例将图像嵌入到页面中，且包含用于改善无障碍的备用文本。

```html
<img src="favicon144.png" alt="MDN logo" />
```

### 图像链接

此示例建立在前一个示例的基础上，展示了如何将图像转换为链接。为做到这一点，将 `<img>` 标签嵌套在 `<a>` 之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。

```html
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>
```

### 使用 srcset 属性

在这个例子中，我们包含了一个 `srcset` 属性，它引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代 `src` 属性中的图像。在支持 `srcset` 的用户代理中，`src` 属性中的图片被作为 `1x` 候选项。

```html
<img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />
```

### 使用 srcset 和 sizes 属性

在支持 `srcset` 的用户代理中，当使用 `w` 描述符时，`src` 属性会被忽略。当匹配了媒体条件 `(max-width: 600px)` 时，将加载 200 像素宽的图像（最匹配的图像），否则将加载另一幅图像。

```html
<img
 src="clock-demo-200px.png"
 alt="Clock"
 srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
 sizes="(max-width: 600px) 200px, 50vw" />
```

**备注：** 若要看到大小调整的效果，请打开单独的页面查看示例，以便拖动窗口，调整内容区域的大小。

安全与隐私方面的考量
----------

虽然 `<img>` 元素的用途是很单纯（innocent）的，但是它们可对用户安全和隐私造成不良的后果。参见 Referer 标头：隐私与安全性考量 (en-US)以获取更多信息和缓解措施。

无障碍考量
-----

### 使用有实际意义的备用描述

`alt` 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述，`alt` 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。

#### 不要

```html
<img alt="图片" src="penguin.jpg" />
```

#### 而是

```html
<img alt="一只站在沙滩上的跳岩企鹅。" src="penguin.jpg" />
```

当图像上没有 `alt` 属性时，一些屏幕阅读器可能会读出图像的文件名。如果文件名不能代表图像的内容，甚至是一团乱码，这可只能造成令人迷惑的体验。

* alt 决策树 • 图像 • WAI Web 无障碍教程
* 备用文本：终极指南——Axess Lab
* 如何设计出色的替代文本：教程 | Deque
* MDN 理解 WCAG——指南 1.1 解析 (en-US)
* 了解成功的标准 1.1.1 | W3C 理解 WCAG 2.0
### 将 SVG 识别为图像

由于 VoiceOver bug，VoiceOver 无法正确地将 SVG 图像渲染为图像。在所有使用 SVG 资源文件的 `<img>` 元素中包含 `role="img"` (en-US) 以保证无障碍技术正确地将 SVG 声明为图像内容。

```html
<img src="mdn.svg" alt="MDN logo" role="img" />
```

### title 属性

`title` 属性不是 `alt` 属性可接受的替代品。并且，避免将 `alt` 属性的值直接复制到同一幅图片的`title` 属性上。这样可能会让一些屏幕阅读器把同一段描述读两遍，造成一定程度上的困扰。

`title` 属性也不该被用作一幅图片在 `alt` 之外的补充说明信息。如果一幅图片需要小标题，使用 `figure` 或 `figcaption` 元素。

`title` 元素的值一般作为提示条（tooltip）呈现给用户，在光标于图片上停下后显示出来。尽管这*确实*能给用户提供更多的信息，你不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，选择上面提供的一种方法将其内联显示，而不是使用 `title`。

* 使用 HTML title 属性 | The Paciello Group
技术总结
----

|  |  |
| --- | --- |
| 内容类别 | 流式内容、短语内容、嵌入内容、可感知内容。如果元素有 `usemap` 属性，则其也是交互式内容的一种。 |
| 允许的内容 | 无；其为 空元素。 |
| 标签省略 | 必须有开始标签，且不能有结束标签。 |
| 允许的父元素 | 接受嵌入内容的任何元素。 |
| 隐式 ARIA 角色 | * 具有非空 `alt` 属性或没有
 `alt` 属性：``img` (en-US)`
* 具有空 `alt` 属性：`presentation` (en-US)
 |
| 允许的 ARIA 角色 | * 具有非空 `alt` 属性：
    + `button`
    + `checkbox (en-US)`
    + `link` (en-US)
    + `menuitem` (en-US)
    + `menuitemcheckbox` (en-US)
    + `menuitemradio` (en-US)
    + `option` (en-US)
    + `progressbar` (en-US)
    + `scrollbar` (en-US)
    + `separator` (en-US)
    + `slider` (en-US)
    + `switch (en-US)`
    + `tab (en-US)`
    + `treeitem` (en-US)
* 具有空 `alt` 属性、`none` (en-US)
 或 `presentation` (en-US)
* 没有 `alt` 属性，或没有允许的角色（`role`）
 |
| DOM 接口 | `HTMLImageElement` |

规范
--

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

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

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

参见
--

* HTML 中的图片
* 图像文件类型与格式指南
* 响应式图像
* `<picture>`、`<object>` 和 `<embed>` 元素
* 其他与图像相关的 CSS 属性：`object-fit`、`object-position`、`image-orientation`、`image-rendering` 和 `image-resolution` (en-US)。


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

<tr>
====

**HTML `<tr>` 元素**定义表格中的行。同一行可同时出现`<td>` (en-US) 和`<th>` 元素。

|  |  |
| --- | --- |
| Content categories (en-US) | None |
| Permitted content | Zero or more `<td>` (en-US) or `<th>` elements, or a mix of them |
| Tag omission | Start tag is mandatory. End tag may be omitted if the `<tr>` element is immediately followed by a `<tr>` element, or if the parent table group (`<thead>`, `<tbody>` or `<tfoot>`) element doesn't have any more content |
| Permitted parents | `<table>`, `<thead>`, `<tbody>` or `<tfoot>` element |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLTableRowElement` (en-US) |

Attributes
----------

表格标签支持 全局特性 (en-US)。还有一些过期的特性，你应该避免使用它们，但是可以了解它们，会在你阅读旧代码的时候有所帮助。

`align`
已弃用

该枚举属性指定每个单元格中内容的水平对齐方式，可使用的属性值如下：

* `left`, 内容在单元格中左对齐
* `center`, 内容在单元格中居中
* `right`, 内容在单元格中右对齐
* `justify`, 增加文本内容之间的空白以伸展这行文本，使得该单元格中的多行文本具有相同的长度。
* `char`, aligning the textual content on a special character with a minimal offset, defined by the `char` and `charoff` attributes 未实现 (查看 Firefox bug 2212)If this attribute is not set, the parent node's value is inherited.

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

* To achieve the same effect as the `left`, `center`, `right` or `justify` values, use the CSS `text-align` property on it.
* To achieve the same effect as the `char` value, in CSS3, you can use the value of the `char` as the value of the `text-align` property 未实现.

`bgcolor`
已弃用

This attribute defines the background color of each cell of the row. It can be either an hexadecimal `#RRGGBB` or `#RGB` value or a color keyword.

**备注：** the `<tr>` element should be styled using CSS. To give a similar effect to the **bgcolor** attribute, use the CSS property `background-color`.

`char`
已弃用

This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If `align` is not set to `char`, this attribute is ignored.

**备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the `char`, in CSS3, you can use the character set using the `char` attribute as the value of the `text-align` property 未实现.

`charoff`
已弃用

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the **char** attribute.

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

`valign`
已弃用

This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:

* `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`.
* `bottom`, which will put the text as close to the bottom of the cell as it is possible;
* `middle`, which will center the text in the cell;
* and `top`, which will put the text as close to the top of the cell as it is possible.

**备注：** Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS `vertical-align` property on it.

Examples
--------

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

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

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

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

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

See also
--------

* Other table-related HTML Elements: `<caption>`, `<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>` (en-US), `<tfoot>`, `<th>`, `<thead>`;
* CSS properties and pseudo-classes that may be specially useful to style the `<tr>` element:
    + the `:nth-child` pseudo-class to set the alignment on the cells of the column;
    + the `text-align` property to align all cells content on the same character, like '.'.<


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

<wbr>
=====

**HTML `<wbr>` 元素** — 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US). |
| Permitted content | Empty |
| Tag omission | It is an empty element; it must have a start tag, but must not have an end tag. |
| Permitted parents | Any element that accepts phrasing content (en-US). |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

属性
--

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

Notes
-----

在 UTF-8 编码的页面中， `<wbr>` 表现为 `U+200B ZERO-WIDTH SPACE` （零宽空格）代码点。特别是，它表现为 Unicode bidi BN 代码点，也就是说，它对 bidi-ordering 没有影响：`<div dir=rtl>123,<wbr>456</div>` 展示 `123,456` 而不是 `456,123`，当不拆成的两行时候。

出于相同原因， `< wbr >`元素不会在换行的地方引入连字符。为了使连字符仅仅在行尾出现，使用连字符软实体 (`& shy;`) 来代替。

这个元素首先在 Internet Explorer 5.5 中实现，并且在 HTML5 中官方定义。

示例
--

*Yahoo 代码规范*推荐在标点之前为 URL 换行，以便避免将标点符号留在行尾，这会让读者将 URL 的末尾搞错。

```html
<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
```

规范
--

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

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

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


<blockquote>：块级引用元素 - HTML（超文本标记语言）

<blockquote>：块级引用元素
===================

**HTML `<blockquote>` 元素**（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 `<cite>` 元素。

尝试一下
----

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

属性
--

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

`cite`

是一个标注引用的信息的来源文档或者相关信息的 URL。通常用来描述能够解释引文的上下文或者引用的信息。

使用说明
----

若要修改被引用内容的缩进距离，可以使用 CSS `margin-left` 和/或 `margin-right` 属性，或使用 `margin` 缩写属性。

若想使用在行内引用较短的内容而非创建一个单独的引用块，可使用 `<q>`（Quotation）元素。

如果想要使用短引用（行间引用），可以使用`<q>` 标签。

示例
--

下面的这个例子演示了使用 `<blockquote>` 元素引用一段来自 RFC 1149 的内容，以禽类作为载体的 IP 数据包传输标准。

```html
<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside of early spring.
    This is because of the 3D ether space available to the carriers, in contrast
    to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>
```

上面的 HTML 代码将会生成：

规范
--

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

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

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

参见
--

* 适用于行内引用的 `<q>` 元素。
* 适用于来源引文的 `<cite>` 元素。


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

<dd>
====

**HTML `<dd>` 元素**（*HTML 描述元素*）用来指明一个描述列表 (`<dl>`) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 `<dt>` 元素。

|  |  |
| --- | --- |
| 内容分类 (en-US) | None |
| 允许的内容 | 流内容 (en-US) |
| 标签省略 | 必须有开标签。如果该元素后面紧跟着另一个 <dd> 元素，或者父元素中没有更多内容，则可以省略闭标签。 |
| 允许的父元素 | 该元素需要出现在 `<dt>` 元素和 `<dd>` 元素之后，并且在一个 `<dl>` 元素里。 |
| DOM 接口 | `HTMLElement` |

属性
--

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

`nowrap`
非标准

如果这个属性的值为 yes，那么定义的描述文字将不会包裹。默认值为 no。

示例
--

示例请看<dl> 的示例。

规范
--

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

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

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

See also
--------

* `<dl>`, `<dt>`


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

<rt>
====

**HTML Ruby 文本 (`<rt>`) 元素**包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 `<ruby>` 元素中使用。

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 短语内容 |
| 标签省略 | 如果 `<rt>` 元素紧紧跟随 `<rt>` 或者 `<rp>` 元素，或者父元素中没有更多内容了，结束标签可以省略。 |
| 允许的父元素 | `<ruby>` 元素 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

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

示例
--

```html
<ruby> 汉 <rt>Hàn</rt> 字 <rt>Zì</rt> </ruby>
```

规范
--

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

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

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

另见
--

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rtc>`


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

=========

**HTML `<article>`** 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

尝试一下
----

给定文档中可以包含多篇文章;例如，阅读器在博客上滚动时一个接一个地显示每篇文章的文本，每个帖子将包含在`<article>`元素中，可能包含一个或多个`<section>`。

|  |  |
| --- | --- |
| 内容分类 (en-US) | Flow content (en-US), sectioning content, palpable content. |
| 允许的内容 | Flow content (en-US). |
| 标记省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 所有接受 Flow content (en-US)的元素。注意`<article>`元素不能成为`<address>`元素的子元素。 |
| 允许的 ARIA roles | `application` (en-US), `document` (en-US), `feed` (en-US), `main` (en-US), `presentation` (en-US), `region` (en-US) |
| DOM 实例 | `HTMLElement` |

属性
--

此元素只具有全局属性 (en-US)。

使用说明
----

* 每个`<article>`，通常包括标题（
 -
元素）作为`<article>`元素的子元素。
* 当`<article>`元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的`<article>`元素可嵌套在代表博客文章的`<article>`元素中。
* `<article>`元素的作者信息可通过`<address>`元素提供，但是不适用于嵌套的`<article>`元素。
* `<article>`元素的发布日期和时间可通过`<time>`元素的`pubdate`属性表示。
* 可以使用`<time>` 元素的`datetime`属性来描述`<article>`元素的发布日期和时间。请注意`<time>`的\*`pubdate`\* 属性不再是\*W3C (en-US)\* \*HTML5\*标准。
示例
--

```html
<article class="film\_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main\_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user\_reviews">
    <article class="user\_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user\_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>
```

规范
--

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

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

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

相关文章
----

* Others section-related elements: `<body>`, `<nav>`, `<section>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`
* Sections and outlines of an HTML5 document.


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

<slot>
======

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

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

* Learn more
* See full compatibility
* Report feedback

**备注：** 本翻译的一些术语参考了Vuejs-中文页面。

**HTML `<slot>` 元素**，作为 Web Component 技术套件的一部分，是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样你就可以创建单独的 DOM 树，并将它与其他的组件组合在一起。

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

属性
--

此元素有全局属性。

`name`

插槽的名字。拥有 name 属性的插槽叫**具名插槽**。

示例
--

```html
<template id="element-details-template">
  <style>
 details {
 font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 .name {
 font-weight: bold;
 color: #217ac0;
 font-size: 120%;
 }
 h4 {
 margin: 10px 0 -8px 0;
 background: #217ac0;
 color: white;
 padding: 2px 6px;
 border: 1px solid #cee9f9;
 border-radius: 4px;
 }
 .attributes {
 margin-left: 22px;
 font-size: 90%;
 }
 .attributes p {
 margin-left: 16px;
 font-style: italic;
 }
 </style>
  <details>
    <summary>
      <code class="name"
 ><<slot name="element-name">NEED NAME</slot>></code
 >
      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>
```

**备注：** 你可以在 element-details (see it running live) 找到这个示例的完整演示版。另外，你也可以在Using templates and slots这里找到具体的解释。

规范
--

| Specification |
| --- |
| HTML Standard # the-slot-element |
| DOM Standard # shadow-tree-slots |

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

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


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

<script>：脚本元素
=============

HTML **`<script>`** 元素用于嵌入可执行代码或数据，这通常用作嵌入或者引用 JavaScript 代码。`<script>` 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。

|  |  |
| --- | --- |
| 内容分类 | 元数据内容、流式内容、短语内容。 |
| 允许的内容 | 动态脚本，如 `text/javascript`。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何可以接受元数据内容，或者短语内容的元素。 |
| 隐含的 ARIA 角色 | 没有对应的角色 |
| 允许的 ARIA 角色 | 不允许任何 `role` |
| DOM 接口 | `HTMLScriptElement` |

属性
--

该元素包含全局属性。

`async`

对于普通脚本，如果存在 `async` 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 `async` 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除**解析阻塞的 Javascript**。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。`defer` 在这一点上也有类似的作用。

这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

关于浏览器支持，请参见浏览器兼容性章节。另可参见 asm.js 的异步脚本文章。

`crossorigin`

正常的 `script` 元素将最小的信息传递给 `window.onerror`，用于那些没有通过标准 CORS 检查的脚本。要允许对静态媒体使用独立域名的网站进行错误记录，请使用此属性。参见 CORS 设置属性，以获得对其有效参数的更多描述性解释。

`defer`

这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 `DOMContentLoaded` 事件之前执行的。

包含 `defer` 属性的脚本将阻塞 `DOMContentLoaded` 事件触发，直到脚本完成加载并执行。

**警告：** 本属性不应在缺少 `src` 属性的情况下使用（也就是内联脚本的情况下），这种情况下将不会生效。

`defer` 属性对模块脚本也不会生效——它们默认是 defer 的。

包含 `defer` 属性的脚本会按照它们出现在文档中的顺序执行。

这个属性能够消除**阻塞解析的 JavaScript**，在这种情况下，浏览器必须在继续解析之前加载和执行脚本。`async` 在这种情况下也有类似的效果。

`fetchpriority`
实验性

提供一个指示，说明在获取外部脚本时要使用的相对优先级。允许的值：

`high`

获取该脚本的优先级比其他外部脚本的等级要高。

`low`

获取该脚本的优先级比其他外部脚本的等级要低。

`auto`

默认值：自动确定获取该脚本的相对优先级。

`integrity`

包含用户代理可用于验证所获取到资源的完整性的内联元数据。参见子资源完整性。

`nomodule`

这个布尔属性被设置来标明这个脚本不应该在支持 ES 模块的浏览器中执行。实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。

`nonce`

在 script-src Content-Security-Policy (en-US) 中允许脚本的一个一次性加密随机数（nonce）。服务器每次传输策略时都必须生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 是至关重要的，因为绕过一个资源的策略是微不足道的。

`referrerpolicy`

表示在获取脚本或脚本获取资源时，要发送哪个 referrer：

* `no-referrer`：不会发送 `Referer` 标头。
* `no-referrer-when-downgrade`（默认）：如果没有 TLS（HTTPS）协议，`Referer` 标头将不会被发送到源上。
* `origin`：发送的 referrer 将被限制在 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 保护的资源的源和路径泄露给不安全的源。

**备注：** 空字符串（`""`）既是默认值，也是在不支持 `referrerpolicy` 的情况下的一个回退值。如果没有在 `<script>` 元素上明确指定 `referrerpolicy`，它将采用更高级别的 referrer 策略，即对整个文档或域设置的策略。如果没有更高级别的策略，空字符串将被视为等同于 `no-referrer-when-downgrade`。

`src`

这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。

**`type`** (en-US)

该属性表示所代表的脚本类型。该属性的值可能为以下类型：

**属性未设置（默认），一个空字符串，或一个 JavaScript MIME 类型**

代表脚本为包含 JavaScript 代码的“传统的脚本”。如果脚本指的是 JavaScript 代码，我们鼓励作者省略这个属性，而不是指定一个 MIME 类型。所有的 JavaScript MIME 类型都列在 IANA 的媒体类型规范中。

`module`

此值导致代码被视为 JavaScript 模块。其中的代码内容会延后处理。`charset` 和 `defer` 属性不会生效。对于使用 `module` 的更多信息，请参见 JavaScript 模块指南。与传统代码不同的是，模块代码需要使用 CORS 协议来跨源获取。

`importmap`

此值代表元素体内包含导入映射（importmap）表。导入映射表是一个 JSON 对象，开发者可以用它来控制浏览器在导入 JavaScript 模块时如何解析模块标识符。

**任何其他值**

所嵌入的内容被视为一个数据块，不会被浏览器处理。开发人员必须使用有效的 MIME 类型，但不是 JavaScript MIME 类型来表示数据块。所有其他属性，包括 `src` 均会被忽略。

`blocking`
实验性

这个属性明确指出，在获取脚本的过程中，某些操作应该被阻断。要阻断的操作必须是一个以空格分隔的列表，下面列出了阻断属性。

* `render`：屏幕上渲染内容的操作应该被阻断。

### 废弃的属性

`charset`
已弃用

如果存在，它的值必须是 ASCII 大小写不敏感的“`utf-8`”的匹配。没有必要指定 `charset` 属性，因为文档必须使用 UTF-8，而且 `script` 元素从文档继承其字符编码。

`language`
已弃用

非标准

和 `type` 属性类似，这个属性定义脚本使用的语言。但是与 `type` 不同的是，这个属性的可能值从未被标准化过。请用 `type` 属性代替这个属性。

备注
--

没有 `async`、`defer` 或 `type="module"` 属性的脚本，以及没有 `type="module"` 属性的内联脚本，会在浏览器继续解析页面之前立即获取并执行。

脚本应该以 `text/javascript` 的 MIME 类型提供，但浏览器比较宽容，只有在脚本以图像类型（`image/*`）、视频类型（`video/*`）、音频类型（`audio/*`）或 `text/csv` 提供时才会阻止它们。如果脚本受阻，将向该元素发送 `error` 事件；否则，将发送 `load` (en-US) 事件。

示例
--

### 基本用法

下面这些示例说明了如何使用 `<script>` 元素来导入（外部）脚本。

```html
<script src="javascript.js"></script>
```

以下示例展示了如何向 `<script>` 元素内放入（内联）脚本。

```html
<script>
 alert("Hello World!");
</script>
```

### 模块回落

支持 `module` 作为 `type` 属性的浏览器忽略任何具有 `nomodule` 属性的脚本。这种机制可以允许你在使用模块脚本时为不支持的浏览器提供 `nomodule` 标记的回落脚本。

```html
<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>
```

### 使用导入映射导入模块

在脚本中导入模块时，如果你不使用 `type=importmap` 特性，那么每个模块都必须使用模块指定符来导入，该指定符可以是绝对的也可以是相对的 URL。在下面的例子中，第一个模块标识符（“./shapes/square.js”）是相对于文档的根 URL 解析的，而第二个是绝对 URL。

```js
import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";
```

导入映射允许你提供一个映射，当匹配的时候，可以替换模块标识符文本。下面的导入映射定义了“square”和“circle”键，可以作为上述模块指定的别名。

```html
<script type="importmap">
 {
 "imports": {
 "square": "./shapes/square.js",
 "circle": "https://example.com/shapes/circle.js"
 }
 }
</script>
```

这允许我们使用模块标识符中的名称导入模块（而不是绝对或相对的 URL）。

```js
import { name as squareName, draw } from "square";
import { name as circleName } from "circle";
```

关于使用导入映射的更多例子，请参见 JavaScript 模块指南中的使用导入映射导入模块章节。

### 在 HTML 中嵌入数据

你也可以使用 `<script>` 元素来在 HTML 中嵌入服务端渲染的数据，在 `type` 属性中指定一个合法的非 JavaScript MIME 类型即可。

```html
<!-- 由服务端生成 -->
<script id="data" type="application/json">
 {
 "userId": 1234,
 "userName": "Maria Cruz",
 "memberSince": "2000-01-01T00:00:00.000Z"
 }
</script>

<!-- 静态代码 -->
<script>
 const userInfo = JSON.parse(document.getElementById("data").text);
 console.log("User information: %o", userInfo);
</script>
```

### 在脚本被获取和执行之前阻止渲染

你可以在 `blocking` 属性中包含 `render` 标记；页面的渲染将被阻止，直到脚本被获取和执行。在下面的例子中，我们封锁了一个异步脚本的渲染、这样，脚本不会阻塞解析，但保证在渲染开始前被执行。

```html
<script blocking="render" async src="async-script.js"></script>
```

规范
--

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

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

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

参见
--

* `document.currentScript`
* Flavio Copes 关于“高效加载 JavaScript”的文章，解释了 `async` 和 `defer` 之间的区别
* JavaScript 模块指南


标准元数据名称 - HTML（超文本标记语言）

标准元数据名称
=======

The `<meta>` 元素可用于提供 名称 - 值 对形式的文档元数据，`name` 属性为元数据条目提供名称，而 `content` 属性提供值。

### HTML 规范中定义的标准元数据名称

HTML 规范定义了以下标准元数据名称：

* `application-name`：网页中所运行的应用程序的名称。

**备注：** 浏览器可能使用此名称来识别应用程序。It is different from the `<title>` element, which usually contain the application name, but may also contain information like the document name or a status. 简单的网页不应当使用 `application-name`。
* `author`：文档作者的名字。
* `description`：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
* `generator`：生成此页面的软件的标识符（identifier）。
* `keywords`：与页面内容相关的关键词，使用逗号分隔。
* `referrer`：控制由当前文档发出的请求的 HTTP `Referer` 请求头。

| 属性值 | 描述 |
| --- | --- |
| `no-referrer` | 不发送 HTTP `Referer` 请求头。 |
| `origin` | 只发送当前文档的 origin。 |
| `no-referrer-when-downgrade` | 如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送完整 URL；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。这是默认行为。 |
| `origin-when-cross-origin` | 对同源请求发送完整 URL（不含 URL 参数），其他情况下，只发送 origin。 |
| `same-origin` | 对同源请求发送完整 URL（不含 URL 参数），其他情况下，请求不包含 referrer 请求头。 |
| `strict-origin` | 如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。 |
| `strict-origin-when-cross-origin` | 对同源请求发送完整 URL（不含 URL 参数）；其他情况下，如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。 |
| `unsafe-URL` | 对同源请求和跨源请求发送完整 URL（不含 URL 参数）。 |

**备注：** 动态插入 `<meta name="referrer">`（使用 `document.write()` 方法或者 `appendChild()` 等方法）会使 referrer 行为变得不可预测。如果定义了互相冲突的策略，则会转而使用 `no-referrer` 策略。
* `theme-color`：表示当前页面的建议颜色，在自定义当前页面从或页面周围的用户界面的显示时，用户代理应当使用此颜色。`content` 属性应当包含一个有效的 CSS `<color>` 值。
### 其他规范中定义的标准元数据名称

CSS 颜色调整规范（CSS Color Adjustment specification）定义了以下元数据名称：

* `color-scheme`: 指定与当前文档兼容的一种或多种配色方案。
 浏览器将优先采用此元数据的值，然后再使用用户的浏览器或设备设置，来确定页面上的各种默认颜色和元素外观，例如背景色、前景色、窗体控件和滚动条。`<meta name="color-scheme">` 的主要用途是指示当前页面与浅色模式和深色模式的兼容性，以及选用这两种模式时的优先顺序。
 `color-scheme` 的 `content` 属性的值应当为以下值中的一个：

`normal`

该文档未指定（unaware of）配色方案，应当仅使用默认配色进行渲染。

[`light` | `dark`]+

文档所支持的一种或多种配色方案。如果多次指定同一个配色方案，则与仅指定一次效果相同。如果指定了多种配色方案，则表示文档优先选择第一种方案——如果用户更倾向于选择第二种配色方案，则可以接受第二种。

`only light`

表示文档*仅*支持浅色模式，也就是浅色背景色和深色前景色。按照规范，`only dark` *是无效的*。如果在文档不支持深色模式的情况下强迫其以深色模式进行渲染，会导致内容不可读。所以，在未经配置的情况下，所有主要浏览器均默认使用浅色模式。

举个例子，为了指明该文档偏好使用深色模式同时也支持浅色模式，代码如下：

```html
<meta name="color-scheme" content="dark light" />
```

This works at the document level in the same way that the CSS `color-scheme` property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the `prefers-color-scheme` CSS media feature.

CSS 设备适配规范（CSS Device Adaptation specification）定义了以下元数据名称：

* `viewport`: 为视口的初始大小提供指示（hint）。目前仅用于移动设备。

| 值 | 可能的附加值 | 描述 |
| --- | --- | --- |
| `width` | 一个正整数，或者字符串 `device-width` | 定义 viewport 的宽度，如果值为正整数，则单位为像素。 |
| `height` | 一个正整数，或者字符串 `device-height` | 定义 viewport 的高度。未被任何浏览器使用。 |
| `initial-scale` | 一个 `0.0` 和 `10.0` 之间的正数 | 定义设备宽度（宽度和高度中更小的那个：如果是纵向屏幕，就是 `device-width`，如果是横向屏幕，就是 `device-height`）与 viewport 大小之间的缩放比例。 |
| `maximum-scale` | 一个 `0.0` 和 `10.0` 之间的正数 | 定义缩放的最大值，必须大于等于 `minimum-scale`，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。 |
| `minimum-scale` | 一个 `0.0` 和 `10.0` 之间的正数 | 定义缩放的最小值，必须小于等于 `maximum-scale`，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。 |
| `user-scalable` | `yes` 或者 `no` | 默认为 `yes`，如果设置为 `no`，用户将无法缩放当前页面。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。 |
| `viewport-fit` | `auto`、`contain` 或者 `cover` | The `auto` value doesn’t affect the initial layout viewport, and the whole web page is viewable.The `contain` value means that the viewport is scaled to fit the largest rectangle inscribed within the display.The `cover` value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display. |

**备注：** 虽然此元数据条目未被标准化，但是，由于此条目在事实上处于支配地位，大多数移动浏览器都遵守此条目的声明。

    + 不同设备和浏览器的默认值可能有不同。
    + 若想了解 Firefox 移动版对此声明的支持和处理，请参考这篇文章。

##### 关于 viewport 缩放的无障碍考量

将 `user-scalable` 设置为 `no` 会阻止一切意义上的缩放，视力不好的人可能会因此无法阅读和理解页面内容。

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
### 其他元数据名称

The WHATWG Wiki MetaExtensions page contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:

* `creator`：当前文档的创建者，例如某个组织或者机构。如果有不止一个创建者，则应当使用多个名称为 `creator` 的 `<meta>` 元素。（而不是像关键词一样使用逗号分隔：关键词不应包含逗号，但创建者名称可能含有逗号。）
* `googlebot`：`robots` 的替代名称，只被 Googlebot（Google 的网页爬虫/索引搜寻器）使用。
* `publisher`：当前文档的发布者/出版者。
* `robots`：爬虫、协作搜寻器，或者“机器人”，对此页面的处理行为，或者说，应当遵守的规则。是一个使用逗号分隔的、由下列值构成的列表：

| 值 | 描述 | 被用于 |
| --- | --- | --- |
| `index` | 允许机器人索引此页面（默认）。 | 所有爬虫 |
| `noindex` | 要求机器人不索引此页面。 | 所有爬虫 |
| `follow` | 允许机器人跟随此页面上的链接（默认）。 | 所有爬虫 |
| `nofollow` | 要求机器人不跟随此页面上的链接。 | 所有爬虫 |
| `all` | 与 `index, follow` 等价 | Google |
| `none` | 与 `noindex, nofollow` 等价 | Google |
| `noarchive` | 要求搜索引擎不缓存页面内容。 | Google、Yahoo、Bing |
| `nosnippet` | 不在搜索引擎的结果中显示该网页的任何描述。 | Google、Bing |
| `noimageindex` | Requests this page not to appear as the referring page of an indexed image. | Google |
| `nocache` | `noarchive` 的替代名称。 | Bing |

**备注：** 只有正规的爬虫/协作搜寻器/机器人遵守这些规则。不要指望爬取电子邮件地址的恶意爬虫也这么做。

    + 只有访问相应的页面之后，机器人才能读取到这些规则。为避免这一点带来的带宽消耗，可以在 *robots.txt (en-US)* 文件中声明一些规则。
    + 如果你想从机器人的索引中移除某个页面，`noindex` 可以做到这一点，但机器人还是得先访问那个页面，读取到 `noindex` 规则。遇到这种情况时，请确保 `robots.txt` 文件没有阻止机器人重新访问那个页面。
    + 一些规则是互相矛盾的比如 `index` 和 `noindex`，或者 `follow` 和 `nofollow`。这种情况下，机器人的表现是不可预测的，而且不同机器人的表现可能有不同。
    + 一些爬虫机器人，比如 Google、Yahoo 和 Bing 的搜索引擎爬虫，支持在 HTTP `X-Robots-Tag` 请求头中应用相同的规则。这允许非 HTML 文档和文件等应用这些规则。
规范
--

| Specification |
| --- |
| HTML Standard # standard-metadata-names |
| Referrer Policy # referrer-policy-delivery-meta |

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

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


theme-color - HTML（超文本标记语言）

theme-color
===========

`<meta>` 中 `name` 属性的值为 **`theme-color`** 时，用户的浏览器将根据所设定的建议颜色来改变用户界面。倘若设置了该值，则 `content` 属性必须包含有效的 CSS `<color>` 值。

示例
--

```html
<meta name="theme-color" content="#4285f4" />
```

下图展示了上方所示的 `<meta>` 元素对于 Android 端 Chrome 浏览器造成的影响。

![示 theme-color 对浏览器的影响](/zh-CN/docs/Web/HTML/Element/meta/name/theme-color/theme-color.png)

*图片来源：《图标和浏览器颜色》, 由 Google 创作并经署名 4.0 国际 (CC BY 4.0) 许可证共享。*

你可以用 `media` 来查询一个媒体类型，如果条件符合则使用对应颜色。比如：

```html
<meta
 name="theme-color"
 media="(prefers-color-scheme: light)"
 content="white" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
```

规范
--

| Specification |
| --- |
| HTML Standard # meta-theme-color |

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

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


<script type="importmap"> - HTML（超文本标记语言）

<script type="importmap">
=========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`<script>` 元素的 `type` (en-US) 属性的 **`importmap`** 值表示元素的主体包含一个导入映射。

导入映射（import map）是一个 JSON 对象，其允许开发者在导入 JavaScript 模块时，控制浏览器如何解析模块标识符。它提供了在 `import` 语句或 `import()` 运算符 (en-US)中用作模块标识符的文本，其会在解析标识符时与要替换的文本之间建立映射。JSON 对象必须符合导入映射 JSON 表示格式。

导入映射用于解析静态和动态导入中的模块标识符，因此必须在使用映射表中声明的标识符导入模块的任何 `<script>` 元素之前声明和处理。注意，导入映射仅适用于在 `import` 语句或 `import()` 运算符 (en-US)中的模块标识符；它不适用于 `<script>` 元素的 `src` 属性中指定的路径。

有关更多信息，请参见 JavaScript 模块指南的使用导入映射导入模块部分。

语法
--

```html
<script type="importmap">
 // 定义导入的 JSON 对象
</script>
```

不得指定 `src`、`async`、`nomodule`、`defer`、`crossorigin`、`integrity` 和 `referrerpolicy` 属性。

仅处理文档中具有内联定义的第一个导入映射；忽略任何额外的导入映射和外部导入映射。

### 异常

`TypeError`

导入映射的定义不是 JSON 对象、`importmap` 键已定义但它的值不是 JSON 对象或 `scopes` 键已定义但它的值不是 JSON 对象。

对于导入映射 JSON 不符合导入映射模式的其他情况，浏览器会生成控制台警告。

如果 script 元素中的 `type="importmap"` 没有被处理，则会触发 `error` 事件。这是可能发生的，例如，在处理导入模块时模块已经开始加载，或页面中定义了多个导入映射。

描述
--

当导入 JavaScript 模块时，`import` 语句和 `import()` 运算符 (en-US)都有一个“模块标识符”，其指示要导入的模块。浏览器必须能够将此标识符解析为绝对路径，才能导入模块。

例如，以下语句从模块标识符 `"./modules/shapes/square.js"` 导入元素，其是一个相对于文档的基础 URL 路径，而模块标识符 `"https://example.com/shapes/circle.js"` 是一个绝对路径。

```js
import { name as squareName, draw } from "./modules/shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";
```

导入映射允许开发者在模块标识中指定（几乎）他们想要的任意文本；映射提供了一个相应的值，该值在解析模块标识符时替换文本。

### 裸模块

下面的导入映射定义了一个 `imports` 键，该键具有属性为 `square` 和 `circle` 的“模块标识符映射”。

```html
<script type="importmap">
 {
 "imports": {
 "square": "./module/shapes/square.js",
 "circle": "https://example.com/shapes/circle.js"
 }
 }
</script>
```

使用导入映射，我们可以导入以上相同的模块，但在我们的模块标识符要使用“裸模块（bare module）”。

```js
import { name as squareName, draw } from "square";
import { name as circleName } from "circle";
```

### 映射路径前缀

模块标识符映射键也可用于重新映射模块标识符中的路径前缀。请注意，在这种情况下，属性和映射路径都必须有一个尾随的正斜杠（`/`）。

```html
<script type="importmap">
 {
 "imports": {
 "shapes/": "./module/shapes/",
 "othershapes/": "https://example.com/modules/shapes/"
 }
 }
</script>
```

然后我们可以这样导入 circle 模块。

```js
import { name as squareName, draw } from "shapes/circle.js";
```

### 模块标识符映射键中的路径

模块标识符键不必是单个单词名称（“裸模块的名称”）。它们也可以包含路径分隔符或者以路径分隔符结尾，或者是绝对 URL，或者以 `/`、`./` 或 `../` 开始的相对 URL。

```json
{
  "imports": {
    "modules/shapes/": "./module/src/shapes/",
    "modules/square": "./module/src/other/shapes/square.js",
    "https://example.com/modules/square.js": "./module/src/other/shapes/square.js",
    "../modules/shapes/": "/modules/shapes/"
  }
}
```

如果模块标识符映射中对应几个可能匹配的模块标识符键，则将选择最具体的键（即具有较长路径/值的键）。

在匹配之前，`./Foo/../js/app.js` 的模块说明符将解析为 `./js/app.js`。这意味着，即使 `./js/app.js` 的模块标识符键与模块标识符不完全相同，它们也是匹配的。

### 作用域模块标识符映射

你可以使用 `scopes` 键提供映射，仅当导入模块的脚本包含特定的 URL 路径时才使用。仅当导入模块的脚本包含一个指定的 URL 路径时，你才可以使用 `scopes` 键去提供映射。如果加载的脚本 URL 匹配提供的路径，则将使用与作用域相关联的映射。这允许根据正在导入的代码使用不同版本的模块。

例如，仅有加载的模块包含以下路径的 URL：“/modules/customshapes/”，映射才会使用作用域映射。

```html
<script type="importmap">
 {
 "imports": {
 "square": "./module/shapes/square.js"
 },
 "scopes": {
 "/modules/customshapes/": {
 "square": "https://example.com/modules/shapes/square.js"
 }
 }
 }
</script>
```

如果多个作用域与引用 URL 匹配，则使用最具体的作用域路径（具有最长名称的作用域键名称）。如果没有匹配的标识符，浏览器将会回落到下一个更具体的作用域路径，以此类推，最后会回落到 `imports` 键的模块标识符映射。

导入映射 JSON 表示
------------

以下是导入映射 JSON 表示的“正式”定义。

导入映射必须是有效的 JSON 对象，最多可以定义两个可选键：`imports` 和 `scopes`。每个键值必须是对象，可以是空。

`imports` 可选

该值是模块标识符映射，它提供可能在 `import` 语句或 `import()` 运算符中出现的模块标识符文本，其会在解析时与替换它的文本之间建立映射。

如果没有 `scopes` 路径 URL 匹配，或者如果匹配 `scopes` 路径中的模块标识符映射不包含与模块标识符匹配的键，这将是搜索匹配模块标识符的回退映射。

`<module specifier map>`

“模块标识符映射”是一个有效的 JSON 对象，其中*键*是在导入模块时，模块标识符可能存在的文本，并且相应的*值*时模块标识符解析为地址时将替换词文本的 URL 或路径。

模块标识符映射 JSON 对象有以下要求：

* 没有键可以是空的。
* 所有的值必须是字符串。定义有效的绝对 URL 或者以 `/`、`./` 或 `../` 开始的相对 URL。
* 如果一个键以 `/` 结尾，那么相应的值也必须以 `/` 结尾。带有尾随的 `/` 键可以用作映射（或重新映射）模块地址的前缀。
* 对象属性的顺序无关紧要：如果多个键可以匹配模块标识符，则使用最具体的键（换句话说，标识符“olive/branch/”将在“olive/”之前匹配）。

`scopes` 可选

作用域定义了特定于路径的模块标识符映射，这允许映射的选择取决于导入模块的代码路径。

作用域对象是一个有效的 JSON 对象，其每个属性都是一个 `<scope key>`（URL 路径），并且相应的值是一个 `<module specifier map>`。

如果导入模块脚本的 URL 匹配 `<scope key>` 路径，则首先检查与该键关联的 `<module specifier map>` 值是否匹配标识符符。如果有多个匹配的作用域键，则首先检查与最具体/嵌套的作用域路径关联的值是否匹配模块标识符。如果任何匹配的作用域模块标识符映射中没有匹配的模块标识符键，则使用 `imports` 中，备用的模块标识符映射。

请注意，作用域不会改变地址的解析方式；相对地址总是解析为导入映射的基础 URL。

规范
--

| Specification |
| --- |
| HTML Standard # import-map |

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

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

参见
--

* JavaScript 模块 > 使用导入映射导入模块
* HTML `<script>` 元素的 `type` 属性
* `import` 语句
* `import()` 运算符 (en-US)


<input type="tel"> - HTML（超文本标记语言）

<input type="tel">
==================

**`tel`** 类型的 `<input>` 元素用于让用户输入和编辑电话号码。不同于 `<input type="email">` 和 `<input type="url">`，在提交表单之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。

尝试一下
----

尽管 `tel` 类型的输入在功能上和 `text` 输入一致，但它们确实有用；其中最明显的就是移动浏览器（特别是在手机上），可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。

**备注：** 不支持 `tel` 类型的浏览器会回退为标准 text 类型输入。

```html
<input id="telNo" type="tel" />
```

|  |  |
| --- | --- |
| **值** | 代表电话号码的字符串，或为空 |
| **事件** | `change` 和 `input` |
| **支持的通用属性** | `autocomplete`、`list`、`maxlength`、`minlength`、`pattern`、`placeholder`、`readonly` 和 `size` |
| **IDL 属性** | `list`、`selectionStart`、`selectionEnd`、`selectionDirection` 和 `value` |
| **DOM 接口** | `HTMLInputElement` |
| **方法** | `select()`、`setRangeText()` (en-US) 和 `setSelectionRange()` |

值
-

`<input>` 元素的 `value` 属性包含表示一个电话号码的字符串或者一个空字符串（`""`）。

额外属性
----

除了对 `<input>` 元素生效的通用属性外，电话号码输入框还支持以下属性。

### list

list 属性的值是位于同一文档中的 `<datalist>` 元素的 `id`。`<datalist>` 提供了一个预定义的值列表，向用户建议向这个输入框输入的值。列表中任何与 `type` 不兼容的值都不包括在建议选项中。所提供的值是建议，并不是必需的：用户可以从这个预定义的列表中选择，或者提供不同的值。

### maxlength

用户可以在电话号码字段中输入的最大字符数（作为 UTF-16 编码单位）。这必须是一个不低于 0 的整数值。如果没有指定 `maxlength`，或者指定了一个无效的值，则电话号码字段没有最大长度。这个值也必须大于或等于 `minlength` 的值。

如果输入字段的文本长度大于 `maxlength` UTF-16 编码单位长度，则输入将无法通过约束验证。

### minlength

用户可以在电话号码字段中输入的最小字符数（作为 UTF-16 编码单位）。这必须是一个小于或等于 `maxlength` 所指定的值的非负整数。如果没有指定 `minlength`，或者指定了一个无效的值，电话号码的输入就没有最小长度。

如果输入字段的文本长度小于 `maxlength` UTF-16 编码单位长度，则输入将无法通过约束验证。

### pattern

如果指定了 `pattern` 属性，则该 input 的 `value` 将必须要满足其所指定的正则表达式，以通过约束验证。它必须是一个合法的 `RegExp` 类型 JavaScript 正则表达式，其具体使用方法记载到了我们的正则表达式指南中。在编译正则表达式时，使用了 `'u'` 标志，故所指定模式将视为 Unicode 码点，而非 ASCII。在模式文本中，不可以指定正斜杠符号。

具体介绍和示例请参阅模式验证部分。

### placeholder

`placeholoder` 属性是一个字符串，它向用户提供一个简短的提示，说明该字段预计会有什么样的信息。它应该是一个显示预期数据类型的单词或短语，而不是一个解释性的信息。该文本*不得*包括回车或换行。

如果控件的内容具有方向（LTR 或 RTL），但需要以相反的方向性呈现占位符，可以使用 Unicode 双向算法格式化字符来覆盖占位符内的方向性；更多信息请参见如何使用 Unicode 控件处理 bidi 文本。

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

### readonly

一个布尔属性，如果存在，意味着这个字段不能被用户编辑。但是，它的 `value` 仍然可以由 JavaScript 代码通过设置 `HTMLInputElement` 的 `value` 属性来改变。

**备注：** 由于只读字段不可以拥有值，`required` 对指定了 `readonly` 属性的输入字段不起作用。

### size

`size` 属性是一个数值，表示输入字段应该有多少个字符宽。该值必须是一个大于 0 的数字，默认值是 20。由于字符的宽度各不相同，该值可能并不精确，而且不应该依赖于此；结果输入可能比指定的字符数更窄或更宽，这取决于使用中的字符和字体（`font`）设置。

这并*不是*对用户可以在该字段中输入多少个字符的限制。它只是指定了一次大约可以看到多少个。要设置输入数据的长度上限，请使用 `maxlength` 属性。

非标准属性
-----

以下非标准属性可用于电话号码输入字段。一般来说，你应该避免使用它们，除非没有办法。

### autocorrect

Safari 的扩展，`autocorrect` 属性是一个字符串，表示在用户编辑这个字段时是否要激活自动更正。允许的值有：

`on`

启用自动更正和任何配置的文本替换处理。

`off`

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

### mozactionhint

Mozilla 的扩展，当用户编辑该字段时按下键盘的 `Enter` 或 `Return` 键时，提供的操作帮助。

该属性已经废弃：作为替代，请使用全局属性 `enterkeyhint`。

使用 tel 输入
---------

电话号码是网络上非常普遍收集的数据类型。例如，在创建任何类型的注册或电子商务网站时，无论出于商业目的还是出于紧急联系目的，你都可能需要向用户索要电话号码。鉴于通常输入的电话号码是多少，不幸的是，用于验证电话号码的“一刀切”解决方案是不实际的。

幸运的是，你可以考虑自己网站的要求，并自行实施适当的验证级别。有关详细信息，请参阅下面的验证部分。

### 自定义键盘

`<input type="tel">` 主要优势是它可以在移动浏览器显示一个特殊的电话号码输入键盘。以下是一些设备上键盘的外观。

| Android 上的 Firefox 浏览器 | WebKit iOS (Safari/Chrome/Firefox) |
| --- | --- |
| Firefox for Android screen shot | Firefox for iOS screenshot |

### 一个简单的 tel 输入

在最基本的形式中，tel 输入可以这样实现：

```html
<label for="telNo">电话号码：</label>
<input id="telNo" name="telNo" type="tel" />
```

这里没有什么神奇的事情发生。当提交给服务器时，上述输入的数据将被表示为 `telNo=+12125553151`。

### 占位符

有时候提供关于输入数据应该采用什么形式的上下文提示是很有帮助的。如果页面设计没有为每个 `<input>` 页面提供描述性标签，这可能是特别重要的。所以需要**占位符**。一个占位符是一个值，它通过提供一个有效值的例子来演示值的形式，当元素的值是`""`时，它显示在编辑框中。一旦数据输入框中，占位符就会消失；如果该框被清空，占位符会重新出现。

在这里，我们的 `tel` 输入的占位符是 `123-4567-8901`。请注意占位符如何消失并在编辑字段内容时重新出现。

```html
<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />
```

### 控制输入长度

不仅可以控制输入框的物理长度，还可以控制输入文本自身允许的最小和最大长度。

#### 输入元素的物理长度

可以使用 `size` 属性来控制输入框的物理大小，通过它，你可以指定输入框依次可以显示多少个字符。在以下示例中，`tel` 编辑框具有 20 个字符的宽度：

```html
<input id="telNo" name="telNo" type="tel" size="20" />
```

#### 元素值的长度

`size` 和电话号码的长度限制是分开的，你可以使用 `minlength` 属性为输入的电话号码指定一个最小长度，以字符为单位；同样，使用 `maxlength` 来设置输入电话号码的最大长度。

下面的示例创建了一个 20 个字符的电话号码输入框，要求内容不少于 9 个字符且不超过 14 个字符。

```html
<input
 id="telNo"
 name="telNo"
 type="tel"
 size="20"
 minlength="9"
 maxlength="14" />
```

**备注：** 上述属性确实会影响验证——如果值的长度小于 9 个字符，或者大于 14 个，上述示例的输入将被视为无效。大多数浏览器甚至不会让你输入超过最大长度的值。

### 提供默认选项

#### 使用 value 属性提供简单默认选项

与往常一样，你可以通过设置其 `value` 属性为 `tel` 输入框提供默认值：

```html
<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />
```

#### 提供建议值

你可以更进一步，提供一个默认电话号码的列表，让用户从中选择。要做到这一点，使用 `list` 属性。这不会将用户限制在这些选项中，但确实能让他们更快选择常用的电话号码。这也为 `autocomplete` 提供提示。`list` 属性指定了一个 `<datalist>` 元素的 ID，该元素又包含了每个建议值的一个 `<option>` 元素；每个 `option` 的 `value` 是电话号码输入框的相应建议值。

```html
<label for="telNo">电话号码：</label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111"></option>
  <option value="122-2222-2222"></option>
  <option value="333-3333-3333"></option>
  <option value="344-4444-4444"></option>
</datalist>
```

有了 `<datalist>` 元素及其 `<option>` 子元素，浏览器将提供指定的值作为电话号码的潜在值，通常以弹出式或下拉式菜单的形式呈现，其中包含建议。虽然具体的用户体验可能因浏览器而异，但通常情况下，点击编辑框就会出现下拉式的建议电话号码。然后，随着用户的输入，列表被调整为只显示过滤后的匹配值。每一个键入的字符都会缩小列表的范围，直到用户做出选择或键入一个自定义值。

以下屏幕截图是可能的外观表现：

![An input box has focus with a blue focus ring. The input has a drop-down menu showing four phone numbers the user can select.](/zh-CN/docs/Web/HTML/Element/input/tel/phone-number-with-options.png)

验证
--

正如我们之前谈到的那样，为电话号码提供一种通用的客户端验证解决方案是相当困难的。所以，我们能做些什么？让我们考虑一些选项。

**警告：** HTML 表单验证*不能*替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整 HTML 代码是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的 HTML，直接提交数据到你的服务器。如果你的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。

### 要求电话号码必填

你可以利用 `required` 属性令空的输入无效，并阻止其提交到你的服务器。例如，使用以下 HTML 代码：

```html
<form>
  <div>
    <label for="telNo">输入一个电话号码（必填）：</label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>提交</button>
  </div>
</form>
```

我们包含以下 CSS 代码，将有效输入显示为对勾，无效输入显示错叉：

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}
```

以上代码的输出如下图所示：

### 模式验证

如果你想进一步限制输入的数字，使它们也必须符合特定的模式，你可以使用 `pattern` 属性，它的值是正则表达式，输入的值必须符合这个正则表达式。

在这个示例中我们将使用同样的 CSS 代码，但是 HTML 代码将做一些修改：

```html
<form>
  <div>
    <label for="telNo"> 以 xxx-xxx-xxxx 格式输入一个电话号码： </label>
    <input
 id="telNo"
 name="telNo"
 type="tel"
 required
 pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity"></span>
  </div>
  <div>
    <button>提交</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}
```

请注意，除非与模式 xxx-xxx-xxxx 相匹配，否则输入的值将被报告为无效；例如，41-323-421 将不被接受。800-MDN-ROCKS 也不被接受。然而，865-555-6502 将被接受。这个特定的模式显然只对某些地区有用——在实际应用中，你可能需要根据用户的地区来改变使用的模式。

示例
--

在这个示例中，我们展示了一个简单的界面，其中有一个 `<select>` 元素，让用户选择他们所在的国家，还有一组 `<input type="tel">` 元素，让他们输入电话号码的每一部分；显然你应该有多个 `tel` 输入。

每个输入都有一个 `placeholder` 属性，以向视力正常的用户显示一个关于输入内容的提示，一个 `pattern` 来执行所需部分的特定字符数。和一个 `aria-label`属性，以包含一个提示，向屏幕阅读器用户宣读要输入的信息。

```html
<form>
  <div>
    <label for="country">Choose your country:</label>
    <select id="country" name="country">
      <option>UK</option>
      <option selected>US</option>
      <option>Germany</option>
    </select>
  </div>
  <div>
    <p>输入你的电话号码：</p>
    <span class="areaDiv">
      <input
 id="areaNo"
 name="areaNo"
 type="tel"
 required
 placeholder="Area code"
 pattern="[0-9]{3}"
 aria-label="Area code" />
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input
 id="number1"
 name="number1"
 type="tel"
 required
 placeholder="First part"
 pattern="[0-9]{3}"
 aria-label="First part of number" />
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input
 id="number2"
 name="number2"
 type="tel"
 required
 placeholder="Second part"
 pattern="[0-9]{4}"
 aria-label="Second part of number" />
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

JavaScript 代码相对简单——它包含一个 `onchange` 事件处理程序，当 `<select>` 值改变时，更新 `<input>` 元素的 `pattern`、`placeholder` 和 `aria-label` 以适应那个国家或地区的电话号码格式。

```js
const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");

selectElem.onchange = () => {
  for (let i = 0; i < inputElems.length; i++) {
    inputElems[i].value = "";
  }

  if (selectElem.value === "US") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  } else if (selectElem.value === "UK") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "Local number";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label", "Local number");
  } else if (selectElem.value === "Germany") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  }
};
```

示例的显示效果如下所示：

这是一个有趣的想法，它显示了处理国际电话号码问题的潜在解决方案。你将不得不扩大这个范例，为潜在的每个国家提供正确的模式，工作量会相当繁重，且仍然不可能全部保证用户所输入的号码值是正确的。

值得在客户端上这么麻烦吗？换个思路，就让用户在客户端随便输入任何它们想要的格式，然后让服务器进行处理，看你怎么想了。
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}
```

规范
--

| Specification |
| --- |
| HTML Standard # telephone-state-(type=tel) |

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

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

参见
--

* HTML 表单指南
* 相关的 `<input>` 元素
    + `<input type="text">`
    + `<input type="email">`
* CSS 属性兼容性


<input type="number"> - HTML（超文本标记语言）

<input type="number">
=====================

**`number`** 类型的 `<input>` 元素用于让用户输入一个数字，其包括内置验证以拒绝非数字输入。

浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。

尝试一下
----

不支持 `number` 类型的浏览器会回退为标准的 `text` 输入框。

|  |  |
| --- | --- |
| **值** | 表示一个数字的 `Number`，或为空 |
| **事件** | `change` 和 `input` |
| **支持的公共属性** | `autocomplete`、`list`、`placeholder` 和 `readonly` |
| **IDL 属性** | `list`、`value` 和 `valueAsNumber` |
| **DOM 接口** | `HTMLInputElement` |
| **方法** | `select()`、`stepUp()` (en-US) 和 `stepDown()` (en-US) |

值
-

填写到输入框中的数值文字的 `Number` 表示。你可以通过在 `value` 属性中包含一个数字来设置输入框的默认值，如下所示：

```html
<input id="number" type="number" value="42" />
```

附加属性
----

除了 `<input>` 元素共有的属性外，数字输入还提供以下属性。

### `list`

list 属性的值是位于同一文档中的 `<datalist>` 元素的 `id`。`<datalist>` 提供了可输入到当前输入框的一个预定义的值列表。列表中任何与 `type` 不兼容的值都不包括在建议选项中。所提供的值是建议，不是要求：用户可以从这个预定义的列表中选择，或者提供不同的值。

### `max`

允许值范围内的最大值。如果输入到元素中的 `value` 超过此值，则元素将无法通过约束验证。如果 `max` 属性的值不是数字，则元素没有最大值。

此值必须大于或等于 `min` 属性的值。

### `min`

允许值范围内的最小值。如果元素的 `value` 小于此值，则该元素将无法通过约束验证。如果为 `min` 指定的值不是有效数字，则输入没有最小值。

该值必须小于或等于 `max` 属性的值。

### `placeholder`

`placeholder` 属性是一个字符串，可向用户提供有关该字段中需要什么样的信息的简短提示。它应该是说明预期的数据类型的单词或短语，而不是说明性消息。文本中*不得*包含回车符或换行符。

如果控件的内容具有方向（LTR 或 RTL），但需要以相反的方向显示占位符，则可以使用 Unicode 双向算法来格式化字符，从而覆盖原有占位符的方向；请参见如何针对双向文本使用 Unicode 控制符获取更多信息。

**备注：** 请尽可能避免使用 `placeholder` 属性，它在语义上没有其他解释表单的方式有用，并且可能会导致额外的问题。参见 `<input>` 标签以获取更多信息。

### `readonly`

如果该布尔属性存在，意味着用户将不能编辑此字段。然而其 `value` 值仍然可以直接通过 JavaScript 代码设置 `HTMLInputElement` 的 `value` 属性改变。

**备注：** 由于只读字段不可以拥有值，`required` 不会对指定了 `readonly` 属性的字段起作用。

### `step`

`step` 属性指定了值必须满足的粒度，或者是下文描述的特殊值 `any`。值必须满足基础的步进值，才有效。如果指定了 `min` 属性，则由 min 属性决定，否则，使用 `value` 属性的值，如果上述两个值都不存在，则提供适当的默认值。

字符串值 `any` 意味着不使用步进值，任意值都可以接受（除其他制约因素如 `min` 或 `max` 之外）。

**备注：** 当用户输入的数据不符合步进配置时，用户代理可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。

`number` 输入的默认步进值为 `1`，且只允许数字输入——*除非*步进值不是数字。

使用 number 输入框
-------------

`number` 输入类型只能用于可增长的数字，特别是在使用按钮增减值有助于用户体验的时候。`number` 输入类型对于显示那些不能严格表示数字（可能只是碰巧包含数字）的值（例如邮政编码、信用卡号等）并不合适。对于非数字输入，请考虑使用不同的 input 类型，例如 `<input type="tel">` 或其他包含 `inputmode` 属性的 `<input>` 类型。

```html
<input type="text" inputmode="numeric" pattern="\d\*" />
```

`<input type ="number">` 元素可以帮助简化构建在表单中输入数字的用户界面和逻辑。当你使用正确的 `type` 值 `number` 创建数字输入时，会自动验证你输入的文本是否为数字，而且通常会一同设置一组用于步进数字值的向上向下按钮。

**警告：** 逻辑上，不应该向数字输入框输入数字以外的字符。某些浏览器允许这些不合法字符，另外一些浏览器不允许；请查看 Firefox bug 1398528。

**备注：** 记住，用户可以在幕后修改 HTML，因此网站*不得*使用简单的客户端验证来实现任何安全目的。你*必须*在服务器端验证所提供的值，以确保这些值没有任何安全问题。

此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。

### 一个简单的 number 输入框

在最基本的形式中，数字输入可以像这样实现：

```html
<label for="ticketNum">需要买票的数量：</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />
```

数字输入在为空的时候以及输入单个数字时被认为是有效的，否则是无效的。如果使用了 `required` 属性，则输入在空时不再被视为有效。

**备注：** 任何数字都是可接受的值，只要它是有效的浮点数（即不是 NaN 或 Infinity）。

### 占位符

有时，提供一个如何输入表单数据的上下文提示是非常友好的。尤其当页面所有`<input>` 元素都没有说明标签时，会非常重要。这就是使用**占位符**的原因。占位符是一个通常用于说明一个输入框的 `value` 应该如何输入的提示值，当元素的 `value` 为 `""` 时，该提示将出现在编辑框里面。一旦有数据输入到编辑框中，占位符就会消失；如果该框被清空，占位符将重新出现。

这里，我们有一个占位符为 "`Multiple of 10`" 的 `number` 输入框。请注意在编辑字段内容时占位符是如何消失的，又是如何重现的。

```html
<input type="number" placeholder="Multiple of 10" />
```

### 控制步进大小

默认情况下，向上和向下按钮可以将值增加或减小 1。你可以使用 `step` 属性来更改此步长值。我们上面的例子中的占位符提示我们其值是 10 的倍数，所以设置 `step` 的值为 `10` 是合理的：

```html
<input type="number" placeholder="multiple of 10" step="10" />
```

在这个例子中，你会发现上下箭头每次会将其值增加和减少 10，而不是 1。你仍然可以手动输入一个不是 10 的倍数的数字，但它会被认为是无效的。

### 指定最小和最大值

可以使用 `min` 和 `max` 属性指定该字段可以具有的最小值和最大值。例如，可以给我们的示例指定最小值为 `0`，最大值为 `100`：

```html
<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
```

修改过后，你会发现点击上下按钮不会让你低于 0 或高于 100 . 可以在这些界限之外手动输入数字，但它将被视为无效。

### 允许小数值

数字输入的一个问题是，步长默认为 1——如果你尝试输入带小数的数字（例如“1.0”），则它将被视为无效。如果要输入一个需要小数的值，则需要修改 `step` 值（例如，`step="0.01"` 以允许 2 位小数）。这里有一个简单的例子：

```html
<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
```

你可以看到这个例子允许 `0.0` 到 `10.0` 之间的任何值，小数点为 2 位。本例中，“9.52”是有效的，但“9.521”无效。

### 控制输入框大小

类型为 `number` 的 `<input>` 元素不支持像 `size` 之类的调整大小属性。你必须通过借助 CSS 来改变它们的尺寸大小。

例如，要调整输入框的宽度为仅可输入 3 位数字的宽度，我们可以在 HTML 中添加一个 ID 并缩短很长的占位符文本（这个字段对于目前的示例来说太窄了），如下：

```html
<input
 type="number"
 placeholder="x10"
 step="10"
 min="0"
 max="100"
 id="number" />
```

然后我们使用 `id` 选择器 `#number` 缩小元素的宽度：

```css
#number {
  width: 3em;
}
```

效果如下：

### 提供建议值

你可以通过指定 `list` 属性来提供一个默认选项列表，用户可以从中选择，该属性包含一个 `<datalist>` 的 ID 作为其值，而该 ID 又包含一个 `<option>` 元素的每个建议值；每个 `option` 的 `value` 就是数字输入框的相应建议值。

```html
<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>
```

验证
--

我们已经提及了一些数字输入的验证特性，来做个回忆：

* `<input type="number">` 元素自动拒绝任何非数字输入（如果指定了 `required`，也会拒绝空的输入）。
* 你可以使用 `required` 属性来使得空的输入无效，也就是说，该输入框*必须*有值填入。
* 你可以使用 `step` 属性来将有效值限制在一系列步进值中（如 10 的倍数）。
* 你可以使用 `min` 和 `max` 属性来限制输入的最大与最小值。

以下示例展示了上面所述的所有特性，也使用了 CSS 来根据 `input` 的不同值，显示合法及不合法的图标：

```html
<form>
  <div>
    <label for="balloons">要购买气球的数量（10 的倍数）：</label>
    <input
 id="balloons"
 type="number"
 name="balloons"
 step="10"
 min="0"
 max="100"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>
```

请尝试以非法的值提交该表单，如空值、小于 0 或大于 100 的值、不是 10 的倍数的值、或非数字值——来观察一下浏览器如何提示这些错误信息。

该示例应用的 CSS 如下所示：

```css
div {
  margin-bottom: 10px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}
```

我们使用了 `:invalid` 和 `:valid` 伪类，在相邻的 `<span>` 元素上显示一个适当的无效或有效图标作为生成内容，作为有效性的视觉指标。

我们把它放在一个单独的 `<span>`元素上，以增加灵活性；一些浏览器在某些类型的表单输入上不能很有效地显示生成的内容（请阅读 `<input type="date">` 验证一节的示例以了解）。

**警告：** 客户端表单验证*不能*替代服务端验证。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。

### 模式验证

`<input type="number">` 不支持 `pattern` 属性以验证输入值是否满足特定的正则表达式。

这样做的理由是，如果数字输入中包含除数字以外的任何内容，则不会有效，你可以使用 `min` 和 `max` 属性来限制有效数字的最小和最大数量（如上所述）。

示例
--

我们已经介绍过，默认情况下，增量是 `1`，你可以使用 `step` 属性来允许小数输入。

在下面的例子中，我们设置了一个用于输入用户身高的表单；它默认接受以米为单位的身高，但你可以点击相关按钮来改变表单，使其接受英尺和英寸。输入米的身高可以接受小数点后两位。

HTML 代码看起来像这样：

```html
<form>
  <div class="metersInputGroup">
    <label for="meters">Enter your height — meters:</label>
    <input
 id="meters"
 type="number"
 name="meters"
 step="0.01"
 min="0"
 placeholder="e.g. 1.78"
 required />
    <span class="validity"></span>
  </div>
  <div class="feetInputGroup" style="display: none;">
    <span>Enter your height — </span>
    <label for="feet">feet:</label>
    <input id="feet" type="number" name="feet" min="0" step="1" />
    <span class="validity"></span>
    <label for="inches">inches:</label>
    <input id="inches" type="number" name="inches" min="0" max="11" step="1" />
    <span class="validity"></span>
  </div>
  <div>
    <input
 type="button"
 class="meters"
 value="Enter height in feet and inches" />
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>
```

你会看到，我们正在使用许多我们已经在前面的文章中看过的属性。由于我们想接受以厘米为单位的米值，我们将 `step` 值设置为 `0.01`，这样像 *1.78* 这样的值就不会被视为无效。我们还为这个输入提供了一个占位符。

我们使用 `style="display: none;"` 隐藏了英尺和英寸的输入，所以米是默认的输入类型。

现在来看看 CSS 代码——跟之前的验证部分样式看起来是一样的，没什么可说的：

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

最后是一些 JavaScript 代码：

```js
const metersInputGroup = document.querySelector(".metersInputGroup");
const feetInputGroup = document.querySelector(".feetInputGroup");
const metersInput = document.querySelector("#meters");
const feetInput = document.querySelector("#feet");
const inchesInput = document.querySelector("#inches");
const switchBtn = document.querySelector('input[type="button"]');

switchBtn.addEventListener("click", () => {
  if (switchBtn.getAttribute("class") === "meters") {
    switchBtn.setAttribute("class", "feet");
    switchBtn.value = "Enter height in meters";

    metersInputGroup.style.display = "none";
    feetInputGroup.style.display = "block";

    feetInput.setAttribute("required", "");
    inchesInput.setAttribute("required", "");
    metersInput.removeAttribute("required");

    metersInput.value = "";
  } else {
    switchBtn.setAttribute("class", "meters");
    switchBtn.value = "Enter height in feet and inches";

    metersInputGroup.style.display = "block";
    feetInputGroup.style.display = "none";

    feetInput.removeAttribute("required");
    inchesInput.removeAttribute("required");
    metersInput.setAttribute("required", "");

    feetInput.value = "";
    inchesInput.value = "";
  }
});
```

在声明了一些变量之后，我们为按钮添加一个事件监听器来控制切换机制。这很简单，主要是改变按钮的类别和标签，并在按钮被按下时更新两组输入的显示值。请注意，我们不是在米和英尺/英寸之间来回转换，现实生活中的网络应用可能会这么做。

**备注：** 请注意，当用户点击按钮时，我们从隐藏的输入中移除 `required` 属性，并清空 `value` 属性。这样我们就可以在两个输入组都没有填写的情况下提交表单，而不会提交那些我们不想提交的数据。如果我们不这样做，你就必须同时填入英尺/英寸**和**米来提交表单了！

无障碍
---

`<input type="number">` 元素的隐含 role 是 `spinbutton` (en-US) 。如果 spinbutton 对你的表单控件来说不是一个重要的功能，那就*不要*使用 `type="number"`；此时，请使用带有 `pattern` 属性的 `inputmode="numeric"`，将字符限制在数字和相关字符。如果坚持使用 `<input type="number">`，用户在试图做其他事情时，有可能意外地增加一个数字。此外，如果用户试图输入不是数字的东西，也没有明确的反馈说明他们做错了什么。

也可以考虑使用 `autocomplete` 属性，帮助用户更快完成表单，减少出错的机会。例如，要在一个邮编字段上启用自动填写功能，请设置 `autocomplete="postal-code"`。

规范
--

| Specification |
| --- |
| HTML Standard # number-state-(type=number) |

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

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

参见
--

* HTML 表单指南
* `<input>`
* `<input type="tel">`
* 表单控件 CSS 兼容性列表
* 文章：为什么 Gov.UK 为数字输入改变了输入类型