使用 XSLT 转换 XML - XSLT：可扩展样式表语言转换

使用 XSLT 转换 XML
==============

概览
--

概览 (en-US)

内容和表示分离是 XML 的一个关键设计特性。XML 文档的结构被设计成反映和阐明内容本身的各方面之间的重要关系，而不受需要提供有关此数据最终应该如何呈现的任何指示的障碍。这种智能的结构尤为重要，特别是在越来越多的数据在通过网络连接的高度异构的机器之间自动化传输的趋势下。

然而，最终存储在 XML 文档中的大部分内容都需要呈现给人类。因为浏览器提供了一个熟悉且高度灵活的界面，所以它是传递此类呈现给人类的 XML 内容的理想机制。Firefox 利用各类 XML 技术从头开始构建，将处理原始 XML 文档和用于为显示的 HTML 设置样式和布局的专用样式表所需的机制合并到一起，从而通过客户端处理来减少服务器的负载。

目前，Gecko（Firefox 的排版引擎）支持两种形式的 XML 样式表。对于外观的基本控制（字体、颜色、位置等），Gecko 使用 CSS。

我们这里的重点是 Gecko 支持的第二种样式表：XSLT 样式表。XSLT 代表可扩展样式表转换语言（eXtensible Stylesheet Language/Transform），这个名字很贴切。XSLT 允许样式表的作者以两种重要的方式转换主 XML 文档：对文档进行操作和排序，包括在需要的情况下进行整体重排序，以及将内容转换为不同的格式（以 Firefox 为例，则重点是将其即时转换为后续可用浏览器显示的 HTML）。

XSLT/XPath 参考
-------------

### 元素

元素 (en-US)

* xsl:apply-imports (en-US)（*支持*）
* xsl:apply-templates (en-US)（*支持*）
* xsl:attribute (en-US)（*支持*）
* xsl:attribute-set (en-US)（*支持*）
* xsl:call-template (en-US)（*支持*）
* xsl:choose (en-US)（*支持*）
* xsl:comment (en-US)（*支持*）
* xsl:copy (en-US)（*支持*）
* xsl:copy-of (en-US)（*支持*）
* xsl:decimal-format (en-US)（*支持*）
* xsl:element (en-US)（*支持*）
* xsl:fallback (en-US)（*不支持*）
* xsl:for-each (en-US)（*支持*）
* xsl:if (en-US)（*支持*）
* xsl:import (en-US) *(mostly supported)*
* xsl:include (en-US)（*支持*）
* xsl:key (en-US)（*支持*）
* xsl:message (en-US)（*支持*）
* xsl:namespace-alias (en-US)（*不支持*）
* xsl:number (en-US)（*部分支持*）
* xsl:otherwise (en-US)（*支持*）
* xsl:output (en-US)（*部分支持*）
* xsl:param (en-US)（*支持*）
* xsl:preserve-space (en-US)（*支持*）
* xsl:processing-instruction (en-US)
* xsl:sort (en-US)（*支持*）
* xsl:strip-space (en-US)（*支持*）
* xsl:stylesheet (en-US)（*部分支持*）
* xsl:template (en-US)（*支持*）
* xsl:text (en-US)（*部分支持*）
* xsl:transform (en-US)（*支持*）
* xsl:value-of (en-US)（*部分支持*）
* xsl:variable (en-US)（*支持*）
* xsl:when (en-US)（*支持*）
* xsl:with-param (en-US)（*支持*）
### 轴

轴

* ancestor
* ancestor-or-self
* attribute
* child
* descendant
* descendant-or-self
* following
* following-sibling
* namespace（*不支持*）
* parent
* preceding
* preceding-sibling
* self
### 函数

函数 (en-US)

* boolean() (en-US)（*支持*）
* ceiling() (en-US)（*支持*）
* concat() (en-US)（*支持*）
* contains() (en-US)（*支持*）
* count() (en-US)（*支持*）
* current() (en-US)（*支持*）
* document() (en-US)（*支持*）
* element-available() (en-US)（*支持*）
* false() (en-US)（*支持*）
* floor() (en-US)（*支持*）
* format-number() (en-US)（*支持*）
* function-available() (en-US)（*支持*）
* generate-id() (en-US)（*支持*）
* id() (en-US)（*部分支持*）
* key() (en-US)（*支持*）
* lang() (en-US)（*支持*）
* last() (en-US)（*支持*）
* local-name() (en-US)（*支持*）
* name() (en-US)（*支持*）
* namespace-uri() (en-US)（*支持*）
* normalize-space() (en-US)（*支持*）
* not() (en-US)（*支持*）
* number() (en-US)（*支持*）
* position() (en-US)（*支持*）
* round() (en-US)（*支持*）
* starts-with() (en-US)（*支持*）
* string() (en-US)（*支持*）
* string-length() (en-US)（*支持*）
* substring() (en-US)（*支持*）
* substring-after() (en-US)（*支持*）
* substring-before() (en-US)（*支持*）
* sum() (en-US)（*支持*）
* system-property() (en-US)（*支持*）
* translate() (en-US)（*支持*）
* true() (en-US)（*支持*）
* unparsed-entity-url() (en-US)（*不支持*）
扩展阅读
----

扩展阅读 (en-US)

* 图书 (en-US)
* 数字内容 (en-US)
    + 网站 (en-US)
    + 文章 (en-US)
    + 教程/示例 (en-US)
    + 其他 (en-US)
原始文档信息
------

* 版权信息：Copyright © 2001-2003 Netscape. All rights reserved.
* 注意：这篇转载文章最初是 DevEdge 的一部分。


微数据 - HTML（超文本标记语言）

微数据
===

概要
--

微数据是 WHATWG HTML 标准的一部分，用于在网页上的现有内容中嵌套元数据。搜索引擎、网络抓取工具可以从网页中提取和处理微数据，并使用它为用户提供更丰富的浏览体验。搜索引擎从直接访问此结构化数据中受益匪浅，因为它允许搜索引擎了解网页上的信息并向用户提供更相关的结果。微数据使用支持词汇表来描述项目和 name-value 对，以便为其属性赋值。与使用 RDFa 和微格式的类似方法相比，微数据试图提供一种使用机器可读标签注释 HTML 元素的简单方法。

从更高的角度来看，微数据由一组 name-value 对组成。这些组称为元素，每个 name-value 对都是一个属性。项目和属性由常规元素表示。

* 创建元素使用了 `itemscope` 属性。
* 向元素添加属性，`itemprop` 属性将用于其中一个元素的后代。
词汇表
---

谷歌和其他主要搜索引擎支持结构化数据的 Schema.org 词汇表。此词汇表定义了一组标准类型名称和属性名称，例如，Schema.org Music Event 表示音乐会表演，`startDate` 和 `location` 属性用于指定音乐会的关键细节。在这种情况下，Schema.org Music Event 将是 `itemtype` 和 `startDate` 使用的 URL，而 `location` 将是 Schema.org Music Event 定义的 `itemprop`。

**备注：** 有关 itemtype 属性的更多信息，请访问 https://schema.org/Thing。

微数据词汇表提供了 *`Item`* 的语义或含义。Web 开发人员可以设计自定义词汇表或使用 Web 上可用的词汇表，例如广泛使用的 schema.org 词汇表。Schema.org 提供了一组常用的标记词汇表。

常用词汇：

* 创造性工作：CreativeWork、Book、Movie、MusicRecording、Recipe、TVSeries
* 嵌入性非文字对象：AudioObject、ImageObject、VideoObject
* `Event`
* Health and medical types：注意健康和医疗类型在 MedicalEntity 之下
* `Organization`
* `Person`
* `Place`、LocalBusiness、Restaurant
* `Product`、Offer、AggregateOffer
* `Review`、AggregateRating
* `Action`
* `Thing`
* `Intangible`

谷歌，微软和雅虎等主要搜索引擎运营商依靠 schema.org 词汇表来改进搜索结果。实现一般目标，临时词汇就足够了。对于其他情况，可能需要设计一个词汇表。在可能的情况下，鼓励作者重用现有的词汇表，因为这样可以更轻松地重复使用内容。

本地化
---

在某些情况下，覆盖特定区域的搜索引擎可以提供微数据的本地特定扩展。例如，俄罗斯的主要搜索引擎 Yandex 支持如 `hCard`（公司联系信息）、`hRecipe`（食品配方）、`hReview`（市场评论）和 `hProduct`（产品数据）的微格式，并提供自己的格式来定义术语和百科全书文章。这个扩展是为了解决西里尔字母和拉丁字母之间的音译问题。由于 Schema 词汇表的附加标记参数的实现，俄语网页中的信息索引变得更加成功。

全局属性
----

`itemid`——元素的唯一全局标识符。

`itemprop`——用于向元素添加属性。每个 HTML 元素都可以指定一个 `itemprop` 属性，其中 `itemprop` 由一个名称和值对组成。

`itemref`——不具有 `itemscope` 属性的元素的后代的属性可以使用 **itemref** 与元素相关联。`itemref` 提供了元素 id 列表（而不是一些 `itemid`）以及文档中其他位置的其他属性。

`itemscope`——`itemscope`（通常）与 `itemtype` 一起使用，以指定块中包含的 HTML 是一个特定元素。`itemscope` 创建 *`Item`* 并定义与之关联的 itemtype 的范围。`itemtype` 是描述项及其属性上下文的词汇表（例如 schema.org）的有效 URL。

`itemtype`——指定将用于在数据结构中定义 `itemprop`（元素属性）的词汇表的 URL。`itemscope` 用于设置数据结构中按 `itemtype` 设置的词汇表的有效范围。

示例
--

### HTML

```html
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> - REQUIRES
  <span itemprop="operatingSystem">ANDROID</span><br />
  <link
 itemprop="applicationCategory"
 href="https://schema.org/GameApplication" />

  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="https://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>
```

### 结构化数据

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | SoftwareApplication (https://schema.org/SoftwareApplication) |
| itemprop | name | Angry Birds |
| itemprop | operatingSystem | ANDROID |
| itemprop | applicationCategory | GameApplication (https://schema.org/GameApplication) |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] |
| itemprop | ratingValue | 4.6 |
| itemprop | ratingCount | 8864 |
| itemscope | itemprop[itemtype] | offers [Offer] |
| itemprop | price | 1.00 |
| itemprop | priceCurrency | USD |

### 结果

**备注：** 从 HTML 中提取微数据结构的便捷工具是 Google 的架构标记测试工具。在上面显示的 HTML 上尝试一下。

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

在 Firefox 16 中支持，在 Firefox 49 中移除。

参见
--

* 全局属性


怪异模式和标准模式 - HTML（超文本标记语言）

怪异模式和标准模式
=========

在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，以及为微软（Microsoft）的 Internet Explorer 准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在**怪异模式**下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在**标准模式**下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在**接近标准模式**下，只有少数的怪异行为被实现。

浏览器如何决定使用哪个模式？
--------------

对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。为了确保你的页面使用标准模式，请确认你的页面如同本范例一样拥有 DOCTYPE：

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>
```

范例中的 DOCTYPE，`<!DOCTYPE html>`，是所有可用的 DOCTYPE 之中最简单的，也是 HTML5 所推荐的。HTML 的早期变种也属于推荐标准，不过，当今的浏览器都会对这个 DOCTYPE 使用标准模式，就算是早已过时的 Internet Explorer 6 也一样。目前，并没有正当的理由，去使用其他更复杂的 DOCTYPE。如果你使用其他的 DOCTYPE，你可能会面临触发接近标准模式或者怪异模式的风险。

请确定你把 DOCTYPE 正确地置于 HTML 文件的顶端。如果有任何其他字符位于 DOCTYPE 之前，比如注释或 XML 声明，会导致 Internet Explorer 9 或更早期的浏览器触发怪异模式。

`<!DOCTYPE html>` 唯一的作用是启用标准模式。更早期的 HTML 标准中，DOCTYPE 会附加其他意义，但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。

另请参阅浏览器如何选择各种模式文章的详细说明。

### XHTML

如果你的网页使用 XHTML 并在 `Content-Type` HTTP 标头使用 `application/xhtml+xml` MIME 类型，你不需要使用 DOCTYPE 启动标准模式，因为这种文件会永远使用标准模式。不过请注意，页面使用 `application/xhtml+xml` 会令 Internet Explorer 8 出于未知格式之故出现下载对话框，因为首个支持 XHTML 的 Internet Explorer 版本是 Internet Explorer 9。

如果你的类 XHTML 网页使用 `text/html` MIME 类型，浏览器会将其视为 HTML，这时就需要使用 DOCTYPE 启用标准模式。

我要如何知道目前是哪个模式？
--------------

在 Firefox 中，请从右键菜单选择*查看页面信息*，然后查看*渲染模式*。（了解 Firefox 页面信息窗口）

在 Internet Explorer 中，请按下 *F12*，然后查看*文档模式*。


HTML 参考 - HTML（超文本标记语言）

HTML 参考
=======

HTML 是一种描述 Web 文档结构和语义的语言；它由**元素**组成，每个元素可以有一些**属性**。网页中的内容通过 HTML 元素标记，如`<img>`、`<title>`、`<p>`、`<div>` 等等。

本文提供了你进行 Web 开发时可以参考的资料。MDN 提供了组成 HTML 的所有元素的参考和每个属性的参考，这些属性可以控制元素的行为。

内容
--

HTML 元素参考

此页面列出了所有 tag 创建的 HTML elements。它们按功能分组，以帮助你轻松找到想要的内容。页面左侧边栏中列出了所有元素，当然也包含在了这个页面中。

HTML 属性参考

HTML 中的元素是有属性的；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

全局属性

TBD

链接类型

在超文本标记语言中，在两种文档之间可以指定<a>, <area>或<link> 元素使一个页面链接到另一个页面。

指南和教程
-----

HTML 开发者指南

MDN 文章介绍了用于构建网页的特定 HTML 技巧，还有教程和其他资料。


内容分类 - HTML（超文本标记语言）

内容分类
====

大多数 HTML 元素都属于一个或多个**内容类别**——这些类别对具有共同特征的元素进行分组。这是一个松散的分组（它实际上并没有在这些类别的元素之间建立关系），但它们有助于定义和描述这些类别的共同行为及其相关规则，特别是在你遇到它们的复杂细节时。元素也有可能不属于其中的*任何*类别。

以下是三种类型的内容分类：

* 主内容类，描述了很多元素共享的规则；
* 表单相关的内容类，描述了表单相关元素共有的规则；
* 特殊内容类，描述了仅仅在少数元素（有时仅在特定的上下文中）共享的规则。

**备注：** 对这些内容类别及其功能的更详细的讨论超出了本文的范围；如果你向了解这些内容，请阅读 HTML 规范的相关部分。

![显示各种内容类别相互之间是如何关联的维恩图。后面的部分以文本形式解释这些关系。](/zh-CN/docs/Web/HTML/Content_categories/content_categories_venn.png)

主内容分类
-----

### 元数据内容

属于*元数据内容*（Metadata content）的元素可以修改文档其余部分的呈现或行为、建立与其他文档的链接，或者传达其他*带外*信息。

属于这一类的元素有：`<base>`、`<link>`、`<meta>`、`<noscript>`、`<script>`、`<style>` 和 `<title>`。

### 流式内容

流式内容（Flow content）是一个广泛的类别，包括大多数可以包含在 `<body>` 元素之内的元素，包括标题元素、分段元素、短语元素、嵌入元素、交互元素和表单相关元素。它还包括文本节点（但不包括那些只由空白字符组成的节点）。

流式元素有：

* `<a>`
* `<abbr>`
* `<address>`
* `<article>`
* `<aside>`
* `<audio>`
* `<b>`
* `<bdo>`
* `<bdi>`
* `<blockquote>`
* `<br>`
* `<button>`
* `<canvas>`
* `<cite>`
* `<code>`
* `<data>`
* `<datalist>`
* `<del>`
* `<details>`
* `<dfn>`
* `<dialog>`
* `<div>`
* `<dl>`
* `<em>`
* `<embed>`
* `<fieldset>`
* `<figure>`
* `<footer>`
* `<form>`
* `<h1>`-`<h6>`
* `<header>`
* `<hgroup>`
* `<hr>`
* `<i>`
* `<iframe>`
* `<img>`
* `<input>`
* `<ins>`
* `<kbd>`
* `<label>`
* `<main>`
* `<map>`
* `<mark>`
* `<math>`
* `<menu>`
* `<meter>`
* `<nav>`
* `<noscript>`
* `<object>`
* `<ol>`
* `<output>`
* `<p>`
* `<picture>`
* `<pre>`
* `<progress>`
* `<q>`
* `<ruby>`
* `<s>`
* `<samp>`
* `<search>` (en-US)
* `<script>`
* `<section>`
* `<select>`
* `<slot>`
* `<small>`
* `<span>`
* `<strong>`
* `<sub>`
* `<sup>`
* `<svg>`
* `<table>`
* `<template>`
* `<textarea>`
* `<time>`
* `<u>`
* `<ul>`
* `<var>`
* `<video>`
* `<wbr>`
* 纯文本

属于此类的少数其他元素，但仅限于以下特殊情况：

* `<area>`，当它为 `<map>` 元素的子元素时
* `<link>`，若存在 itemprop 属性
* `<meta>`，若存在 itemprop 属性
* `<style>`，若存在 `scoped`
已弃用
 属性
### 分段内容

分段内容（Sectioning content）是流式内容的一个子集，可以在当前大纲中创建一个分段，它定义了 `<header>` 元素、`<footer>` 元素和标题内容的范围。

属于此类的元素有：`<article>`、`<aside>`、`<nav>` 和 `<section>`。

### 标题内容

标题内容（Heading content）是流式内容的一个子集，定义了分段的标题，而这个分段可能由一个明确的分段内容元素直接标记，也可能由标题本身隐式地定义。

属于此分类的元素有：`<h1>`-`<h6>` 和 `<hgroup>`。

**备注：** 尽管 `<header>` 可能包含一些标题内容，但其并不是标题内容本身。

**备注：** 已不再推荐使用 `<hgroup>` 元素，因为它不能与辅助技术一起正常工作。在 HTML 5 最终定稿之前，它已从 W3C 的 HTML 规范中删除，但其仍属于 WHATWG 规范，并且仍被大多数浏览器部分支持。

### 短语内容

短语内容（Phrasing content）是流式内容的一个子集，定义了文档中的文本和标记。短语内容的序列构成段落。

属于此类的元素有：

* `<abbr>`
* `<audio>`
* `<b>`
* `<bdi>`
* `<bdo>`
* `<br>`
* `<button>`
* `<canvas>`
* `<cite>`
* `<code>`
* `<data>`
* `<datalist>`
* `<dfn>`
* `<em>`
* `<embed>`
* `<i>`
* `<iframe>`
* `<img>`
* `<input>`
* `<kbd>`
* `<label>`
* `<mark>`
* `<math>`
* `<meter>`
* `<noscript>`
* `<object>`
* `<output>`
* `<picture>`
* `<progress>`
* `<q>`
* `<ruby>`
* `<s>`
* `<samp>`
* `<script>`
* `<select>`
* `<slot>`
* `<small>`
* `<span>`
* `<strong>`
* `<sub>`
* `<sup>`
* `<svg>`
* `<template>`
* `<textarea>`
* `<time>`
* `<u>`
* `<var>`
* `<video>`
* `<wbr>`
* 纯文本（仅当所包含的内容不完全为空白字符）

一些其他的元素也属于这个分类，但仅限于以下特殊情况：

* `<a>`，当它仅包含短语内容时
* `<area>`，当它为 `<map>` 元素的子元素时
* `<del>`，当它仅包含短语内容时
* `<ins>`，当它仅包含短语内容时
* `<link>`，若存在 itemprop 属性
* `<map>`，当它仅包含短语内容时
* `<meta>`，若存在 itemprop 属性
### 嵌入内容

嵌入内容（Embedded content）是流式内容的一个子集，它导入另一种资源，或者将来自另一种标记语言或命名空间的内容插入到文档中。属于此类的元素有：

* `<audio>`
* `<canvas>`
* `<embed>`
* `<iframe>`
* `<img>`
* `<math>`
* `<object>`
* `<picture>`
* `<svg>`
* `<video>`
### 交互内容

交互内容（Interactive content）是流式内容的一个子集，包含为用户交互而特别设计的元素。属于此类的元素有：

* `<button>`
* `<details>`
* `<embed>`
* `<iframe>`
* `<label>`
* `<select>`
* `<textarea>`

一些其他的元素也属于这个分类，但仅限于以下特殊情况：

* `<a>`，若存在 `href` 属性
* `<audio>`，若存在 `controls` 属性
* `<img>`，若存在 `usemap` 属性
* `<input>`，若 type 属性不处于隐藏（hidden）状态
* `<object>`，若存在 `usemap` 属性
* `<video>`，若存在 `controls` 属性
### 可感知内容

当内容既不是空的也不是隐藏的时候，它就是可感知（palpable）的；它是被渲染的内容，是实质性的。以流式内容为模型的元素应该至少有一个节点是可感知的。

### 表单相关内容

表单相关内容（Form-associated content）是流式内容的一个子集，包括有表单所有者（通过 **form** 属性暴露）的元素，可以在预期有流式内容的地方使用。表单所有者要么是容纳这些元素的 `<form>` 元素，要么是在 **form** 属性中指定其 id 的元素。

* `<button>`
* `<fieldset>`
* `<input>`
* `<label>`
* `<meter>`
* `<object>`
* `<output>`
* `<progress>`
* `<select>`
* `<textarea>`

此类包含了几个子类：

可列举的元素（listed）

在 `form.elements` 和 `fieldset.elements` 集合中列举出的元素。包括 `<button>`、`<fieldset>`、`<input>`、`<object>`、`<output>`、`<select>` 和 `<textarea>`。

可标记的元素（labelable）

可以与 `<label>` 相关联的元素。包括 `<button>`、`<input>`、`<meter>`、`<output>`、`<progress>`、`<select>` 和 `<textarea>`。

可提交的元素（submittable）

包括当表单提交时可以用来组成表单数据的元素。包括 `<button>`、`<input>`、`<object>`、`<select>` 和 `<textarea>`。

可重置的元素（resettable）

当表单重置时会被重置的元素。包括 `<input>`、`<output>`、`<select>` 和 `<textarea>`。

二级分类
----

这里还有一些你需要注意的二级分类元素。

### 支持脚本元素

**支持脚本元素**（Script-supporting element）是不直接影响文档渲染输出的元素。相反，它们的作用是支持脚本，或者直接包含或指定脚本代码，或者指定将被脚本使用的数据。

支持脚本元素有：

* `<script>`
* `<template>`
透明内容模型
------

如果一个元素拥有透明内容（Transparent content）模型，即使将透明内容移除并使用子元素取代，其内容也必须构成有效的 HTML5。

例如，`<del>` 和 `<ins>` 是透明的：

```html
<p>
  我们认为以下真理是<del><em>神圣而不可否认</em></del
 ><ins>不言而喻</ins>的。
</p>
```

即使这两个元素被移除，这个代码段依然是有效的（至少从代码语法上）。

```html
<p>我们认为以下真理是<em>神圣而不可否认</em>不言而喻的。</p>
```


HTML 属性参考 - HTML（超文本标记语言）

HTML 属性参考
=========

HTML 中的元素拥有**属性**（attribute）；这些额外的值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

属性列表
----

| 属性名 | 元素 | 描述 |
| --- | --- | --- |
| `accept (en-US)` | `<form>`、`<input>` | 服务器接受内容（通常是文件类型）的列表。 |
| `accept-charset` | `<form>` | 支持的字符集列表。 |
| `accesskey` | 全局属性 | 用于激活或聚焦元素的键盘快捷键。 |
| `action` | `<form>` | 处理通过表单提交的信息的程序的 URI。 |
| `align`
已弃用
 | `<caption>`、`<col>`、`<colgroup>`、`<hr>`、`<iframe>`、`<img>`、`<table>`、`<tbody>`、`<td>` (en-US)、`<tfoot>`、`<th>`、`<thead>`、`<tr>` | 指定元素水平对齐的方式。 |
| `allow` | `<iframe>` | 指定 iframe 的特性策略。 |
| `alt` | `<area>`、`<img>`、`<input>` | 在图片无法显示时展示的替代文本。 |
| `async` | `<script>` | 异步执行该脚本。 |
| `autocapitalize` | 全局属性 | 设置用户输入时是否自动大写。 |
| `autocomplete` | `<form>`、`<input>`、`<select>`、`<textarea>` | 指示浏览器是否可以自动填充表单中的值。 |
| `autofocus` | `<button>`、`<input>`、`<select>`、`<textarea>` | 页面加载后，该元素应自动获得焦点。 |
| `autoplay` | `<audio>`、`<video>` | 音视频应该自动播放。 |
| `background` | `<body>`、`<table>`、`<td>` (en-US)、`<th>` | 指定图像文件的 URL。

**备注：**虽然浏览器和电子邮件客户端可能仍然支持此属性，但它已经过时。请使用
 CSS `background-image` 代替。

 |
| `bgcolor` | `<body>`、`<col>`、`<colgroup>`、`<marquee>`、`<table>`、`<tbody>`、`<tfoot>`、`<td>` (en-US)、`<th>`、`<tr>` | 元素的背景颜色。

**备注：**这是遗留属性。请使用
 CSS `background-color` 属性代替。

 |
| `border` | `<img>`、`<object>`、`<table>` | 边框宽度。

**备注：**这是遗留属性。请使用
 CSS `border` 属性代替。

 |
| `buffered` | `<audio>`、`<video>` | 包含已缓存媒体的时间范围。 |
| `capture (en-US)` | `<input>` | 来自 Media Capture 规范，指定一个新文件是否可以被捕获。 |
| `charset` | `<meta>` | 申明该页面或脚本的字符编码。 |
| `checked` | `<input>` | 指出该元素在页面加载后是否处于选中状态。 |
| `cite` | `<blockquote>`、`<del>`、`<ins>`、`<q>` | 包含一个指明引用或修改的来源的 URI。 |
| `class` | 全局属性 | 通常和 CSS 配合使用，使用常用属性来为元素添加样式。 |
| `color` | `<font>`、`<hr>` | 该属性为文本设置颜色，可以使用具名颜色或十六进制 #RRGGBB 格式的颜色。

**备注：**这是遗留属性。请使用
 CSS `color` 属性代替。

 |
| `cols` | `<textarea>` | 定义一个 textarea 中包含多少列。 |
| `colspan` | `<td>` (en-US)、`<th>` | colspan 属性定义了一个单元格跨越的列数。 |
| `content` | `<meta>` |
 与 `http-equiv` 或 `name`
 关联的值，取决于上下文。
  |
| `contenteditable` | 全局属性 | 指示该元素的内容是否可以被编辑。 |
| `contextmenu`
非标准

已弃用
 | 全局属性 | 定义将用作元素上下文菜单的 `<menu>` 元素的 ID。 |
| `controls` | `<audio>`、`<video>` | 指示浏览器是否应该向用户显示播放控件。 |
| `coords` | `<area>` | 指定热点区域坐标的一组值。 |
| `crossorigin` | `<audio>`、`<img>`、`<link>`、`<script>`、`<video>` | 元素如何处理跨源请求。 |
| `csp (en-US)`

实验性
 | `<iframe>` | 指定嵌入文档必须同意对自身强制执行的内容安全策略。 |
| `data` | `<object>` | 指定资源的 URL。 |
| `data-\*` | 全局属性 | 允许你对一个 HTML 元素附加自定义的属性。 |
| `datetime` | `<del>`、`<ins>`、`<time>` | 指示与元素关联的日期和时间。 |
| `decoding` | `<img>` | 指示解码图像的首选方法。 |
| `default` | `<track>` | 指示应启用该轨道，除非与用户首选项指示的不同。 |
| `defer` | `<script>` | 指示该脚本应在页面解析后执行。 |
| `dir` | 全局属性 | 定义文本的方向。允许的值有 ltr（从左到右）或 rtl（从右到左）。 |
| `dirname (en-US)` | `<input>`、`<textarea>` |  |
| `disabled` | `<button>`、`<fieldset>`、`<input>`、`<optgroup>`、`<option>`、`<select>`、`<textarea>` | 指示用户是否可以与该元素交互。 |
| `download` | `<a>`、`<area>` | 指示用于下载资源的超链接。 |
| `draggable` | 全局属性 | 定义元素是否可以被拖拽。 |
| `enctype` | `<form>` | 定义 `method` 为 POST 时，表单数据的内容类型。 |
| `enterkeyhint`

实验性
 | `<textarea>`,
 `contenteditable` | `enterkeyhint`
 指定在虚拟键盘上显示的回车键的动作标签（或图标）。该属性可用于表单控件（例如
 `textarea` 元素的值），或者在可编辑宿主中的元素（例如使用
 `contenteditable` 属性）。
  |
| `for (en-US)` | `<label>`、`<output>` | 描述与当前元素绑定的元素。 |
| `form` | `<button>`、`<fieldset>`、`<input>`、`<label>`、`<meter>`、`<object>`、`<output>`、`<progress>`、`<select>`、`<textarea>` | 指示该元素所属的表单。 |
| `formaction` | `<input>`、`<button>` | 指示元素的动作，覆盖 `<form>` 中定义的动作。 |
| `formenctype` | `<button>`、`<input>` |
 如果按钮/输入是提交按钮 (en-US)（例如，`type="submit"`），该属性用于设置表单提交时要使用的编码类型。如果指定了该属性，则会覆盖按钮所属的
 form 的 `enctype` 属性。
  |
| `formmethod` | `<button>`、`<input>` |
 如果按钮/输入是提交按钮 (en-US)（例如，`type="submit"`），该属性用于设置表单提交时要使用的提交方法（`GET`、`POST`
 等）。如果指定了该属性，则会覆盖按钮所属的
 form 的 `method` 属性。
  |
| `formnovalidate` | `<button>`、`<input>` |
 如果按钮/输入是提交按钮 (en-US)（例如，`type="submit"`），该布尔属性用于指示在提交表单时不进行验证。如果指定了该属性，则会覆盖按钮所属的
 form 的 `novalidate` 属性。
  |
| `formtarget` | `<button>`、`<input>` |
 如果按钮/输入是提交按钮 (en-US)（例如，`type="submit"`），该属性用于指定提交表单后接收到的响应在哪个浏览上下文（例如，标签页、窗口或内联框架）中显示。如果指定了该属性，则会覆盖按钮所属的
 form 的 `target` 属性。
  |
| `headers` | `<td>` (en-US)、`<th>` | 应用于 `<th>` 元素的 ID。 |
| `height` | `<canvas>`、`<embed>`、`<iframe>`、`<img>`、`<input>`、`<object>`、`<video>` |
 指定此处列出的元素的高度。对于其他所有元素，请使用
 CSS `height` 属性。

**备注：**对于某些实例，例如
 `<div>`，这是一个遗留属性，对于这些实例应使用
 CSS `height` 属性代替。

 |
| `hidden` | 全局属性 | 阻止对给定元素的渲染，同时保持子元素（例如脚本元素）处于激活状态。 |
| `high` | `<meter>` | 指示高值区间的下限值。 |
| `href` | `<a>`、`<area>`、`<base>`、`<link>` | 关联资源的 URL。 |
| `hreflang` | `<a>`、`<link>` | 指定关联资源的语言。 |
| `http-equiv` | `<meta>` | 定义编译程序指令（pragma directive）。 |
| `id` | 全局属性 | 通常与 CSS 一起使用，以为特定元素添加样式。此属性的值必须是唯一的。 |
| `integrity` | `<link>`、`<script>` | 指定子资源完整性值，允许浏览器验证它们获取的内容。 |
| `intrinsicsize`

已弃用
 | `<img>` | 此属性指示浏览器忽略图像的实际的固有大小，并假设它是属性中指定的大小。 |
| `inputmode` | `<textarea>`,
 `contenteditable` |
 提供一个提示，指示用户在编辑元素或其内容时可能输入的数据类型。该属性可用于表单控件（例如
 `textarea` 元素的值），或者在可编辑宿主中的元素（例如使用了
 `contenteditable` 属性的）。
  |
| `ismap` | `<img>` | 指示图像是服务器端图像映射（image map）的一部分。 |
| `itemprop` | 全局属性 |  |
| `kind` | `<track>` | 指定文本字幕的类型。 |
| `label` | `<optgroup>`、`<option>`、`<track>` | 为元素指定用户可读的标题。 |
| `lang` | 全局属性 | 定义元素中使用的语言。 |
| `language`

已弃用
 | `<script>` | 定义元素中使用的脚本语言。 |
| `loading`
实验性
 | `<img>`、`<iframe>` | 指示元素是否应该被懒加载（`loading="lazy"`）或立即加载（`loading="eager"`）。 |
| `list` | `<input>` | 指示建议用户输入的预定义选项列表。 |
| `loop` | `<audio>`、`<marquee>`、`<video>` | 指示媒体在播放结束时是否应从头开始播放。 |
| `low` | `<meter>` | 指示低值区间的上限值。 |
| `manifest`

已弃用
 | `<html>` | 指定文档的缓存清单的 URL。

**备注：**该属性已过时，请使用
 `<link rel="manifest">`
 代替。

 |
| `max (en-US)` | `<input>`、`<meter>`、`<progress>` | 指示允许的最大值。 |
| `maxlength (en-US)` | `<input>`、`<textarea>` | 定义元素中允许的最大字符数。 |
| `minlength (en-US)` | `<input>`、`<textarea>` | 定义元素中允许的最小字符数。 |
| `media` | `<a>`、`<area>`、`<link>`、`<source>`、`<style>` | 指定链接资源所设计的媒体的提示。 |
| `method` | `<form>` | `POST`.
 定义用于提交表单的 HTTP
 方法。可以是 `GET`（默认）或 `POST`。
  |
| `min (en-US)` | `<input>`、`<meter>` | 指示允许的最小值。 |
| `multiple (en-US)` | `<input>`、`<select>` |
 指示是否可以在 `email` 或 `file`
 类型的输入中输入多个值。
  |
| `muted` | `<audio>`、`<video>` | 指示页面加载时音频是否会被静音。 |
| `name` | `<button>`、`<form>`、`<fieldset>`、`<iframe>`、`<input>`、`<object>`、`<output>`、`<select>`、`<textarea>`、`<map>`、`<meta>`、`<param>` | 元素的名称。例如，用于服务器标识表单提交中的字段。 |
| `novalidate` | `<form>` | 此属性指示在提交表单时不应验证表单。 |
| `open` | `<details>`、`<dialog>` |
 指示内容目前是否可见（若用于 `<details>`
 元素）或对话框是否处于活动状态且可以与之交互（若用于
 `<dialog>` 元素）。
  |
| `optimum` | `<meter>` | 指示最佳数值。 |
| `pattern` | `<input>` | 定义用于验证元素值的正则表达式。 |
| `ping` | `<a>`、`<area>` | `ping` 属性指定一个用空格分隔的 URL
 列表，以便在用户访问超链接时通知这些 URL。
  |
| `placeholder (en-US)` | `<input>`、`<textarea>` | 提供用于告诉用户可以在字段中输入什么的提示。 |
| `playsinline` | `<video>` | 布尔属性，指示视频是否要“内嵌”播放；也就是说，在元素的播放区域内播放。请注意，该属性的缺失并不意味着视频将始终以全屏模式播放。 |
| `poster` | `<video>` | 用于指示在用户播放或搜索之前要显示的海报帧的 URL。 |
| `preload` | `<audio>`、`<video>` | 指示是否应预加载整个资源、部分资源或者不预加载。 |
| `readonly` | `<input>`、`<textarea>` | 指示元素是否可以被编辑。 |
| `referrerpolicy` | `<a>`、`<area>`、`<iframe>`、`<img>`、`<link>`、`<script>` | 指定在获取资源时发送哪个引荐来源（referrer）。 |
| `rel` | `<a>`、`<area>`、`<link>` | 指示目标对象与链接对象的关系。 |
| `required (en-US)` | `<input>`、`<select>`、`<textarea>` | 指示是否必须填写此元素。 |
| `reversed` | `<ol>` | 指示列表是否应以降序而不是升序显示。 |
| `role` | 全局属性 | 定义元素的显式角色，供辅助技术使用。 |
| `rows` | `<textarea>` | 定义文本区域的行数。 |
| `rowspan` | `<td>` (en-US)、`<th>` | 定义表格单元格应跨越的行数。 |
| `sandbox` | `<iframe>` | 阻止在 iframe 中加载的文档使用某些特性（例如提交表单或打开新窗口）。 |
| `scope` | `<th>` | 定义表头单元格（在 `th` 元素中定义）所关联的单元格。 |
| `scoped`

非标准

已弃用
 | `<style>` |  |
| `selected` | `<option>` | 定义页面加载时将被选中的值。 |
| `shape` | `<a>`、`<area>` |  |
| `size (en-US)` | `<input>`、`<select>` |
 定义元素的宽度（以像素为单位）。如果元素的 `type`
 属性是 `text` 或 `password`，则它是字符数。
  |
| `sizes` | `<link>`、`<img>`、`<source>` |  |
| `slot` | 全局属性 | 为影子 DOM（shadow DOM）影子树中的插槽分配一个元素。 |
| `span` | `<col>`、`<colgroup>` |  |
| `spellcheck` | 全局属性 | 指示是否允许对元素进行拼写检查。 |
| `src` | `<audio>`、`<embed>`、`<iframe>`、`<img>`、`<input>`、`<script>`、`<source>`、`<track>`、`<video>` | 可嵌入内容的 URL。 |
| `srcdoc` | `<iframe>` |  |
| `srclang` | `<track>` |  |
| `srcset` | `<img>`、`<source>` | 一个或多个响应式图像候选项。 |
| `start` | `<ol>` | 定义除 1 以外的第一个数字。 |
| `step (en-US)` | `<input>` |  |
| `style` | 全局属性 | 定义将覆盖先前设置的 CSS 样式。 |
| `summary`

已弃用
 | `<table>` |  |
| `tabindex` | 全局属性 | 使用指定的聚焦（tab）顺序覆盖浏览器的默认聚焦顺序。 |
| `target` | `<a>`、`<area>`、`<base>`、`<form>` |
 指定打开链接文档的位置（若用于 `<a>`
 元素）或显示接收到的响应的位置（若用于
 `<form>` 元素）。
  |
| `title` | 全局属性 | 在鼠标悬停在元素上时显示的提示文本。 |
| `translate` | 全局属性 | 指定当页面本地化时，元素的属性值和其文本节点后代的值是否应该被翻译，或者是否应该保持不变。 |
| `type` | `<button>`、`<input>`、`<embed>`、`<object>`、`<ol>`、`<script>`、`<source>`、`<style>`、`<menu>`、`<link>` | 定义元素的类型。 |
| `usemap` | `<img>`、`<input>`、`<object>` |  |
| `value` | `<button>`、`<data>`、`<input>`、`<li>`、`<meter>`、`<option>`、`<progress>`、`<param>` | 定义页面加载时元素中显示的默认值。 |
| `width` | `<canvas>`、`<embed>`、`<iframe>`、`<img>`、`<input>`、`<object>`、`<video>` | 确定此处所列元素的宽度。

**备注：**对于其他所有实例，例如
 `<div>`，这是一个遗留属性，对于这些实例应使用
 CSS `height` 属性代替。

 |
| `wrap` | `<textarea>` | 指示文本是否应该换行。 |

内容属性和 IDL 属性
------------

在 HTML 中，大多数属性都有两个方面：**内容属性**和 **IDL（接口描述语言）属性**。

内容属性需要你在内容（HTML 代码）中设置，而且可以通过 `element.setAttribute()` 或 `element.getAttribute()` 来设置。内容属性总是一个字符串，即使里面的值是一个整数。例如，要将 `<input>` 元素的 `maxlength` 设置为 42，你需要在元素上调用 `setAttribute("maxlength", "42")`。

IDL 属性（attribute）也就是 JavaScript 属性（property）。你可以使用 JavaScript 属性如 `element.foo` 来设置这些属性。当你需要获取 IDL 属性的值时，IDL 属性总会使用隐含的内容属性的值（可能先经过转换）来返回一个值。同样地，当你设置这个值时，这个值会保存在内容属性中。换句话说，IDL 属性本质上反映了内容属性。

大多数时候，IDL 属性会返回元素实际使用的值。例如，`<input>` 的默认 `type` 是“text”，所以如果你设置 `input.type="foobar"`，`<input>` 元素仍然会是文本类型（在外观上和表现上），但 `type` 内容属性的值是“foobar”。然而，`type` IDL 属性依旧会返回字符串“text”。

IDL 属性并不总是字符串；例如 `input.maxlength` 是一个数字（有符号长整型）。使用 IDL 属性时，你读取或设置值的类型都是要求的类型。所以 `input.maxlength` 总会返回一个数字，而如果你要设置 `input.maxlength`，也需要使用数字。如果你传入了别的类型，则会根据标准 JavaScript 的类型转换规则被转换为数字。

IDL 属性可以反映其他类型，如无符号长整型、URL、布尔类型，等。不幸的是，并没有清晰的规则定义一个属性的 IDL 属性与对应的内容属性如何关联。大多数时候，这会遵守规范中列出的规则，但有时并不遵守。HTML 规范尝试将这件事尽可能变得对开发者友好，但由于很多原因（大多是历史原因），一些属性表现得很奇怪（例如 `select.size`），你就需要阅读规范以理解它们实际是如何表现的。

布尔属性
----

一些内容属性（例如 `required`、`readonly`、`disabled`）是布尔属性。如果一个布尔值属性存在，则其值为**真**（true），如果不存在，其值为**假**（false）。

HTML 定义了布尔属性允许的取值：如果属性存在，其值必须是一个空字符串（或未给该属性赋值），或者是一个大小写无关的 ASCII 字符串，该字符串与属性名严格相同，前后都没有空格。以下示例是为一个布尔值属性取值的几个有效方式。

```html
<div itemscope>这是一个有效的 HTML，但不是有效的 XML。</div>
<div itemscope=itemscope>这也是有效的 HTML，但不是有效的 XML。</div>
<div itemscope="">这是有效的 HTML，也是有效的 XML。</div>
<div itemscope="itemscope">这也是有效的 HTML 或 XML，但可能有点冗长。</div>
```

再明确一点，布尔值属性不能取值为 `"true"` 和 `"false"`。如果需要表示假值，布尔值属性需要整个忽略不写。这个限制消除了一些常见的误解：比如在元素中设置 `checked="false"`，元素的 `checked` 属性会被解析为 **true**，因为这个属性出现了。

事件处理器属性
-------

**警告：** 不建议使用事件处理器属性。将 HTML 和 JavaScript 代码混合在一起通常会产生难以维护的代码，而且事件处理器属性的执行也可能会被内容安全策略阻止。

除了上表中列出的属性，全局事件处理器（例如 `onclick`）也可以作为内容属性在所有元素上指定。

所有事件处理器属性都接受字符串值。字符串将用于合成 JavaScript 函数，例如 `function name(/*args*/) {body}`，其中，`name` 为属性名，`body` 为属性值。处理器接收与其 JavaScript 事件处理器对应项相同的参数——大多数处理器只接收一个 `event` 参数，而 `onerror` 接收五个参数：`event`、`source`、`lineno`、`colno`、`error`。这意味着你通常可以在属性中使用 `event` 变量。

```html
<div onclick="console.log(event)">点击这里！</div>
<!-- 合成的处理器具有名称，你可以引用处理器本身 -->
<div onclick="console.log(onclick)">点击这里！</div>
```

参见
--

* HTML 元素


允许图片和 canvas 跨源使用 - HTML（超文本标记语言）

允许图片和 canvas 跨源使用
=================

HTML 规范为图片提供了 `crossorigin` 属性，结合合适的 CORS 响应标头，就可以实现在 `<canvas>` 中使用外部域加载的 `<img>` 元素，就像在当前源加载一样。

查看 CORS 设置属性来了解更多 `crossorigin` 属性的用法。

安全性和“被污染”的 canvas
-----------------

由于在 `<canvas>` 位图中的像素可能来自多种来源，包括从其他主机检索的图像或视频，因此不可避免的会出现安全问题。

尽管不通过 CORS 就可以在 canvas 中使用其他来源的图片，但是这会**污染**画布，并且不再认为是安全的画布，这将可能在 canvas 检索数据过程中引发异常。

如果外部源的内容是 HTML `<img>` 或 SVG `<svg>` 元素，会阻止从 canvas 中读取数据。

如果外部源图片是作为 `HTMLCanvasElement` 或 `ImageBitMap` 获取的，且图片源不符合同源准则，会阻止读取 canvas 的内容。

在"被污染"的 canvas 中调用以下方法将会抛出安全错误：

* 在 canvas 的上下文上调用 `getImageData()`
* 在 `<canvas>` 元素本身调用 `toBlob()`、`toDataURL()` 或 `captureStream()`

尝试以上行为会导致抛出 `SecurityError` 异常。这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。

存储一张外部来源中的图片
------------

在以下例子中，将实现允许检索来自外部的图像，并将其保存在本地存储。要实现这一点，我们需要配置服务器以及网站本身的编码。

### 网站服务器配置

首先，你必须有一个可以对图片正确响应 `Access-Control-Allow-Origin` 标头，以允许跨源访问的服务器。

我们假设服务器正在使用 Apache。你可以参考以下 HTML5 样板为跨源图片准备的 Apache 服务器配置：

```xml
<IfModule mod\_setenvif.c>
  <IfModule mod\_headers.c>
    <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
```

简单来说，该配置允许服务器的图形文件（那些扩展名为 ".bmp"、".cur"、".gif"、".ico"、".jpg"、".jpeg"、".png"、".svg"、".svgz" 和 ".webp" 的文件）从互联网上的任何位置跨源访问。

### 实现保存功能

以上配置完毕后，服务器就可以跨源获取图片了。现在我们可以开始编写将图片保存在本地存储中的代码了，就像这些图片在你自己域名之下一样。

关键在于在 `HTMLImageElement` 上设置 `crossOrigin` (en-US) 的 `crossorigin` 属性，这引导浏览器在下载图像数据时使用跨源访问。

#### 开始下载图片

以下代码会（例如，在用户点击“下载”按钮时）开始下载：

```js
function startDownload() {
  let imageURL =
    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn\_logo-only\_color.svg?1535749917189";
  let imageDescription = "The Mozilla logo";

  downloadedImg = new Image();
  downloadedImg.crossOrigin = "Anonymous";
  downloadedImg.addEventListener("load", imageReceived, false);
  downloadedImg.alt = imageDescription;
  downloadedImg.src = imageURL;
}
```

在这里，我们使用了“硬编码”的图片网址（`imageURL`）和相关描述文字（`imageDescription`），当然这些可以很方便地从任何地方获取。当开始下载图片时，我们使用 `Image()` 构造器创建新的 `HTMLImageElement` 对象，将图片的 `crossOrigin` 属性设置为 `"Anonymous"`（即允许对未经过验证的图像进行跨源下载）。为图片添加 `load` 事件的监听来判断图片数据是否已接收。我们为图片添加了替代性文字，当 `<canvas>` 不支持 `alt` 属性时，该值可以用于设置 `aria-label` 或 canvas 的内部内容。

最后，将图片的 `src` (en-US) 属性设置为图片的 URL 以触发图片下载。

#### 接收和保存图片

在 `imageReceived()` 方法中来处理新下载的图片：

```js
function imageReceived() {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  canvas.width = downloadedImg.width;
  canvas.height = downloadedImg.height;
  canvas.innerText = downloadedImg.alt;

  context.drawImage(downloadedImg, 0, 0);
  imageBox.appendChild(canvas);

  try {
    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
  } catch (err) {
    console.error(`Error: ${err}`);
  }
}
```

在 `HTMLImageElement` 调用 `imageReceived()` 来处理 `"load"` 事件以接收下载图片。一旦下载完成全部有效的数据即可触发该事件。首先我们会创建用于转换图片到数据 URL 的 `<canvas>` 元素，然后在变量 `context` 中获取 canvas 的 2D 绘画上下文（`CanvasRenderingContext2D`）。

调整画布大小以匹配接收到的图像，内部文字将设置为图片的描述，然后使用 `drawImage()` 将图像绘制到画布中。画布之后被插入到文档中显示。

现在是时候本地存储图片了。我们使用 Web Storage API 的本地存储机制来将图片实际存储到本地，该机制可通过全局 `localStorage` 进行访问。canvas 的 `toDataURL()` 方法用于将图像转换为 data:// URL 形式的 PNG 格式图片，之后使用 `setItem()` 存储到本地。

参见
--

* 在 Chrome 13 的 WebGL 中使用跨源图片
* HTML 标准——`crossorigin` 属性
* Web 存储 API


约束验证 - HTML（超文本标记语言）

约束验证
====

创建 web 表单始终是一个复杂的任务。仅仅组装表单是容易的，但是检查每一个字段的值是否有效并且一致是一件更加困难的事情，而如何告知用户错误所在可能会令人头痛。HTML5 引入了表单相关的一些新机制：它为 `<input>` 元素和*约束验证*增加了一些新的语义类型，使得客户端检查表单内容变得容易。基本上，通过设置一些新的属性，常用的约束条件可以无需 JavaScript 代码而检测到；对于更复杂的约束条件的校验可以尝试使用约束验证 API。

对于这些概念的基本介绍和示例，参阅表单数据校验教程一页的介绍。

**备注：** HTML 约束验证并不能移除*服务端*验证的需要。尽管无效的表单请求要少得多，但无效的表单请求仍然可能被发送，例如被试图欺骗你的网络应用的坏人发送。因此，你需要始终在服务端验证输入约束，其方式与在客户端所做的一致。

固有和基本的约束
--------

在 HTML 中，有两种方式声明基本的约束：

* 给 `<input>` 元素的 `type` 属性选择最合适的语义化的值，比如，选择 `email` 类型将会自动创建一个约束，用于检查输入的值是否是一个有效的电子邮件地址。
* 设置验证相关的属性值，允许用一种简单的方式来描述基本的约束，而不必要使用 JavaScript。
### 语义的 input 类型

`type` 属性中的固有约束有：

| Input 类型 | 约束描述 | 相关违约 |
| --- | --- | --- |
| `<input type="URL">` | 值必须为 URL 现行标准定义的绝对 URL 地址。 | **TypeMismatch (en-US)** 约束违反 |
| `<input type="email">` | 该值必须是一个语法上有效的电子邮件地址，其格式一般为 `username@hostname.tld`，但也可以是本地的，如 `username@hostname`。 | **TypeMismatch (en-US)** 约束违反 |

对于这两种输入类型，如果设置了 `multiple` 属性，可以设置几个值，作为一个逗号分隔的列表。如果其中任何一个不满足这里描述的条件，就会触发 **TypeMismatch** 约束的违反。

请注意，大多数 input 类型没有内在的约束，因为有些类型被禁止在约束验证中使用，或者有一个净化算法将不正确的值转化为正确的默认值。

### 验证相关的属性

除了上面描述的 `type` 属性外，以下属性用于描述基本约束。

| 属性 | 支持该特性的 Input 类型 | 可接受的值 | 约束描述 | 相关违约 |
| --- | --- | --- | --- | --- |
| `pattern` | `text`、`search`、`url`、`tel`、`email`、`password` | 一个JavaScript 正则表达式（以 `global`、`ignoreCase` 标志编译，且*禁用*了 `multiline` 标志） | 输入的值必须符合模式。 | **`patternMismatch`** (en-US)
 约束违反
  |
| `min (en-US)` | `range`、`number` | 一个有效的数字 | 输入的值必须大于等于该属性值。 | **`rangeUnderflow (en-US)`**
 约束违反
  |
| `date`、`month`、`week` | 一个有效的日期值 |
| `datetime-local`、`time` | 一个有效的日期时间值 |
| `max (en-US)` | `range`、`number` | 一个有效的数字 | 输入的值必须小于等于该属性值。 | **`rangeOverflow (en-US)`**
 约束违反
  |
| `date`、`month`、`week` | 一个有效的日期值 |
| `datetime-local`、`time` | 一个有效的日期时间值 |
| `required (en-US)` | `text`、`search`、`url`、`tel`、`email`、`password`、`date`、`datetime-local`、`month`、`week`、`time`、`number`、`checkbox`、`radio`、`file`；也在 `<select>` 和 `<textarea>` 元素上可用 | 由于是一个布尔属性，所以为 *none*：如果存在这个属性，则为 *true*；否则为 *false* | 如果指定了这个属性，则必须输入一个值。 | **`valueMissing (en-US)`**
 约束违反
  |
| `step (en-US)` | `date` | 一个代表天数的整数 | 如果 step 没有设置为字面量 `any`，则输入值必须为 **min** + step 值的整数倍。 | **`stepMismatch (en-US)`**
 约束违反
  |
| `month` | 一个代表月数的整数 |
| `week` | 一个代表周数的整数 |
| `datetime-local`、`time` | 一个代表秒数的整数 |
| `range`、`number` | 一个整数 |
| `minlength (en-US)` | `text`、`search`、`url`、`tel`、`email`、`password`；也在 `<textarea>` 元素上可用 | 一个整数长度 | 如果输入值非空，则其字符数（码点）不得少于该属性的值。对于 `<textarea>`，所有换行符都被规范化为一个字符（相对于 CRLF 对）。 | **`tooShort (en-US)`**
 约束违反
  |
| `maxlength (en-US)` | `text`、`search`、`url`、`tel`、`email`、`password`；也在 `<textarea>` 元素上可用 | 一个整数长度 | 字符数（码点）不得超过该属性的值。 | **`tooLong (en-US)`**
 约束违反
  |

约束验证过程
------

约束验证是通过约束验证 API 在单个表单元素上或在表单层面上，通过 `<form>` 元素本身完成。约束验证是通过以下方式完成的：

* 通过调用表单相关的 DOM 接口（`HTMLInputElement`、`HTMLSelectElement` (en-US)、`HTMLButtonElement` 、`HTMLOutputElement` (en-US) 或 `HTMLTextAreaElement`）的 `checkValidity()` 或 `reportValidity()` 方法，只对这个元素进行约束评估，允许脚本获得这些信息。`checkValidity()` 方法返回一个布尔值，表示该元素的值是否通过其约束（这通常是由用户代理在确定哪个 CSS 伪类，`:valid` 或 `:invalid` 适用时完成的）。相反，`reportValidity()` 方法会向用户报告任何约束失败的情况。
* 通过调用 `HTMLFormElement` 接口上的 `checkValidity()` 或 `reportValidity()` 方法。
* 通过提交表单本身。

调用 `checkValidity()` 也被称为约束的*静态*验证，调用 `reportValidity()` 也被称为约束的*交互*认证。

**备注：**

* 如果 `<form>` 元素上设置了 `novalidate` 属性，则不发生约束验证交互。
* 在 `HTMLFormElement` 接口上调用 `submit()` 方法并不触发约束条件验证。换句话说，即使表单数据不满足约束条件，该方法也会将其发送到服务器。在提交按钮上调用 `click()` 方法来代替。

使用约束验证 API 进行复杂的约束
------------------

使用 JavaScript 和约束验证 API，可以实现更复杂的约束，例如，结合几个字段的约束，或涉及复杂计算的约束。

基本上，这个想法是在某个表单字段事件（比如 **onchange**）上触发 JavaScript，以计算是否违反约束，然后使用 `field.setCustomValidity()` 方法来设置验证的结果：一个空字符串意味着满足约束条件，任何其他字符串意味着有一个错误，这个字符串是显示给用户的错误信息。

### 包含多个字段的约束：邮政编码验证

每个国家的邮政编码都不相同。大多数国家允许有一个可选的国家代码前缀（如德国的 `D-`，法国或瑞士的 `F-`），还有其他一些国家的邮政编码只有固定的数字；其他国家，如英国，有更复杂的结构，允许在一些特定的位置有字母。

**备注：** 这不是一个全面的邮政编码验证库，而是关键概念的演示。

作为示例，我们会向以下这个简单的表单中添加一段代码来进行约束验证：

```html
<form>
  <label for="ZIP">ZIP 码：</label>
  <input type="text" id="ZIP" />
  <label for="Country">国家：</label>
  <select id="Country">
    <option value="ch">瑞士</option>
    <option value="fr">法国</option>
    <option value="de">德国</option>
    <option value="nl">荷兰</option>
  </select>
  <input type="submit" value="验证" />
</form>
```

以上代码显示了像这样的表单：

首先，我们来写一个函数来检查本身包含的约束：

```js
function checkZIP() {
  // 为每个国家定义 ZIP 码需要满足的模式
  const constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "瑞士的 ZIP 码必须恰好有 4 位数字，如 CH-1950 或 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "法国的 ZIP 码必须恰好有 5 位数字，如 F-75012 或 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "德国的 ZIP 码必须恰好有 5 位数字，如 D-12345 或 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s\*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "荷兰的 ZIP 码必须恰好有 4 位数字，后跟除 SA、SD 和 SS 的 2 位字母",
    ],
  };

  // 读取国家 ID
  const country = document.getElementById("Country").value;

  // 获取 NPA 字段内容
  const ZIPField = document.getElementById("ZIP");

  // 构建约束检查器
  const constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // 检查它！
  if (constraint.test(ZIPField.value)) {
    // ZIP 码满足约束条件，我们使用 Constraint API 告知用户
    ZIPField.setCustomValidity("");
  } else {
    // ZIP 不满足约束条件，我们使用 Constraint API 告知该国家所需的 ZIP 码格式
    ZIPField.setCustomValidity(constraints[country][1]);
  }
}
```

然后我们把它链接到 `<select>` 的 **onchange** 事件和 `<input>` 的 **oninput** 事件。

```js
window.onload = () => {
  document.getElementById("Country").onchange = checkZIP;
  document.getElementById("ZIP").oninput = checkZIP;
};
```

### 限制所上传文件的大小

另一个常见的约束是限制要上传的文件的大小。在文件传输到服务器之前，在客户端检查这个问题需要将约束条件验证 API，特别是 `field.setCustomValidity()` 方法，与另一个 JavaScript API 结合起来，这里是文件 API。

这里是 HTML 部分：

```html
<label for="FS">选择一个小于 75 kB 的文件：</label>
<input type="file" id="FS" />
```

会显示：

JavaScript 代码会读取所选的文件，使用 `File.size()` 方法来获取其大小，将其与（硬编码的）限制进行比较，如果有违反，则调用约束 API 来通知浏览器。

```js
function checkFileSize() {
  const FS = document.getElementById("FS");
  const files = FS.files;

  // 如果选择了（至少）一个文件
  if (files.length > 0) {
    if (files[0].size > 75 \* 1024) {
      // 检查约束条件
      FS.setCustomValidity("选择的文件不能超过 75 kB");
      return;
    }
  }
  // 没有违反自定义约束条件
  FS.setCustomValidity("");
}
```

最终，我们将这个方法链接到一个正确的事件上：

```js
window.onload = () => {
  document.getElementById("FS").onchange = checkFileSize;
};
```

约束验证的可视化样式
----------

除了设置约束条件外，web 开发者还想控制向用户显示什么信息以及它们的样式。

### 控制元素的外观

元素的外观可以通过 CSS 伪类进行控制。

#### :required、:optional CSS 伪类

`:required` 和 `:optional` 伪类允许开发者编写选择器，以匹配有 `required` 属性或没有该属性的表单元素。

#### :placeholder-shown CSS 伪类

参见 `:placeholder-shown`。

#### :valid、:invalid CSS 伪类

`:valid` 和 `:invalid` 伪类用于表示 <input> 元素，根据输入的类型设置，这些元素的内容分别可以验证和无法验证。这些类允许用户对有效或无效的表单元素进行样式设计，以使其更容易识别格式正确或不正确的元素。

### 控制约束验证的文字

以下一些方法可以控制违反约束条件的文本：

* 以下元素上的 `setCustomValidity(message)` 方法：
    + `<fieldset>`。备注：大多数浏览器中，在 fieldset 元素上设定自定义验证信息不会阻止表单提交。
    + `<input>`
    + `<output>`
    + `<select>`
    + 提交按钮（使用类型为 `submit` 的 `<button>` 元素，或类型为 submit 的 `input` 元素创建。其他类型的按钮不参与约束验证。
    + `<textarea>`
* `ValidityState` 接口描述了由上述元素类型的 `validity` 属性返回的对象。它表示一个输入值可能无效的各种方式。它们共同解释了为什么一个元素的值是无效的，则不能被验证。


全局属性 - HTML（超文本标记语言）

全局属性
====

**全局属性**是所有 HTML 元素共有的属性；它们可以用于所有元素，即使属性可能对某些元素不起作用。

我们可以在所有的 HTML 元素，*甚至是在标准里没有指定的元素*上指定全局属性。这意味着任何非标准元素仍必须能够允许应用这些属性，即使使用这些元素意味着文档不再是 HTML5 兼容的。例如，虽然 `<foo>` 不是一个有效的 HTML 元素，但是 HTML5 兼容的浏览器隐藏了标记为 `<foo hidden>…</foo>` 的内容。

除了基本的 HTML 全局属性之外，还存在以下全局属性：

* `xml:lang` 和 `xml:base`——两者都是从 XHTML 规范继承且被弃用，但为了兼容性而被保留的。
* ARIA `role` 和多重 `aria-*` 状态和属性，用于保证无障碍。
* 事件处理器属性：`onabort`、`onautocomplete`、`onautocompleteerror`、`onblur`、`oncancel`、`oncanplay`、`oncanplaythrough`、`onchange`、`onclick`、`onclose`、`oncontextmenu`、`oncuechange`、`ondblclick`、`ondrag`、`ondragend`、`ondragenter`、`ondragleave`、`ondragover`、`ondragstart`、`ondrop`、`ondurationchange`、`onemptied`、`onended`、`onerror`、`onfocus`、`oninput`、`oninvalid`、`onkeydown`、`onkeypress`、`onkeyup`、`onload`、`onloadeddata`、`onloadedmetadata`、`onloadstart`、`onmousedown`、`onmouseenter`、`onmouseleave`、`onmousemove`、`onmouseout`、`onmouseover`、`onmouseup`、`onmousewheel`、`onpause`、`onplay`、`onplaying`、`onprogress`、`onratechange`、`onreset`、`onresize`、`onscroll`、`onseeked`、`onseeking`、`onselect`、`onshow`、`onsort`、`onstalled`、`onsubmit`、`onsuspend`、`ontimeupdate`、`ontoggle`、`onvolumechange`、`onwaiting`。
全局属性列表
------

`accesskey`

为当前元素提供一个生成键盘快捷键的提示。该属性由一个空格分隔的字符列表组成。浏览器应该使用计算机键盘布局上存在的第一个字符。

`autocapitalize`

控制用户的文本输入是否和如何自动大写，它可以有以下的值：

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

`autofocus`

表示一个元素将在页面加载时自动聚焦，或者在其所属的 `<dialog>` 显示时被聚焦。该属性是一个布尔值，初始化为 false。

`class`

一个以空格分隔的元素的类名列表，它允许 CSS 和 Javascript 通过类选择器或 DOM 方法 `Document.getElementsByClassName()` 来选择和访问特定的元素。

`contenteditable`

一个枚举 (en-US)属性，表示元素是否可被用户编辑。如果可以，浏览器会调整元素的部件以允许编辑。该属性必须是下列值之一：

* `true` 或者*空字符串*，表明元素是可被编辑的；
* `false`，表明元素不能被编辑。

`contextmenu`
已弃用

`<menu>` 的 **`id`**，作为该元素的上下文菜单。

`data-*`

形成一类属性，称为自定义数据属性，允许在 HTML 和其 DOM 表示之间交换专有信息，可由脚本使用。所有这些自定义数据属性都可以通过所属元素的 `HTMLElement` 接口来访问。通过 `HTMLElement.dataset` 属性可以访问它们。

`dir`

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

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

`draggable`

一种枚举属性，指示是否可以使用 Drag and Drop API 拖动元素。它可以有以下的值：

* `true`, 这表明元素可被拖动；
* `false`, 这表明元素不可被拖动。

`enterkeyhint` (en-US)

提示在虚拟键盘上为回车键呈现什么动作标签（或图标）。

`exportparts` (en-US)
实验性

用于将隐藏部分从一个嵌套的影子树（shadow tree）中过渡性地导出到一个包含该树的常规树（light tree）中。

`hidden`

一个枚举的属性，表示该元素还没有，或者不再*相关*。例如，它可以用来隐藏页面中的元素，这些元素在登录过程完成之前不能使用。浏览器不会渲染这样的元素。这个属性不能用来隐藏可以合法显示的内容。

`id`

定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。

`inert` (en-US)

一个布尔值，使浏览器忽略该元素的用户输入事件。在有点击事件的情况下很有用。

`inputmode`

向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于 `<input>` 元素，但在 `contenteditable` 模式下可用于任何元素。

`is`

允许指定标准 HTML 元素的行为如同已注册的自定义内置元素一样（有关更多详细信息，请参阅使用自定义元素）。

**备注：** `item*` 属性是 WHATWG HTML 微数据特性的一部分。

`itemid`

项的唯一全局标识符。

`itemprop`

用于向项添加属性。每个 HTML 元素都可以指定一个 `itemprop` 属性，其中 `itemprop` 由一个名称和值对组成。

`itemref`

只有不是具有 `itemscope` 属性的元素的后代，它的属性才可以与使用 `itemref` 项目相关联。它提供了元素 ID 列表（而不是 `itemid`）以及文档中其他位置的其他属性。

`itemscope`

`itemscope`（通常）与 `itemtype` 一起使用，以指定包含在关于特定项目代码块中的 HTML。`itemscope` 创建数据项并定义与之关联的 `itemtype` 的范围。`itemtype` 是描述项及其属性上下文的词汇表（例如 schema.org）的有效 URL。

`itemtype`

指定将用于在数据结构中定义 `itemprops`（项属性）的词汇表的 URL。`itemscope` 用于设置数据结构中按 `itemtype` 设置的词汇表的生效范围。

`lang`

帮助定义元素的语言：不可编辑元素所在的语言，或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”（由用连字符分隔的“语言子标记”组成），格式在 RFC 5646: Tags for Identifying Languages（也称为 BCP 47） 中定义。**xml:lang** 优先于它。

`nonce`

一个加密的 nonce（“只使用一次的数字”），可以被内容安全策略使用，以确定是否允许进行给定的获取。

`part`

元素的部件名称的空格分隔列表。Part 名称允许 CSS 通过 `::part` 伪元素选择和设置影子树中的特定元素。

`popover`

用于将某个元素指定为弹出式元素（详见 Popover API (en-US)）。弹出式元素通过 `display: none` 隐藏，直到通过调用/控制元素（即 `<button>` 或 `<input type="button">` 带有 `popovertarget` 属性）或 `HTMLElement.showPopover()` (en-US) 调用而打开。

`role`

Role 定义了内容的语义，允许屏幕阅读器和其他工具以符合用户对该类型对象的期望的方式来展示和支持与该对象的互动。`roles` 以 `role="role_type"` 的形式添加到 HTML 元素中，其中 `role_type` 是 ARIA 规范中的一个角色名称。

`slot`

将影子 DOM 影子树中的一个空槽分配给一个元素：具有 `slot` 属性的元素被分配给由 `<slot>` 元素创建的空槽，其 `name` 属性的值与 `slot` 属性的值匹配。

`spellcheck`

枚举属性，定义是否可以检查元素是否存在拼写错误。它可能具有以下值：

* `true` 或空字符串，表示如果可能，应检查元素是否存在拼写错误；
* `false`，表示不应检查元素的拼写错误。

`style`

含有要应用于元素的 CSS 样式声明。请注意，建议在单独的文件中定义样式。该属性和 `<style>` 元素主要用于快速添加样式，例如用于测试目的。

`tabindex`

整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。它可以接受下列值之一：

* *负值*表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达;
* `0` 表示元素应通过顺序键盘导航可聚焦和可到达，但其相对顺序由平台约定定义;
* *正值*意味着元素应该可以通过顺序键盘导航进行聚焦和访问；元素聚焦的顺序是 **tabindex** 的增加值。如果多个元素共享相同的 `tabindex`，则它们的相对顺序遵循它们在文档中的相对位置。

`title`

包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。

`translate`

枚举属性，用于指定在页面本地化时是否转换元素的属性值及其 `Text` (en-US) 节点子节点的值，或者是否保持它们不变。它可以具有以下值：

* 空字符串和 `yes`，表示元素将被翻译。
* `no`，表示该元素不会被翻译。

`virtualkeyboardpolicy`

一个枚举 (en-US)属性，用于控制屏幕上的虚拟键盘行为，如平板电脑、手机或其他设备上的硬件键盘可能无法使用的元素，也使用 `contenteditable` 属性。

* `auto` 或一个*空字符串*，当元素被聚焦或点击时自动显示虚拟键盘。
* `manual`，它将焦点和元素上的点击与虚拟键盘的状态解耦。

规范
--

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |
| HTML Standard # attr-autocapitalize |
| HTML Standard # attr-fe-autocomplete |
| HTML Standard # dom-fe-autofocus |
| HTML Standard # global-attributes:classes-2 |
| HTML Standard # attr-contenteditable |
| HTML Standard # attr-data-\* |
| HTML Standard # the-dir-attribute |
| HTML Standard # the-draggable-attribute |
| HTML Standard # attr-enterkeyhint |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |
| HTML Standard # the-hidden-attribute |
| HTML Standard # global-attributes:the-id-attribute-2 |
| HTML Standard # the-inert-attribute |
| HTML Standard # attr-inputmode |
| HTML Standard # attr-is |
| HTML Standard # attr-itemid |
| HTML Standard # names:-the-itemprop-attribute |
| HTML Standard # attr-itemref |
| HTML Standard # attr-itemscope |
| HTML Standard # attr-itemtype |
| HTML Standard # attr-lang |
| HTML Standard # attr-nonce |
| CSS Shadow Parts # part-attr |
| HTML Standard # the-popover-attribute |
| HTML Standard # attr-popovertarget |
| HTML Standard # attr-popovertargetaction |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |
| HTML Standard # attr-spellcheck |
| HTML Standard # the-style-attribute |
| HTML Standard # attr-tabindex |
| HTML Standard # the-title-attribute |
| HTML Standard # attr-translate |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

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

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

参见
--

* 允许查询大多数全局属性的 `Element` 接口。


HTML 元素参考 - HTML（超文本标记语言）

HTML 元素参考
=========

此页面列出了所有使用标签创建的 HTML 元素。

它们已被按照功能进行分组，以便更轻松地找到你想要的内容。同时，侧边栏中也按照字母排序列出了所有元素。

**备注：** 若想获知更多关于 HTML 元素、属性的基本信息，请查阅 HTML 介绍中的相关内容。

主根元素
----

| 元素 | 描述 |
| --- | --- |
| `<html>` | 表示一个 HTML 文档的根（顶级元素），所以它也被称为*根元素*。所有其它元素必须是此元素的后代。 |

文档元数据
-----

元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如搜索引擎 (en-US)、浏览器 等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。

| 元素 | 描述 |
| --- | --- |
| `<base>` | 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。 |
| `<head>` | 包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。 |
| `<link>` | 指定当前文档与外部资源的关系。该元素最常用于链接 CSS，此外也可以被用来创建站点图标（比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标）。 |
| `<meta>` | 表示那些不能由其它 HTML 元相关（meta-related）元素表示的元数据信息。如：`<base>`、`<link>`、`<script>`、`<style>` 或 `<title>`。 |
| `<style>` | 包含文档或者文档部分内容的样式信息，它们会被应用于包含此元素的文档。 |
| `<title>` | 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 |

分区根元素
-----

| 元素 | 描述 |
| --- | --- |
| `<body>` | 表示文档的内容。文档中只能有一个该元素。 |

内容分区
----

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

| 元素 | 描述 |
| --- | --- |
| `<address>` | 表示其中的 HTML 提供了某个人、某些人或某个组织（等等）的联系信息。 |
| `<article>` | 表示文档、页面、应用或网站中的独立结构，旨在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其它独立的内容项目。 |
| `<aside>` | 表示文档的一部分，其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框（call-out box）的形式出现。 |
| `<footer>` | 表示最近的一个父分段内容或分段的根元素的页脚。`<footer>` 通常包含该章节作者、版权数据或者与文档相关的链接等信息。 |
| `<header>` | 表示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其它元素，比如 Logo、搜索框、作者名称和其它元素。 |
| `<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`、`<h6>` | 表示六个不同的级别的章节标题，`<h1>` 级别最高，而 `<h6>` 级别最低。 |
| `<main>` | 呈现了文档正文的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。 |
| `<nav>` | 表示页面的一部分，其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。 |
| `<section>` | 表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。 |

文本内容
----

使用 HTML 文本内容元素来组织在开标签 `<body>` 和闭标签 `</body>` 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于无障碍和搜索引擎优化很重要。

| 元素 | 描述 |
| --- | --- |
| `<blockquote>` | 代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。引文来源的 URL 地址可以使用属性 `cite` 给出，而来源的文本可以使用 `<cite>` 元素给出。 |
| `<dd>` | 用来指明一个描述列表（`<dl>`）元素中先前术语（`<dt>`）的描述、定义或值。 |
| `<div>` | 一个通用型的流式内容容器，在不使用 CSS 的情况下，其对内容或布局没有任何影响，直到通过某种方式设置样式（例如，将样式直接应用于该元素，或将弹性盒子等布局模型应用于其父元素）。 |
| `<dl>` | 一个包含一组术语（使用 `<dt>` 元素指定）以及描述（由 `<dd>` 元素提供）的列表。通常用于展示词汇表或者元数据（键—值对列表）。 |
| `<dt>` | 在描述或定义列表中声明一个术语。该元素仅能作为 `<dl>` 的子元素出现。通常在该元素后面会跟着一个 `<dd>` 元素；但多个连续出现的 `<dt>` 元素也将由出现在它们后面的第一个 `<dd>` 元素定义。 |
| `<figcaption>` | 描述其父元素 `<figure>` 里其它内容的标题或图例。 |
| `<figure>` | 表示一段独立的内容，可能包含 `<figcaption>` 元素定义的标题。该插图、标题和其中的内容通常作为一个独立的引用单元。 |
| `<hr>` | 表示段落级元素之间的主题转换：例如，一个故事中的场景的改变，或一个章节的主题的改变。 |
| `<li>` | 表示列表里的条目。它必须包含在一个父元素里：有序列表（`<ol>`）、无序列表（`<ul>`）或者菜单（`<menu>`）。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。 |
| `<menu>` | `<ul>` 的语意替换，但被浏览器视为（并向无障碍树暴露为）与 `<ul>` 没有区别。它表示了条目的无序列表（使用 `<li>` 表示）。 |
| `<ol>` | 表示有序列表，通常渲染为一个带编号的列表。 |
| `<p>` | 表示文本的一个段落。该元素通常表现为通过空行和/或首行缩进与相邻块分隔的文本块。但 HTML 段落可以与任何相关内容（例如，图像或表单字段）构成结构分组。 |
| `<pre>` | 表示预定义格式文本。在该元素中的文本通常按照 HTML 文件中的编排，以非比例或等宽字体的形式展现出来，文本中的空白符都会显示出来。 |
| `<ul>` | 表示一系列无序的列表项目，通常渲染为项目符号列表。 |

内联文本语义
------

使用 HTML 内联文本语义定义单词、内容、或任意文字的语义、结构或样式。

| 元素 | 描述 |
| --- | --- |
| `<a>` | 可以通过它的 `href` 属性创建通向其它网页、文件、电子邮件地址、同一页面内的位置或任何其它 URL 的超链接。 |
| `<abbr>` | 用于代表缩写。 |
| `<b>` | 用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 `<b>` 元素用于显示粗体文字；替代方案是使用 CSS `font-weight` 属性来创建粗体文字。 |
| `<bdi>` | 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。 |
| `<bdo>` | 覆盖文本的方向性，使文本以不同的方向渲染呈现出来。 |
| `<br>` | 在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。 |
| `<cite>` | 用于包含引用作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。 |
| `<code>` | 以一种旨在表明其中的内容是计算机代码片段的方式显示其内容。默认情况下，它以用户代理的默认等宽字体显示。 |
| `<data>` | 将指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 time 元素。 |
| `<dfn>` | 用于表示在定义短语或句子的上下文中定义的术语。父级 `<p>` 元素、`<dt>`/`<dd>` 对，或与 `<dfn>` 元素最近的分区元素被认定为是术语的定义。 |
| `<em>` | 标记出需要用户着重阅读的内容，`<em>` 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。 |
| `<i>` | 用于表现因某些原因需要区分普通文本的一系列文本。例如惯用文本、技术术语、分类名称等。它通常使用斜体表示，这也是该元素（`<i>`）命名的来源。 |
| `<kbd>` | 表示一段内联文本，文本来自键盘、语音输入或其他文本输入设备的用户输入。按照惯例，用户代理默认使用其默认的等宽字体显示 `<kbd>` 元素的内容，尽管这不是 HTML 标准强制要求的。 |
| `<mark>` | 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。 |
| `<q>` | 表示一个封闭的并且是短的行内引用的文本。大多数现代浏览器通过将文本包裹在引号内来实现这一点。此元素适用于不需要分段的短文本；对于长的文本的引用请使用 `<blockquote>` 元素。 |
| `<rp>` | 用于为那些不能使用 `<ruby>` 元素展示 ruby 注解的浏览器，提供回退的圆括号。一个 `<rp>` 元素应该包裹一个左括号或右括号，这些括号将包含注解文本的 `<rt>` 元素包裹起来。 |
| `<rt>` | 指定 ruby 注解的 ruby 文本组建，用于描述东亚字符的发音、翻译或音译信息。该元素始终在 `<ruby>` 元素中使用。 |
| `<ruby>` | 用来在基础文本上方、下方或一旁展现小注解，通常用于显示东亚字符的发音。它还用于注解其他类型的文本，但这种用法不太常见。 |
| `<s>` | 使用删除线来渲染文本。使用 `<s>` 元素来表示不再相关或者不再准确的事情。但是当表示文档编辑时，不建议使用 `<s>`；为此，请酌情使用 del 和 ins 元素。 |
| `<samp>` | 用于标识计算机程序输出，通常使用浏览器缺省的等宽字体来渲染（例如 Courier 或 Lucida Console）。 |
| `<small>` | 代表旁注和小字体，如版权和法律等独立于其样式展示的文本。默认情况下，它将其中的文本使用小一号的字体渲染，例如从 `small` 到 `x-small`。 |
| `<span>` | 短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用 `class` 或者 `id` 属性），或者这些元素有着共同的属性，比如 `lang`。应该在没有其他合适的语义元素时才使用它。`<span>` 与 div 元素很相似，但 `<div>` 是一个块级元素而 `<span>` 则是行级元素。 |
| `<strong>` | 表示其内容十分重要、严肃或紧迫。浏览器通常用粗体显示。 |
| `<sub>` | 定义因排版原因而应显示为下标的内联文本。下标通常显示得更小且更低。 |
| `<sup>` | 定义因排版原因而应显示为上标的内联文本。上标通常显示得更小且更高。 |
| `<time>` | 表示特定的时间段。可能包括 datetime 属性，以将日期转换为机器可读的格式，从而获得更好的搜索引擎结果或自定义功能（如，提醒）。 |
| `<u>` | 表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，但可以用 CSS 替换。 |
| `<var>` | 表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。 |
| `<wbr>` | 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。 |

图片和多媒体
------

HTML 支持各种多媒体资源，例如图像、音频和视频。

| 元素 | 描述 |
| --- | --- |
| `<area>` | 在图片上定义一个可点击区域。*图像映射*（image map）允许图像上的几何区域与超链接关联。 |
| `<audio>` | 用于在文档中嵌入音频内容。它可以包含一个或多个音频资源，这些音频资源可以使用 `src` 属性或者 source 元素来进行表示：浏览器将会选择最合适的一个来使用。也可以使用 `MediaStream` 将这个元素用于流式媒体。 |
| `<img>` | 将一张图像嵌入文档。 |
| `<map>` | 与 `<area>` 元素一起使用，以定义一个图像映射（可点击链接区域）。 |
| `<track>` | 被当作媒体元素——音频（audio）和视频（video）的子元素来使用。它允许指定时序文本轨道（或者基于时间的数据），例如自动处理字幕。轨道格式有 WebVTT 格式（`.vtt` 格式文件）——Web 视频文本轨格式。 |
| `<video>` | 用于在文档中嵌入媒体播放器，支持文档内的视频播放。你也可以将 `<video>` 标签用于音频内容，但是 audio 元素可能在用户体验上更合适。 |

内嵌内容
----

除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。

| 元素 | 描述 |
| --- | --- |
| `<embed>` | 将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。 |
| `<iframe>` | 表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中。 |
| `<object>` | 表示引入一个外部资源，这个资源可能是一张图片、嵌入的浏览上下文，亦或是一个插件所使用的资源。 |
| `<picture>` | 通过包含零或多个 `<source>` 元素和一个 `<img>` 元素来为不同的显示/设备场景提供图像版本。 |
| `<portal>` (en-US) | 允许将另一个 HTML 页面嵌入到当前页面中，以便更流畅地导航到新页面。 |
| `<source>` | 为 picture、audio 或 video 元素指定多个媒体资源。这是一个空元素，这意味着它没有内容，也没有封闭标签。它通常用于以多种格式提供相同的媒体内容，以提供不同浏览器的兼容性，因为浏览器对图像文件和媒体文件格式的支持不同。 |

SVG 和 MathML
------------

你可以使用 `<svg>` 或 `<math>` 将 SVG 或 MathML 内容直接嵌入 HTML 文档。

| 元素 | 描述 |
| --- | --- |
| `<svg>` | 定义新坐标系和视口的容器。它被用作 SVG 文档的最外层元素，但也可用于在 SVG 或 HTML 文档中嵌入 SVG 片段。 |
| `<math>` | 顶级的 MathML 元素。每一个有效的 MathML 实例都必须封装在其中。此外，不能在另一个此类元素中嵌套第二个 `<math>` 元素，但可以在其中包含任意个其他的子元素。 |

脚本
--

为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。有一些特定的元素用于支持此功能。

| 元素 | 描述 |
| --- | --- |
| `<canvas>` | 用来通过 canvas scripting API 或 WebGL API 绘制图形及图形动画的容器元素。 |
| `<noscript>` | 定义脚本未被执行时（页面的脚本类型不受支持，或当前浏览器关闭了脚本）的替代内容。 |
| `<script>` | 用于嵌入可执行脚本或数据。这通常用作嵌入或者引用 JavaScript 代码。`<script>` 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。 |

编辑标识
----

这些元素能标示出某个文本被更改过的部分。

| 元素 | 描述 |
| --- | --- |
| `<del>` | 表示一些被从文档中删除的文本内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。`<ins>` 标签的作用恰恰与此相反：表示文档中添加的文本。 |
| `<ins>` | 表示一些添加到文档中的文本内容。你可以使用 `<del>` 元素来类似地表示已从文档中删除的文本。 |

表格内容
----

这里的元素用于创建和处理表格数据。

| 元素 | 描述 |
| --- | --- |
| `<caption>` | 指定表格的标题。 |
| `<col>` | 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于 `<colgroup>` 元素内。 |
| `<colgroup>` | 定义表中的一组列表。 |
| `<table>` | 表示表格数据——即通过二维（由行和列组成）数据表表示的信息。 |
| `<tbody>` | 封装了一系列表格的行（`<tr>` 元素），代表了它们是表格（`<table>`）主要内容的组成部分。 |
| `<td>` (en-US) | 定义了一个包含数据的表格单元格。它是*表格模型*（table model）的一部分。 |
| `<tfoot>` | 定义了一组表格中各列的汇总行。 |
| `<th>` | 定义表格内的表头单元格。这部分特征是由 `scope` 和 `headers` 属性准确定义的。 |
| `<thead>` | 定义了一组定义表格的列头的行。 |
| `<tr>` | 定义表格中的行。同一行可同时出现 `<td>` (en-US)（数据单元格）和 `<th>`（列头单元格）元素。 |

表单
--

HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。详情请参阅 HTML 表单指南。

| 元素 | 描述 |
| --- | --- |
| `<button>` | 一个可交互元素（可通过用户的鼠标、键盘、手指、声音指令或其他辅助技术激活）。一旦被激活，它就会执行一个动作，例如提交表单或打开对话框。 |
| `<datalist>` | 包含了一组 `<option>` 元素，这些元素表示其它表单控件可选值。 |
| `<fieldset>` | 用于对 web 表单中的控件和标签（`<label>`）进行分组。 |
| `<form>` | 表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。 |
| `<input>` | 用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理的不同，表单可以使用各种类型的输入数据和控件。`<input>` 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。 |
| `<label>` | 表示用户界面中某个元素的说明。 |
| `<legend>` | 用于表示其父元素 `<fieldset>` 的内容标题。 |
| `<meter>` | 用来显示已知范围的标量值或者分数值。 |
| `<optgroup>` | 为 `<select>` 元素中的选项创建分组。 |
| `<option>` | 用于定义在 select、`<optgroup>` 或 `<datalist>` 元素中包含的选项。`<option>` 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。 |
| `<output>` | 网站或应用程序可以将计算或用户操作的结果注入其中的容器元素。 |
| `<progress>` | 用来显示一项任务的完成进度，通常情况下该元素显示为一个进度条。 |
| `<select>` | 表示一个提供选项菜单的控件。 |
| `<textarea>` | 表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。 |

交互元素
----

HTML 提供了一系列有助于创建交互式用户界面对象的元素。

| 元素 | 描述 |
| --- | --- |
| `<details>` | 创建一个挂件，仅在被切换成“展开”状态时，它才会显示内含的信息。必须使用 `<summary>` 元素为该部件提供概要或者标签。 |
| `<dialog>` | 表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。 |
| `<summary>` | 用作 details 元素内容的摘要、标题或图例。点击 `<summary>` 元素会翻转父元素 `<details>` 的展开和关闭状态。 |

Web 组件
------

Web 组件是一种与 HTML 相关联的技术，简单来说，它允许开发者创建自定义元素，并如同普通的 HTML 一样使用它们。另外，也可以创建经过自定义的标准 HTML 元素。

| 元素 | 描述 |
| --- | --- |
| `<slot>` | 作为 Web 组件技术套件的一部分，该元素是 web 组建内的占位符，你可以使用你自己的标记填充它，从而让你创建单独的 DOM 树并一起呈现它们。 |
| `<template>` | 一种保存 HTML 的机制，它不会在加载页面时立即渲染，但随后可以在运行时使用 JavaScript 实例化。 |

过时的和弃用的元素
---------

**警告：** 下面这些旧的 HTML 元素已被弃用，且不应再被使用。**千万不要在新的项目中使用它们，并且要尽快替换旧项目中的残余**。在此列出，仅供参考。

| 元素 | 描述 |
| --- | --- |
| `<acronym>` | 允许作者明确地声明一个字符序列，它们构成一个单词的首字母缩写或简略语。 |
| `<bgsound>` | 设置一个音频文件，以在使用页面时在后台播放；请使用 `<audio>` 代替。 |
| `<big>` | 以比周围文本大一号的字体渲染其封闭的文本（例如，`medium` 变 `large`）。最大不超过浏览器允许的最大字体。 |
| `<center>` | 以水平居中的形式显示包含在元素中的块级或内联内容。 |
| `<content>` | Web 组件技术套件的废弃部分——用于 Shadow DOM 内部作为插入点，并且不可用于任何正常的 HTML。现在已被 `<slot>` 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。 |
| `<dir>` | 被作为一个文件和/或文件夹的目录的容器，可能还有用户代理应用的样式与图标。请不要使用此过时的元素；请使用用于列表的 `<ul>` 元素代替，包含文件列表。 |
| `<font>` | 定义内容的字体大小、颜色与外观。 |
| `<frame>` | 定义一个特定区域，另一个 HTML 文档可以在里面展示。frame 应该在 `<frameset>` 中使用。 |
| `<frameset>` | 用于包含 `<frame>` 元素。 |
| `<image>` | `<img>` 元素古老而又缺乏支持的前身。它不应被使用。 |
| `<marquee>` | 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。 |
| `<menuitem>` | 表示一个用户可以通过弹出式菜单来执行的命令。这包括上下文菜单，以及按钮可能附带的菜单。 |
| `<nobr>` | 阻止文本自动拆分成新行，可能导致用户必须水平滚动才能看到文本的所有内容。 |
| `<noembed>` | 是个废除的和不标准的方式，用于向不支持 `<embed>` 或不支持作者希望的嵌入内容的浏览器提供替代（回退）内容。这个元素在 HTML 4.01 起废除，后备内容应该插在 `<object>` 的开始和结束标签之间。 |
| `<noframes>` | 在不支持（或禁用支持）`<frame>` 元素的浏览器中提供要显示的内容。虽然大多数常用浏览器都支持 frame，但也有例外，包括一些特殊用途的浏览器（移动终端的浏览器和文本模式浏览器）。 |
| `<param>` | 为 `<object>` 元素定义参数。 |
| `<plaintext>` | 将起始标签后面的任何东西渲染为纯文本，忽略随后的任何 HTML 内容。它没有闭合标签，因为任何后面的东西都会看做纯文本。 |
| `<rb>` | 用于分隔 ruby 注解的基本文本组件（即正在注解的文本）。一个 `<rb>` 元素应该包装基本文本的每个单独的原子段。 |
| `<rtc>` | 包含文字的语义注解，用于在 `<rb>` 元素中展示。`<rb>` 元素可以拥有发音（`<rt>`）和语义（`<rtc>`）注解。 |
| `<shadow>` | Web 组件技术套件的废弃部分——目的是用作 Shadow DOM 插入点。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。 |
| `<strike>` | 在文本上放置水平的删除线。 |
| `<tt>` | 创建内联文本，使用用户代理默认的等宽字体渲染。这个元素用于给文本排版，使其等宽展示，就像电报、纯文本屏幕或行式打印机那样。 |
| `<xmp>` | 渲染在开始和结束标签之间的文本，而不解释中间的 HTML 内容，并使用等宽字体。HTML2 规范建议它应该渲染得足够宽以允许每行 80 个字符。 |


viewport meta 标记 - HTML（超文本标记语言）

viewport meta 标记
================

本文介绍如何使用 "viewport" `<meta>` 标记来控制视口的大小和形状。

背景
--

浏览器的视口是一个在其中查看 Web 内容的窗口区域。这通常与渲染的页面大小不同，在这种情况下，浏览器为用户提供滚动条以滚动和访问所有内容。

在移动设备和其他窄屏设备中，某些内容在比普通屏幕更宽的虚拟窗口或视口中渲染页面，然后缩小渲染的结果，以便可以一次看到所有内容。然后，用户可以通过平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为 640px，则页面可能会使用 980px 的虚拟视口渲染，然后页面将缩小以适应 640px 的空间。

这是因为并非所有页面都针对移动设备进行了优化，并且在以较小的视口宽度渲染时会被截断（或至少看起来很糟糕）。虚拟视口则是一种使非移动设备优化页面在窄屏设备上看起来更好的一个方法。

但是，此机制不太适用于使用媒体查询针对窄屏幕进行优化的页面。例如，如果虚拟视口为 980px，那么在 640px 或 480px 或更低时启动的媒体查询将不会被使用，从而限制了这些响应式设计方法的有效性。viewport meta 标签可缓解此类屏幕内部较窄的终端上的虚拟视口问题。

视口基础知识
------

典型的针对移动页面优化一般如下所示：

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

并非所有的设备都有着相同的宽度，你应该确保即使屏幕大小或方向有很大差异，页面也能够正常工作。

"viewport" `<meta>` 标签的基本属性如下所示：

`width`

控制视口的大小。这可以设置为特定像素数（如'width=600'），也可以设置为特殊值`device-width`，即 100vw，100% 的视口宽度。最小值为 `1`。最大值为 `10000`。负值会被忽略。

`height`

控制视口的大小。这可以设置为特定像素数（如 `width=600`），也可以设置为特殊值 `device-height`，即 100vh，100% 的视口高度。最小值为 `1`。最大值为 `10000`。负值会被忽略。

`initial-scale`

控制页面首次加载时显示的缩放倍数。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

`minimum-scale`

控制页面允许缩小的倍数。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

`maximum-scale`

控制页面允许放大的倍数。设置一个低于 `3` 的值将不具备无障碍访问性。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

`user-scalable`

控制是否允许页面上的放大和缩小操作。有效值为 `0`、`1`、`yes` 或 `no`。默认值为 `1`，与 `yes` 相同。将值设置为 `0`（即与 `no` 相同）将违反 Web 内容无障碍指南（WCAG）。

`interactive-widget`

指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：`resizes-visual`、`resizes-content` 或 `overlays-content`。默认值：`resizes-visual`。

**警告：** 使用 `user-scalable=no` 会给有视觉障碍的用户造成无障碍问题，如弱视力。WCAG (en-US) 要求至少有 2 倍的缩放；然而，最佳做法是启用 5 倍的缩放。

屏幕密度
----

屏幕分辨率已经上升到人眼无法辨别单个像素的程度了。例如，智能手机的屏幕通常很小，但分辨率却高达 1920-1080 像素（≈400dpi）。正因为如此，许多浏览器可以通过为每个 CSS“像素”转换多个硬件像素，以较小的物理尺寸显示其页面。最初，这在许多触摸优化的网站上造成了可用性和可读性问题。

在高 dpi 屏幕上，初始情况为 `initial-scale=1` 的页面将被浏览器有效放大。它们的文本将是平滑和清晰的，但它们的位图图像可能无法利用全屏幕分辨率。为了在这些屏幕上获得更清晰的图像，网站开发人员可能希望以高于其最终尺寸的比例设计图像——或整个布局，然后使用 CSS 或视口属性将其缩小。

默认的像素比取决于显示器的密度。在密度小于 200dpi 的显示器上，比率是 1.0。在密度介于 200 和 300dpi 之间的显示器上，比率是 1.5。对于密度超过 300dpi 的显示器，比率是整数底线（*屏幕密度*/150dpi）。注意，只有当视口比例等于 1 时，默认比例才是真的。否则，CSS 像素和设备像素之间的关系取决于当前的缩放级别。

视口宽度和屏幕宽度
---------

页面可以将其视口设置为特定尺寸。例如，`"width=320, initial-scale=1"` 的定义可以用来精确地适应纵向模式下的小型手机显示屏。当浏览器以较大的尺寸渲染页面时，这可能导致问题。为了解决这个问题，如果有必要，浏览器会扩大视口宽度，以便按要求的比例填充屏幕。这在大屏幕设备上特别有用。

对于设置了初始或最大比例的页面，这意味着宽度属性实际上转化为最小视口宽度。例如，如果你的布局需要至少 500 像素的宽度，那么你可以使用以下标记。当屏幕的宽度超过 500 像素时，浏览器将扩大视口（而不是放大）以适应屏幕。

```html
<meta name="viewport" content="width=500, initial-scale=1" />
```

其他可用的属性有 `minimum-scale`、`maximum-scale` 和 `user-scalable`。这些属性会影响初始比例和宽度，以及限制缩放级别的变化。

交互式 UI 组件效果
-----------

浏览器的交互式 UI 组件可以影响页面视口的大小。最常见的这种 UI 组件是虚拟键盘。要控制浏览器应该使用哪种调整大小的行为，可以设置 `interactive-widget` 属性。

允许的值为：

`resizes-visual`

可视视口 (en-US)会被交互式组件调整大小。

`resizes-content`

视口会被交互式组件调整大小。

`overlays-content`

视口和可视视口 (en-US)都不会被交互式组件调整大小。

当视口的大小被调整时，初始布局和包含块的大小也会被调整，从而影响视口单位的计算所得的大小。

移动和平板电脑设备的常见视口大小
----------------

如果你想知道各类移动和平板设备都有哪些视口宽度，这里有一个全面的移动和平板视口尺寸列表。它提供的信息包括纵向和横向的视口宽度，以及物理屏幕尺寸、操作系统和设备的像素密度。

规范
--

| Specification |
| --- |
| CSS Viewport Module Level 1 # viewport-meta |

参见
--

* 文章：为 Android 版 Chrome 做好视口大小调整行为变更的准备


HTML 中使用的日期与时间格式 - HTML（超文本标记语言）

HTML 中使用的日期与时间格式
================

特定的 HTML 元素会使用日期和（或）时间值，指定这些值的字符串格式将在本篇文章中描述。

使用这些格式的元素包含一些令用户选择或指定日期、时间或日期和时间的 `<input>` 和 `<ins>`、`<del>` 元素，它们的 `datetime` 属性指定了插入或删除内容的日期或日期和时间。

对于 `<input>` 元素来说，能够返回包含代表日期或日期和时间的字符串 `value` 的 `type` 的值为：

* `date`
* `datetime-local`
* `month`
* `time`
* `week`
示例
--

在讨论日期和时间字符串如何在 HTML 中书写和解析的错综复杂的问题之前，这里有一些例子，应该可以让你很好地了解更常用的日期和时间字符串格式是什么样的。

示例 HTML 日期和时间字符串| 字符串 | 日期和（或）时间 |
| --- | --- |
| `2005-06-07` | 2005 年 6 月 7 日 | [详情] |
| `08:45` | 上午 8 时 45 分 | [详情] |
| `08:45:25` | 上午 8 时 45 分 25 秒 | [详情] |
| `0033-08-04T03:40` | 33 年 8 月 4 日，上午 3 时 40 分 | [详情] |
| `1977-04-01T14:00:30` | 1977 年 4 月 1 日，下午 2 时 00 分 30 秒 | [详情] |
| `1901-01-01T00:00Z` | 1901 年 1 月 1 日的半夜（UTC 时间） | [详情] |
| `1901-01-01T00:00:01-04:00` | 东部标准时间（EST）下 1901 年 1 月 1 日半夜经过 1 秒 | [详情] |

基本
--

在研究 HTML 元素所使用的与日期和时间有关的字符串的各种格式之前，了解关于它们的定义方式的一些基本事实是有帮助的。HTML 使用 ISO 8601 标准的一个变体，用于其日期和时间字符串。为了确保你的字符串实际上与 HTML 兼容，你值得查看你所使用的格式描述，因为 HTML 规范包括解析这些字符串的算法，实际上比 ISO 8601 更精确，所以在日期和时间字符串的预期外观上可能存在微妙的差异。

### 字符集

HTML 中的日期和时间总会使用 ASCII 字符集中的字符串。

### 年份数字

为了简化 HTML 中日期字符串的基本格式，规范要求所有年份都使用现代的公历表示法，虽然用户界面可能允许输入使用其他日历的日期，但基础值总是使用公历。

虽然公历直到 1582 年才创建（取代了类似的儒略历），但出于 HTML 的考虑，公历被延伸到了公元 1 年。确保任何较早的日期都考虑到了这一点。

就 HTML 日期而言，年份总是至少为四位数长度；1000 年之前的年份用前导零（“`0`”）填充，所以公元 72 年会记作 `0072`。这种写法不支持公元 1 年之前的年份，所以 HTML 不支持公元前 1 年（1 B.C.）或更早的年份。

除了**闰年**以外，一年通常是 365 天。

#### 闰年

**闰年**是指任何可以被 400 整除的年份*或者*是可以被 4 整除但不能被 100 整除的年份。尽管在日历上，每年通常为 365 天，但实际上地球完成绕太阳的一圈需要大约 365.2422 天。闰年有助于调整日历，使其与地球在其轨道上的实际位置保持同步。每四年增加一天，基本上使平均年长为 365.25 天，相当接近事实。

对算法的调整（当一年可以被 400 整除时，采取闰年；当一年可以被 100 整除时，跳过闰年）有助于使平均值更接近正确的天数（365.2425 天）。科学家们偶尔会认真地在日历上增加闰秒，以处理剩余的万分之三的天数，并补偿地球自转的逐渐自然减慢的情况。

每年的第二个月份，二月，一般含有 28 天，但会在闰年为 29 天。

### 一年中的第几月

一年中含有 12 个月，从 1 计数至 12。它们总是由一个两位数的 ASCII 字符串表示，其数值范围从 `01` 到 `12`。请参阅一月中的第几天一节中的表格，了解月份编号和它们相应的名称（以及天数长度）。

### 一月中的第几天

1、3、5、7、8、10 和 12 月份都有 31 天，4、6、9 和 11 月份都有 30 天，而 2 月份在大部分时间总会有 28 天，但在闰年中会有 29 天。详情如下表所示。

一年中的月份及每个月的长度| 月份编号 | 中文名称 | 每月所含天数 |
| --- | --- | --- |
| 01 | 一月 | 31 |
| 02 | 二月 | 28（闰年时为 29） |
| 03 | 三月 | 31 |
| 04 | 四月 | 30 |
| 05 | 五月 | 31 |
| 06 | 六月 | 30 |
| 07 | 七月 | 31 |
| 08 | 八月 | 31 |
| 09 | 九月 | 30 |
| 10 | 十月 | 31 |
| 11 | 十一月 | 30 |
| 12 | 十二月 | 31 |

星期字符串
-----

一个星期字符串指定一个特定年份中的特定星期。一个**有效的星期字符串**由一个有效的年份数字组成，后面是一个连字符（“`-`”，或 U+002D），然后是大写字母“`W`”（U+0057），再后面是该年的两位数的星期值。

一年中的周是一个介于 `01` 和 `53` 之间的两位数字符串。每一周从周一开始，周日结束。这意味着 1 月的前几天有可能被认为是上一周年的一部分，12 月的最后几天有可能被认为是下一周年的一部分。一年的第一周是指包含该年*第一个星期四的那一周*。例如，1953 年的第一个星期四是在 1 月 1 日，所以那一周——从 12 月 29 日星期一开始——被认为是一年的第一周。因此，1952 年 12 月 30 日发生在 `1953-W01` 周。

在这种情况下，一年含有 53 周：

* 日历年的第一天（1 月 1 日）是星期四**或**
* 日历年的第一天（1 月 1 日）是星期三，且该年为闰年

所有其他年份含有 52 周。

| 星期字符串 | 年份和星期数（日期区间） |
| --- | --- |
| `2001-W37` | 2001 年的第 37 周（2001 年 9 月 10-16 日） |
| `1953-W01` | 1953 年的第 1 周（1952 年 12 月 29 日 - 1953 年 1 月 4 日） |
| `1948-W53` | 1948 年的第 53 周（1948 年 12 月 27 日 - 1949 年 1 月 2 日） |
| `1949-W01` | 1949 年的第 1 周（1949 年 1 月 3 - 9 日） |
| `0531-W16` | 531 年的第 16 周（531 年 4 月 13 - 19 日） |
| `0042-W04` | 42 年的第 4 周（42 年 1 月 21 - 27 日） |

注意，年份和星期数都由前导零补齐长度，年份补齐至四位数，而星期数补齐至两位数。

月份字符串
-----

一个月份字符串代表特定的月份时间，而不是一年中的普通月份。也就是说，HTML 月份字符串不是代表“一月”，而是代表月份和年份的配对，比如“1972 年 1 月”。

一个 **有效的月份字符串** 由一个有效的年份数字（至少四位数的字符串）组成，后面是一个连字符（“`-`”，或 U+002D），再后面是一个两位数的月份数字，其中 `01` 代表一月，`12` 代表十二月。

| 月份字符串 | 年份和月 |
| --- | --- |
| `17310-09` | 17310 年 9 月 |
| `2019-01` | 2019 年 1 月 |
| `1993-11` | 1993 年 11 月 |
| `0571-04` | 571 年 4 月 |
| `0001-07` | 1 年 7 月 |

注意，每个年份至少为四位长度，少于四位的年份需要由前导零补齐位数。

日期字符串
-----

一个有效的日期字符串包含月份字符串，后面是一个连字符（“`-`”，或 U+002D），再后面是一个两位数的天数数字。

| 日期字符串 | 日期表示 |
| --- | --- |
| `1993-11-01` | 1993 年 11 月 1 日 |
| `1066-10-14` | 1066 年 10 月 14 日 |
| `0571-04-22` | 571 年 4 月 22 日 |
| `0062-02-05` | 62 年 2 月 5 日 |

时间字符串
-----

一个时间字符串可以指定一个精确到分、秒或毫秒的时间。不允许只指定小时或分钟。一个 **有效的时间字符串** 最少由一个两位数的小时和一个冒号（“`:`”，U+003A）组成，然后是一个两位数的分钟。分钟后面可以选择另一个冒号和一个两位数的秒数。可选的毫秒可以通过添加一个小数点字符（“`.`”，U+002E）和一个、两个或三个数字来指定。

这里有一些额外的基本规则：

* 小时总是 24 小时制，这意味着 `00` 代表半夜，11 PM 则为 `23`。不允许 `00`–`23` 范围以外的值出现。
* 分钟必须是 `00` 到 `59` 之间的两位数，不允许范围以外的值出现。
* 如果省略了秒数（即只指定精确到分钟的时间），则无需在分钟数后面跟随冒号。
* 如果指定了秒数，则其整数部分必须在 `00` 到 `59` 之间。你*不能*通过 `60` 或 `61` 这样的值来指定闰秒。
* 如果指定的秒数为整数，则不可在其后方跟随小数点。
* 如果秒数包含了小数，它可以是代表毫秒数的 1 至 3 位数，且跟随在时间字符串的秒成分之后的小数点后面。

| 时间字符串 | 时间 |
| --- | --- |
| `00:00:30.75` | 上午 12:00:30.75（午夜后 30.75 秒） |
| `12:15` | 下午 12:15 |
| `13:44:25` | 下午 1:44:25（下午 1:44 后 25 秒） |

本地日期时间字符串
---------

一个有效的 `datetime-local` 字符串由一个 `date` 字符串和一个 `time` 字符串连接起来，中间用字母“`T`”或空格分开。字符串中不包含时区的信息；日期和时间被认为是用户的本地时区。

当你设置 `datetime-local` 输入的 `value` 时，该字符串被**规范化**为标准形式。标准化的 `datetime` 字符串总是使用字母“`T`”来分隔日期和时间，并且字符串的时间部分尽可能地短。如果秒的值是 `:00`，则不使用秒的成分。

 有效的
 `datetime-local`
 字符串示例
 | 日期/时间字符串 | 标准化日期/时间字符串 | 实际日期和时间 |
| --- | --- | --- |
| `1986-01-28T11:38:00.01` | `1986-01-28T11:38:00.01` | 1986 年 1 月 28 日，上午 11:38:00.01 |
| `1986-01-28 11:38:00.010` | `1986-01-28T11:38:00.01`
注意，经过标准化后，该字符串与前一个 `datetime-local` 字符串相同。空格被“`T`”字符替换，秒数部分小数的尾随零被移除，令字符串更短。 | 1986 年 1 月 28 日，上午 11:38:00.01 |
| `0170-07-31T22:00:00` | `0170-07-31T22:00`
注意，该日期经过标准化后，去除了代表了秒数为零的“`:00`”，因为当秒数为零时，它是可选的，且标准化字符串要使得字符串尽可能更短。 | 170 年 7 月 31 日，下午 10:00 |

全局日期时间字符串
---------

全局日期和时间字符串指定了日期和时间，以及它所处的时区。一个**有效的全局日期和时间字符串**与本地日期时间字符串的格式相同，只是在时间后面附加了一个时区字符串。

### 时区偏移字符串

时区偏移字符串指定了与标准基准时间的正数或负数小时和分钟的偏移。有两种标准基准时间，它们非常接近于相同，但不完全相同：

* 对于 1960 年代初建立协调世界时（UTC）后的日期，时基是 `Z`，偏移量表示特定时区与经度 0º 的通过英国格林威治的皇家天文台的本初子午线的时间偏移量。
* 对于 UTC 之前的日期，时基是以 UT1 表示的，这是当代地球太阳时在本初子午线的时间。

时区字符串紧随日期和时间字符串中的时间之后。你可以指定“`Z`”作为时区偏移字符串，以表明时间是以 UTC 为单位的。否则，时区字符串的构造如下：

1. 表示偏移量的符号：加号（“`+`”，或 U+002B）表示本初子午线以东的时区，减号（“`-`”，或 U+002D）表示本初子午线以西的时区。
2. 该时区与本初子午线偏离的两位数小时数。这个值必须在 `00` 和 `23` 之间。
3. 可选的冒号字符（“`:`”）。
4. 偏离前述小时数的两位数分钟数；这个值必须在 `00` 和 `59` 之间。

虽然这种格式允许 -23:59 和 +23:59 之间的时区，但目前的时区偏移范围是 -12:00 到 +14:00，目前没有任何时区与小时的偏移是以 `00`、`30` 或 `45` 分钟以外的方式进行。这可能在任何时候都会发生变化，因为各国可以在任何时候以任何方式自由地改变其时区。

合法的全局日期时间字符串| 全局日期时间字符串 | 实际全局日期时间 | 本初子午线的日期和时间 |
| --- | --- | --- |
| `2005-06-07T00:00Z` | UTC 时间，2005 年 6 月 7 日半夜 | 2005 年 6 月 7 日半夜 |
| `1789-08-22T12:30:00.1-04:00` | 1789 年 8 月 22 日下午 12:30 经过十分之一秒，东部夏令时（EDT） | 1789 年 8 月 22 日下午 4:30 经过十分之一秒 |
| `3755-01-01 00:00+10:00` | 3755 年 1 月 1 日半夜，澳大利亚东部标准时间（AEST） | 3754 年 12 月 31 日下午 2:00 |

参见
--

* `<input>`
* `<ins>` 和 `<del>`：请查阅 `datetime` 属性，它指定了插入或删除内容的日期或本地日期和时间
* ISO 8601 定义
* JavaScript 指南中的数字和日期
* JavaScript `Date` 对象
* 以给定区域选项格式化日期和时间的 `Intl.DateTimeFormat` 对象


HTML 属性：disabled - HTML（超文本标记语言）

HTML 属性：disabled
================

当布尔属性 **`disabled`** 存在时，元素将不可变、不能聚焦或与表单一同提交。用户将不能在表单控件本身或其子控件进行编辑或聚焦操作。

尝试一下
----

总览
--

如果在表单控件上指定了 `disabled` 属性，则该元素及其子控件不参与约束验证。通常浏览器会将它们打灰处理，它不会收到任何浏览事件，如鼠标点击或与焦点相关的事件。

这些元素支持 `disabled` 属性：`<button>`、`<fieldset>`、`<optgroup>`、`<option>`、`<select>`、`<textarea>` 和 `<input>`。

这个布尔型 disabled 属性表示用户不能与该控件或其后代控件进行交互。如果没有指定这个属性，控件会从包含元素中继承其设置，例如 `fieldset`；如果没有设置 `disabled` 属性的包含元素，并且控件本身没有这个属性，那么该控件是启用的。如果在 `<optgroup>` 上声明，选择仍然是交互式的（除非另行禁用），但选项组中的项目都不能选择。

**备注：** 如果 `<fieldset>` 被禁用，那么除了 `<legend>` 内的表单控件外，其下级表单控件都被禁用。

当一个支持的元素应用了 `disabled` 属性，`:disabled` 伪类也适用于它。反之，支持 `disabled` 属性但没有设置该属性的元素与 `:enabled` 伪类匹配。

这个布尔属性可以防止用户与按钮进行交互。如果没有设置这个属性，按钮仍然可以从一个包含元素中被禁用，例如 `<fieldset>`；如果没有设置 `disabled` 属性的包含元素，那么按钮就是启用的。

与其他浏览器不同的是，Firefox 会在不同的页面加载中持续保持 `<button>` 的动态禁用状态。使用 `autocomplete` 属性来控制这个特性。

### 属性交互

`disabled` 和 `readonly` 之间的区别是，只读控件仍然可以发挥作用，仍然可以聚焦，而禁用控件不能接受聚焦，也不随表单提交，通常在启用之前不能作为控件发挥作用。

因为不能改变一个禁用字段的值，所以 `required` (en-US) 对同时指定 `disabled` 属性的输入没有任何影响。此外，由于元素变得不可改变，大多数其他属性，如 `pattern`，在控件被启用之前没有任何作用。

**备注：** `required` 属性不可在含有 `disabled` 属性的 input 元素上使用。

### 可用性

浏览器将禁用的表单控件显示为灰色，因为禁用的表单控件是不可改变的，不会收到焦点或任何浏览事件，如鼠标点击或与焦点相关的事件，也不会随表单提交。

如果所支持的元素上存在该属性，将匹配 `:disabled` 伪类。如果该属性未被包含，则将匹配 `:enabled` 伪类。如果该元素不支持 disabled 属性，该属性将没有任何作用，包括不会导致被 `:disabled` 和 `:enabled` 伪类匹配。

### 约束验证

如果该元素含有 `disabled` 属性，那么该元素的值就不能聚焦，不能被用户更新，也不参与约束验证。

示例
--

当表单控件被禁用时，许多浏览器会默认以较浅的灰色显示它们。下面是禁用复选框、单选按钮、`<option>` 和 `<optgroup>` 的例子，以及一些通过在祖先 `<fieldset>` 元素上设置的禁用属性禁用的表单控件。`<option>` 是禁用的，但 `<select>` 本身却没有。我们可以通过为该元素而不是其子元素添加属性来禁用整个 `<select>`。

```html
<fieldset>
  <legend>复选框</legend>
  <p>
    <label> <input type="checkbox" name="chbox" value="regular" /> 普通 </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="disabled" disabled /> 禁用
    </label>
  </p>
</fieldset>

<fieldset>
  <legend>单选按钮</legend>
  <p>
    <label> <input type="radio" name="radio" value="regular" /> 普通 </label>
  </p>
  <p>
    <label>
      <input type="radio" name="radio" value="disabled" disabled /> 禁用
    </label>
  </p>
</fieldset>

<p>
  <label
 >选择一个选项：
    <select>
      <optgroup label="第一组">
        <option>选项 1.1</option>
      </optgroup>
      <optgroup label="第二组">
        <option>选项 2.1</option>
        <option disabled>选项 2.2</option>
        <option>选项 2.3</option>
      </optgroup>
      <optgroup label="第三组" disabled>
        <option>禁用的 3.1</option>
        <option>禁用的 3.2</option>
        <option>禁用的 3.3</option>
      </optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>禁用的 fieldset</legend>
  <p>
    <label> 名字：<input type="name" name="radio" value="普通" /> </label>
  </p>
  <p>
    <label>数字：<input type="number" /></label>
  </p>
</fieldset>
```

规范
--

| Specification |
| --- |
| HTML Standard # attr-fe-disabled |
| HTML Standard # attr-optgroup-disabled |
| HTML Standard # attr-option-disabled |

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

### html.elements.button.disabled

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

### html.elements.fieldset.disabled

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

### html.elements.input.disabled

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

### html.elements.optgroup.disabled

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

### html.elements.option.disabled

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

### html.elements.select.disabled

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

### html.elements.textarea.disabled

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

参见
--

* `:disabled` 和 `:enabled`


HTML 属性：autocomplete - HTML（超文本标记语言）

HTML 属性：autocomplete
====================

HTML `autocomplete` 属性允许 web 开发人员指定用户代理是否有权限在填写表单字段值时提供自动帮助，并指导浏览器填写该字段的预期信息类型。

可用于以文本或数字作为输入的 `<input>` 元素、`<textarea>` 元素、`<select>` 元素和 `<form>` 元素。

建议值的来源通常取决于浏览器。通常，值来自用户曾经输入过的值，但它们也可能来自预先配置的值。例如，浏览器可能允许用户保存其姓名、地址、电话号码和电子邮件地址，以实现自动完成目的。也许浏览器提供了保存加密的信用卡信息的功能，以便自动完成身份验证功能。

如果一个 `<input>`、`<select>` 或 `<textarea>` 元素没有 `autocomplete` 属性，则该浏览器将使用该元素的表单所有者的 `autocomplete` 属性，它们可以是元素的后代 `<form>` 元素，或由该元素的 `form` 属性指定的 `<form>` 元素的 `id`。

更多信息，请参见 `<form>` 中的 `autocomplete` 属性。

**备注：** 为了提供自动完成功能，用户代理可能需要 `<input>`/`<select>`/`<textarea>` 元素具有如下条件：

1. 具有 `name` 和/或 `id` 属性
2. 作为 `<form>` 元素的后代
3. 具有 submit 按钮的表单

尝试一下
----

值
-

"`off`"

浏览器不允许为此字段自动输入或选择一个值。文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。

**备注：** 在大多数现代浏览器中，`autocomplete` 设置为“`off`”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。请参阅 autocomplete 属性与登录表单一文。

"`on`"

允许浏览器自动完成输入。没有提供有关该字段中期望的数据类型的指导，因此浏览器可以使用自己的判断。

"`name`"

该字段期望该值是一个人的全名。通常首选使用“`name`”而不是将名称分解为各个组成部分，因为这样可以避免处理各种各样的人类名称及其结构。但是，如果需要将名称分解为各个组成部分，则可以使用以下 `autocomplete` 值：

"`honorific-prefix`"

前缀或头衔，例如“Mrs.”、“Mr.”、“Miss”、“Ms.”、“Dr.”或“Mlle.”。

"`given-name`"

名字。

"`additional-name`"

中间名。

"`family-name`"

姓氏。

"`honorific-suffix`"

后缀，例如“Jr.”、“B.Sc.”、“PhD.”、“MBASW”或“IV”。

"`nickname`"

昵称或绰号。

"`email`"

电子邮件地址。

"`username`"

用户名或账户名。

"`new-password`"

新密码。创建新账户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是通常出现的“输入当前密码”字段。浏览器可以使用它来避免意外填写现有密码，并在创建安全密码时提供帮助（参见使用 autocomplete="new-password" 阻止自动填充）。

"`current-password`"

用户的当前密码。

"`one-time-code`"

用于验证用户身份的一次性代码。

"`organization-title`"

职务或组织内某人的职务，例如“高级技术作家”、“总裁”或“助理部队负责人”。

"`organization`"

公司或组织名称，例如“Acme Widget Company”或“American Girl Scouts of America”。

"`street-address`"

街道地址。它可以是多行文本，应在第二个行政级别（通常是城市或城镇）内完全标识地址的位置，但不应包括城市名称，邮政编码或邮政编码或国家/地区名称。

"`address-line1`", "`address-line2`", `"address-line3"`

街道地址的每一行。仅在“`street-address`”不存在的情况下，才应提供这些内容。

"`address-level4`"

在具有四个行政级别的地址中，粒度最细的地址的行政级别。

"`address-level3`"

在具有至少三个行政级别的地址中，第三个地址的行政级别。

"`address-level2`"

在具有至少有两个行政级别的地址中，第二个地址的行政级别。在具有两个行政级别的国家/地区中，通常是地址所在的城市，城镇，村庄或其他地区。

"`address-level1`"

地址中的第一个地址的行政级别，通常是地址所在的省份。在美国，是州。在瑞士，是州。在英国，是邮镇。

"`country`"

一个国家或地区的代码。

"`country-name`"

一个国家或地区的名字。

"`postal-code`"

邮政编码（在美国，是 ZIP 编码）。

"`cc-name`"

打印在付款工具（例如信用卡）上或与之关联的全名。通常，使用全名字段比将名称分成多个部分更可取。

"`cc-given-name`"

在信用卡等支付工具上的名字。

"`cc-additional-name`"

信用卡等支付工具上的中间名。

"`cc-family-name`"

信用卡上的姓氏。

"`cc-number`"

信用卡号码或其他标识付款方式的号码，例如账号。

"`cc-exp`"

付款方式的到期日期，通常为“月份 / 两位年份”或“月份 / 四位年份”形式。

"`cc-exp-month`"

付款方式到期的月份。

"`cc-exp-year`"

付款方式到期的年份。

"`cc-csc`"

付款工具的安全码；在信用卡上，这是信用卡背面的 3 位数验证码。

"`cc-type`"

付款方式的类型（例如“Visa”或“Master Card”）。

"`transaction-currency`"

进行交易的货币。

"`transaction-amount`"

以“`transaction-currency`”指定的货币表示的金额，用于支付形式。

"`language`"

首选语言，由有效的 BCP 47 语言标记给出。

"`bday`"

完整的出生日期。

"`bday-day`"

出生日期的月份中的某天。

"`bday-month`"

出生日期的年份中的某月。

"`bday-year`"

出生日期的年份。

"`sex`"

性别身份（例如“女性”、“Fa'afafine”、“海吉拉”、“男性”、“非二元性别”），不带换行符的自由格式文本。

"`tel`"

完整的电话号码，包括国家/地区代码。如果需要将电话号码分为几个部分，则可以将以下值用于这些字段：

"`tel-country-code`"

国家/地区代码，例如美国、加拿大和北美其他地区以及加勒比海部分地区使用“1”。

"`tel-national`"

不含国家/地区代码部分的完整电话号码，包括国家/地区内部前缀。对于电话号码“1-855-555-6502”，该字段的值为“855-555-6502”。

"`tel-area-code`"

区号，如果适用，可应用任何国家或地区内部前缀。

"`tel-local`"

不带国家或地区代码的电话号码。这可以进一步分为两部分，分别是具有交换号码的电话号码，然后是交换局中的号码。对于电话号码“555-6502”，对于“555”使用“`tel-local-prefix`”，对于“6502”使用“`tel-local-suffix`”。

"`tel-extension`"

电话号码中的电话分机代码，例如旅馆中的房间或套房号或公司中的办公室分机号。

"`impp`"

即时消息协议端点的 URL，例如“xmpp：username@example.net”。

"`url`"

在给定表单中其他字段的上下文的情况下的主页或公司网站地址等情况下给定的 URL。

"`photo`"

代表表单中其他字段中提供的个人、公司或联系信息的图像的 URL。

有关更多详细信息，请参见 WHATWG 标准。

**备注：** 与其他浏览器不同，`autocomplete` 属性还控制 Firefox 是否在整个页面加载期间保持 `<input>` 元素、`<textarea>` 元素、或整个 `<form>` 元素的动态禁用状态和动态选择状态（如果适用）。持久性功能默认情况下处于启用状态。将 `autocomplete` 属性的值设置为 `off` 将禁用此特性。即使 `autocomplete` 属性通常由于其 `type` 而不适用，也可以这样做。参见 Firefox bug 654072。

示例
--

```html
<div>
  <label for="cc-number">输入你的信用卡编号</label>
  <input name="cc-number" id="cc-number" autocomplete="off" />
</div>
```

地址的行政级别
-------

四个行政级别字段（从 `address-level1` 到 `address-level4`）以提高地址所在国家内的精确度的方式描述地址。每个国家都有自己的行政级别系统，在写地址时可以按不同的顺序排列。

`address-level1` 始终代表最广泛的行政区划，它是地址中除国家名之外最不特定的部分。

### 表单布局的灵活性

鉴于不同国家的地址书写方式不同，每个字段在地址中的位置也不同，甚至字段的设置和数量也完全不同，如果在可能的情况下，你的网站能够根据地址所在的国家，在呈现地址输入表单时切换到用户所期望的布局，这将是很有帮助的。

### 变化

每个行政级别的使用方式因国家/地区而异。以下是一些示例；这并不是详尽的清单。

#### 美国

美国境内的典型家庭住址如下所示：

 432 Anywhere St
 Exampleville CA 95555

在美国，地址中最不明确的部分是州，在这种情况下为“CA”（美国邮政服务的正式缩写为“California”）。因此，`address-level1` 是州，在这种情况下为“CA”。

地址的倒数第二个特定部分是城市或城镇名称，因此在此示例地址中， `address-level2` 为“Exampleville”。

美国地址不使用 3 级及更高级别。

#### 英国

在英国，地址输入表单通常包含两个地址级别以及一个、两个或三个地址行，具体取决于地址。完整的地址如下所示：

 103 Frogmarch Street
 Upper-Wapping
 Winchelsea
 TN99 8ZZ

地址级别为：

* `address-level1`: 邮镇名——在这种情况下，为“Winchelsea”。
* `address-level2`: 地方——在这种情况下，为“Upper-Wapping”。
* `address-line1`: 房屋/街道详情——“103 Frogmarch Street”

邮政编码是分开的。请注意，实际上可以仅使用邮政编码和 `address-line1` 在英国成功发送邮件，因此它们应该是唯一的必填项，但通常人们会提供更多详细信息。

#### 中国

中国可以使用多达三个行政级别：省、市和区。

6 位数的邮政编码并不总是需要的，但在提供时，为了清楚起见，将其与标签分开放置。例如：

 北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元
 邮编：100005

#### 日本

日本的地址通常**书写在同一行**，从最不具体的部分到更具体的部分的顺序（**与美国的顺序相反**）。一个地址有两到三个行政级别。额外的一行可以用来显示建筑物名称和房间号。邮政编码是单独的。例如：

 〒 381-0000
 長野県長野市某町 123

“〒”和紧随的七位数字是邮政编码。

`address-level1` 用于各县或东京都，如本例的“長野県”。`address-level2` 通常用于市、县、镇和村，如本例的“長野市”。“某町 123”属于 `address-line1` 字段，其中包括区域名称和地段编号。

规范
--

| Specification |
| --- |
| HTML Standard # attr-fe-autocomplete |

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

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

参见
--

* `<input>` 元素。
* `<select>` 元素。
* `<textarea>` 元素。
* `<form>` 元素。
* HTML 表单
* 所有全局属性。


HTML 属性：pattern - HTML（超文本标记语言）

HTML 属性：pattern
===============

**`pattern`** 属性规定了一个表单控件的值应该匹配的正则表达式。如果一个非 `null` 值不满足 `pattern` 值设置的约束，`ValidityState` 对象的只读属性 `patternMismatch` (en-US) 将为 true。

尝试一下
----

概述
--

`pattern` 属性是 text、tel、email、url、password 和 search 等输入类型的属性。

当指定 `pattern` 属性时，它是一个正则表达式，代表输入的 `value` 必须与之匹配，以便该值能够通过约束验证。它必须是一个有效的 JavaScript 正则表达式，它会被 `RegExp` 类型所使用，正如我们的正则表达式指南中所述；在编译正则表达式时指定 `'u'` 标志，以便将该模式作为 Unicode 码点序列，而不是 ASCII。模式文本周围不应指定正斜杠。

如果没有指定模式或无效，则不应用正则表达式，此属性被忽略。

**备注：** 请使用 `title` 属性来指定大多数浏览器将作为工具提示显示的文本，以解释匹配该模式的要求是什么。**不能**仅仅依靠工具提示来进行解释。关于可用性的更多信息见下文。

一些支持 `pattern` 属性的输入类型，特别是 email 和 url，有必须匹配的预期值语法。如果 `pattern` 属性不存在，并且值不符合该值类型的预期语法， `ValidityState` 对象的只读 `typeMismatch` (en-US) 属性将为 true。

### 可用性

当包括一个 `pattern` 时，在控件附近的可见文本中提供对模式的描述。此外，包括一个 `title` 属性对该模式进行描述。用户代理可以在约束验证期间使用标题内容来告诉用户该模式不匹配。一些浏览器会显示标题内容的工具提示，以提高视力障碍者的可用性。此外，当控件获得焦点时，辅助技术可能会大声朗读标题，但无障碍技术不应依赖它。

### 约束验证

如果输入的值不是空字符串，并且该值与整个正则表达式不匹配，那么 `ValidityState` 对象的 `patternMismatch` (en-US) 属性为 `true`，就会出现违反约束条件的现象。模式的正则表达式在与值匹配时，其开始部分必须确定在字符串的开始部分，其结束部分必须确定在字符串的结束部分，这与 JavaScript 正则表达式略有不同：在模式属性的情况下，我们是与整个字符串匹配，而不仅仅是任何子集，如同在模式的开始部分隐含 `^(?:`，而在结束部分隐含 `)$`。

**备注：** 如果 `pattern` 属性被指定为空值，其值隐含为空字符串。因此，**任何非空的**输入 `value` 都会导致约束违反。

示例
--

### 匹配电话号码

考虑到以下情况：

```html
<p>
  <label>
    按 (123) - 456 - 7890 格式输入你的电话号码 (<input
 name="tel1"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3 位区号"
 size="2" />) -
    <input
 name="tel2"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3 位前缀"
 size="2" />
    -
    <input
 name="tel3"
 type="tel"
 pattern="[0-9]{4}"
 placeholder="####"
 aria-label="4 位号码"
 size="3" />
  </label>
</p>
```

在这里，我们有 3 个部分用于一个北美的电话号码，其隐含的标签包含了电话号码的所有三个组成部分，分别期望 3 位数、3 位数和 4 位数，这是由 `pattern` 属性设定的。

如果值太长或太短，或包含不是数字的字符，patternMismatch 将为 true。当为 `true` 时，该元素与 `:invalid` CSS 伪类匹配。

```css
input:invalid {
  border: red solid 3px;
}
```

如果我们用 `minlength` (en-US) 和 `maxlength` (en-US) 属性代替，我们可能会看到 `validityState.tooLong` (en-US) 或 `validityState.tooShort` (en-US) 为 true。

### 指定一种模式

你可以使用 `pattern` 属性来指定一个正则表达式，输入的值必须与之匹配，才能被视为有效（参见根据正则表达式进行验证了解关于使用正则表达式来验证输入的简单速成课程）。

下面的例子将值限制为 4-8 个字符，并要求它只包含小写字母。

```html
<form>
  <div>
    <label for="uname">选择一个用户名：</label>
    <input
 type="text"
 id="uname"
 name="name"
 required
 size="45"
 pattern="[a-z]{4,8}"
 title="4 到 8 个小写字母" />
    <span class="validity"></span>
    <p>用户名必须为小写字母，且长度为 4-8 个字符</p>
  </div>
  <div>
    <button>提交</button>
  </div>
</form>
```

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

p {
  font-size: 80%;
  color: #999;
}

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;
}
```

这将渲染为如下形式：

### 无障碍注意事项

当一个控件有一个 `pattern` 属性时，如果使用 `title` 属性，则必须用于描述该模式。依靠 `title` 属性来显示文本内容通常是不可取的，因为许多用户代理并不以无障碍的方式暴露该属性。一些浏览器在悬停带有标题的元素时显示工具提示，但这就排除了只用键盘和只用触摸屏的用户。这就是你必须包括告知用户如何填写控件以符合要求的几个原因之一。

虽然 `title` 被一些浏览器用来填充错误信息，但由于浏览器有时也会在悬停时将标题显示为文本，因此在非错误情况下也会显示，所以要注意不要将标题写成发生了错误的样子。

规范
--

| Specification |
| --- |
| HTML Standard # attr-input-pattern |

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

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

参见
--

* 约束验证
* 表单数据校验
* 正则表达式


HTML 属性：rel - HTML（超文本标记语言）

HTML 属性：rel
===========

**`rel`** 属性定义了所链接的资源与当前文档的关系，在 `<a>`、`<area>` 和 `<link>` 元素上有效。支持的值取决于拥有该属性的元素。

关系的类型是由 `rel` 属性的值给出的，如果存在的话，它的值必须是一组无序的、唯一的、用空格隔开的关键字。与不表达语义的 `class` 名称不同，`rel` 属性必须使用对机器和人类都有语义的标记。目前关于 `rel` 属性的可能值的注册表是 IANA 链接关系注册表、HTML 现行标准和 microformats wiki 中可自由编辑的 existing-rel-values 页面（根据现行标准的建议）。如果使用一个不存在于上述三个来源之一的 `rel` 属性，一些 HTML 验证器（如 W3C Markup Validation Service）会产生一个警告。

下表列出了一些最重要的现有关键词。在一个以空格分隔的值内的每个关键词在该值内都应该是唯一的。

| `rel` 值 | 描述 | `<link>` | `<a>` 和 `<area>` | `<form>` |
| --- | --- | --- | --- | --- |
| `alternate` | 当前文档的替代描述。 | 链接 | 链接 | 不允许 |
| `author` | 当前文档或文章的作者。 | 链接 | 链接 | 不允许 |
| `bookmark` | 到最近祖先章节的永久链接。 | 不允许 | 链接 | 不允许 |
| `canonical` | 当前文档的首要 URL。 | 链接 | 不允许 | 不允许 |
| `dns-prefetch` (en-US) | 告知浏览器为目标资源的来源预先执行 DNS 解析。 | 外部资源 | 不允许 | 不允许 |
| `external` | 引用的文档与当前的文档不属于同一个站点。 | 不允许 | 注解 | 注解 |
| `help` | 链接到上下文相关的帮助。 | 链接 | 链接 | 链接 |
| `icon` | 代表当前文档的图标。 | 外部资源 | 不允许 | 不允许 |
| `license` | 表示当前文档的主要内容由被引用文件描述的版权许可所涵盖。 | 链接 | 链接 | 链接 |
| `manifest` (en-US) | Web 应用清单 | 链接 | 不允许 | 不允许 |
| `me` (en-US) | 表示当前文档代表拥有链接内容的人。 | 链接 | 链接 | 不允许 |
| `modulepreload` (en-US) | 告知浏览器预先获取该脚本，并将其存储在文档的模块映射中，以便稍后评估。也可以一同获取该模块的依赖关系。 | 外部资源 | 不允许 | 不允许 |
| `next` | 表示当前文档是一个系列的一部分，被引用的文档是该系列中的下一个文档。 | 链接 | 链接 | 链接 |
| `nofollow` | 表示当前文档的原作者或出版商不认可被引用的文件。 | 不允许 | 注解 | 注解 |
| `noopener` (en-US) | 创建一个顶级浏览上下文。如果该超链接一开始就会创建其中之一，则该浏览上下文不是一个辅助浏览上下文（即有一个适当的 `target` 属性值）。 | 不允许 | 不允许 | 注解 |
| `noreferrer` | 不会包含 `Referer` 标头。和 `noopener` 效果类似。 | 不允许 | 注解 | 注解 |
| `opener` | 如果超链接会创建一个非辅助浏览上下文的顶级浏览上下文（即以“`_blank`”作为 `target` 属性值），则创建一个辅助浏览上下文。 | 不允许 | 注解 | 注解 |
| `pingback` | 给出处理当前文档 pingback 的 pingback 服务器的地址。 | 外部资源 | 不允许 | 不允许 |
| `preconnect` | 指定用户代理应预先连接到目标资源的来源。 | 外部资源 | 不允许 | 不允许 |
| `prefetch` | 指定用户代理应预先获取并缓存目标资源，因为后续的导航可能需要它。 | 外部资源 | 不允许 | 不允许 |
| `preload` | 指定用户代理必须根据 `as` 属性给出的潜在目的地（以及与相应目的地相关的优先级），为当前导航预先获取和缓存目标资源。 | 外部资源 | 不允许 | 不允许 |
| `prerender` (en-US) | 指定用户代理应预先获取目标资源，并以有助于在未来提供更快的响应的方式处理它。 | 外部资源 | 不允许 | 不允许 |
| `prev` | 表示当前文档是系列的一部分，被引用的文档是该系列中的上一个文档。 | 链接 | 链接 | 链接 |
| `search` | 给出一个资源的链接，可以用来搜索当前文件及其相关页面。 | 链接 | 链接 | 链接 |
| `stylesheet` | 导入样式表。 | 外部资源 | 不允许 | 不允许 |
| `tag` | 给出一个适用于当前文档的标签（由给定地址识别）。 | 不允许 | 链接 | 链接 |

`rel` 属性与 `<link>`、`<a>`、`<area>` 和 `<form>` 元素有关，但有些值只与这些元素的子集有关。像所有的 HTML 关键字属性值一样，这些值是不区分大小写的。

`rel` 属性没有默认值。如果该属性被省略，或者该属性中没有一个值被支持，那么除了两者之间有一个超链接之外，文档与目标资源没有特别的关系。在这种情况下，在 `<link>` 和 `<form>` 元素上，如果 `rel` 属性不存在，没有关键词，或者如果不是上述一个或多个空格分隔的关键词，那么该元素就不会创建任何链接。`<a>` 和 `<area>` 仍将创建链接，但没有定义关系。

值
-

`alternate`

表示当前文档的另一种方式。对 `<link>`、`<a>` 和 `<area>` 有效，其含义取决于其他属性的值。

* 在 `<link>` 上使用 `stylesheet` 关键字，会创建一个替代样式表。

```html
<!-- 一个永久样式表 -->
<link rel="stylesheet" href="default.css" />
<!-- 替代样式表 -->
<link
 rel="alternate stylesheet"
 href="highcontrast.css"
 title="High contrast" />
```

* `hreflang` 属性与文档所使用语言不同时，表示该页面的一个翻译。
* `type` 属性值为 `"application/rss+xml"` 或 `"application/atom+xml"` 会创建一个 syndication feed 的参照链接。

```html
<link
 rel="alternate"
 type="application/atom+xml"
 href="posts.xml"
 title="Blog" />
```

* 否则，它将创建一个超链接，引用当前文档的另一种表述，其性质由 `hreflang` 和 `type` 属性赋予。
    + 如果一起给出 `hreflang` 和 `alternate`，并且 `hreflang` 的值与当前文档的语言不同，则表明引用的文档是一个翻译。
    + 如果一起给出 `type` 和 `alternate`，它表示被引用的文件是一种替代格式（如 PDF）。
    + `hreflang` 和 `type` 属性可以与 `alternate` 一同给出。
```html
<link
 rel="alternate"
 href="/fr/html/print"
 hreflang="fr"
 type="text/html"
 media="print"
 title="French HTML (for printing)" />
<link
 rel="alternate"
 href="/fr/pdf"
 hreflang="fr"
 type="application/pdf"
 title="French PDF" />
```

`author`

表示被引用的文档提供了关于当前文档或文章作者的进一步信息。与 `<link>`、`<a>` 和 `<area>` 元素有关。

`<a>` 和 `<area>` 元素表示链接的文档（或 `mailto:`）提供了最近的祖先 `<article>` 元素的作者信息，如果无 article 元素就是整个文档的作者信息。

`<link>` 元素代表了整个文档的作者信息。

**备注：** 由于历史原因，废弃的属性值 `rev="made"` 被视为 `rel="author"`。

`bookmark`

与 `<a>` 和 `<area>` 元素的 `rel` 属性值相关。如果有的话，给最近的祖先 `<article>` 元素提供一个固定链接。如果没有祖先 `<article>` 元素，则给出链接元素与之联系最紧密的部分的固定链接。

`canonical`

对 `<link>` 元素有效，它定义了当前文档的首选 URL，这有助于搜索引擎减少重复内容。

`dns-prefetch`

在 `<body>` 和 `<head>` 元素内与 `<link>` 元素相关。它告诉浏览器为目标资源的来源预先执行 DNS 解析。对于用户可能需要的资源来说，它有助于减少延迟，从而提高用户访问资源时的性能，因为浏览器会预先对指定资源的来源进行 DNS 解析。参见资源提示中描述的 dns-prefetch。

`external`

与 `<form>`、`<a>` 和 `<area>` 元素相关，它表示引用的文档不是当前网站的一部分。这可以与属性选择器一起使用，使外部链接的样式向用户表明他们将离开当前网站。

`help`

与 `<form>`、`<link>`、`<a>` 和`<area>` 元素相关，`help` 关键字表示链接到的内容提供上下文敏感的帮助，为定义超链接的元素的父元素及其子元素提供信息。当在 `<link>` 中使用时，针对整个文档。当与 `<a>` 和 `<area>` 一起包含并支持这种使用方法时，默认的 `cursor` 将是 `help` 而不是 `pointer`。

`icon`

对 `<link>` 元素有效，链接的资源代表了当前文档的图标，这是一种在用户界面上代表页面资源的方法。

`icon` 值最常见的用途是网站图标：

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

如果有多个 `<link rel="icon">`，浏览器会使用它们的 `media`、`type` 和 `sizes` 属性来选择最合适的图标。如果几个图标同样合适，则使用最后一个。如果后来发现最合适的图标不合适，例如使用了不支持的格式，浏览器就会继续选择下一个最合适的，以此类推。

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

**备注：** 苹果的 iOS 系统不使用这种链接类型，也不像其他移动浏览器那样使用 `sizes` 属性，来选择网页夹或启动占位符的网页图标。相反，它分别使用非标准的 `apple-touch-icon` 和 `apple-touch-starttup-image`。

**备注：** `shortcut` 链接类型经常出现在 `icon` 之前，但这种链接类型是不符合规定的，该类型会被忽略，且**网站作者不得再使用它**。

`license`

在 `<a>`、`<area>`、`<form>`、 `<link>` 元素上有效，`license` 值表示该超链接指向描述许可信息的文件；当前文件的主要内容被引用文件描述的版权许可所覆盖。如果不在 `<head>` 元素内，标准并不区分适用于文档特定部分的超链接还是适用于整个文档的超链接。只有页面上的数据可以表明这一点。

```html
<link rel="license" href="#license" />
```

**备注：** 虽然同义词 `copyright` 也是可以识别的，但它是不正确的，必须避免使用。

`manifest`

代表 Web 应用清单。需要使用 CORS 协议进行跨源获取。

`modulepreload`

对于提高性能很有用，并且与文档中的 `<link>` 元素相关，设置 `rel="modulepreload"` 告诉浏览器预先获取脚本（和依赖关系）并存储在文档的模块映射中，以便以后评估。 `modulepreload` 链接可以确保网络抓取时，模块映射中的模块已经准备好（但没有评估），然后才一定需要它。参见 `modulepreload` (en-US)。

`next`

与 `<form>`、`<link>`、`<a>` 和 `<area>` 元素相关，`next` 值表示当前文档是一个系列的一部分，引用文档是该系列的下一个文档。当包含在 `<link>` 中时，浏览器可能会假定将要获取那个文档，并将其作为一个资源提示。

`nofollow`

与 `<form>`、`<a>` 和 `<area>` 元素相关， `nofollow` 关键字告诉搜索引擎蜘蛛忽略链接关系。nofollow 关系可能表明当前文档的所有者并不认可被引用的文档。它经常被搜索引擎优化者包括在内，假装他们的链接农场不是垃圾页面。

`noopener`

与 `<form>`、`<a>` 和 `<area>` 元素相关，如果超链接一开始就会创建其中之一（即有一个适当的 `target` 属性值），则会创建一个顶级浏览环境，而不是一个辅助浏览环境。换句话说，它使链接的行为如同 `window.opener`是空的，并且 `target="_parent"` 被设置。

这与 `opener` 具有的含义相反。

`noreferrer`

与 `<form>`、`<a>` 和 `<area>` 元素相关，包括这个值使得 referrer 未知（不会包含 `Referer` 标头），并创建一个顶级的浏览上下文，就像 `noopener` 也被设置一样。

`opener`

如果超链接会创建一个非辅助浏览上下文的顶级浏览上下文（即以“`_blank`”作为 `target` 属性值），则创建一个辅助浏览上下文。与 noopener 作用相反。

`pingback`

给出处理当前文档的 pingback 的 pingback 服务器地址。详见 Pingback 规范。

`preconnect`

向浏览器提供提示，建议它提前打开与链接网站的连接，而不透露任何私人信息或下载任何内容，以便在跟踪链接时能更快地获取链接内容。

`prefetch`

指定用户代理应预先获取并缓存目标资源，因为后续导航可能需要该资源。参见链接预取以了解详细信息

`preload`

指定用户代理必须根据 `as` 属性给出的潜在目的地（以及与相应目的地相关的优先级），为当前导航预先获取和缓存目标资源。参见 `preload` 值的页面。

`prerender`

指定用户代理应抢先获取目标资源，并以有助于在未来提供更快的响应的方式对其进行处理，例如，获取其子资源或执行一些渲染。

`prev`

与 `next` 关键字类似，与 `<form>`、`<link>`、`<a>` 和 `<area>` 元素相关，`prev` 值表示当前文档是一个系列的一部分，而链接引用该系列中的一个先前文档就是被引用的文档。

备注：同义词 `previous` 并不正确，不应被使用。

`search`

与 `<form>`、`<link>`、`<a>` 和 `<area>` 元素相关，`search` 关键字表示该超链接引用一个文档，其界面是专门为在当前文档、站点和相关资源中搜索而设计的，提供一个可以用来搜索的资源链接。

如果 `type` 属性被设置为 `application/opensearchdescription+xml`，则该资源是一个 OpenSearch (en-US) 插件，可以很容易地添加到一些浏览器（如 Firefox 或 Internet Explorer）的界面中。

`stylesheet`

对 `<link>` 元素有效，它导入一个外部资源作为样式表使用。`text/css` 的样式表不需要 `type` 属性，因为这是该属性的默认值。如果它不是 `text/css` 类型的样式表，最好是声明这个类型。

虽然这个属性将链接定义为一个样式表，但与其他属性的交互以及 rel 值中的其他关键术语会影响样式表是否被下载和/或使用。

当与 `alternate` 关键字一起使用时，它定义了一个替代的样式表。在这种情况下，包括一个非空的 `title`。

如果媒体与 `media` 属性的值不匹配，外部样式表将不会被使用，甚至不会下载。

需要使用 CORS 协议进行跨源获取。

`tag`

对 `<a>` 和 `<area>` 元素有效，它给出了一个适用于当前文档的标签（由给定地址标识）。标签值表示该链接指向一个描述适用于其所在文档的标签的文档。这种链接类型不是指标签云中的标签，因为这些标签适用于一组页面，而 `rel` 属性的 `tag` 值是针对单个文档。

### 非标准值

`apple-touch-icon`

指定 iOS 设备上的网络应用的图标。

规范
--

| Specification |
| --- |
| HTML Standard # linkTypes |

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

### html.elements.link.rel

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

### html.elements.a.rel

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

### html.elements.area.rel

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

参见
--

* `HTMLLinkElement.relList` (en-US)
* `HTMLAnchorElement.relList` (en-US)
* `HTMLAreaElement.relList` (en-US)


HTML 属性：readonly - HTML（超文本标记语言）

HTML 属性：readonly
================

当 **`readonly`** 布尔属性存在时，元素是不可变的，意味着用户无法编辑控件。

尝试一下
----

概述
--

如果在 input 元素上指定了 `readonly` 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。

`text`、`search`、`url`、`tel`、`email`、`password`、`date`、`month`、`week`、`time`、`datetime-local`、`number` 这些 `<input>` 类型和 `<textarea>` 表单控件元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `:read-only` 伪类。如果不包含该属性，则将匹配 `:read-write` 伪类。

该属性不支持 `<select>` 或已不可变的 input 类型，也与之无关，如 `checkbox`、`radio` 或根据定义不能以值开头的 input 类型，如 `file` input 类型。`range` 和 `color` 都有默认值。`hidden` input 类型也不支持该属性，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。

**备注：** 只有文本控件可以设置为只读，因为对于其他控件（如复选框和按钮）来说，只读和禁用之间没有任何有用的区别，所以 `readonly` 属性并不适用。

当输入具有 `readonly` 属性时，`:read-only` 伪类也适用于该输入。反之，支持 `readonly` 属性但未设置该属性的输入将匹配 `:read-write` 伪类。

### 属性交互

`disabled` 与 `readonly` 的区别在于，只读控件仍可发挥作用，仍可被聚焦，而禁用控件不能接收聚焦，不能随表单提交，一般在启用前不能作为控件发挥作用。

由于只读字段不能通过用户交互改变其值，因此 `required` (en-US) 对同时指定了 `readonly` 属性的输入没有任何影响。

动态修改只读属性值的唯一方法是通过脚本。

**备注：** `required` 属性不可以在指定了 `readonly` 属性上的 input 控件上使用。

### 可用性

浏览器会显示 `readonly` 属性。

### 约束验证

如果元素是只读的，则用户不能更新该元素的值，元素的值也不参与约束验证。

示例
--

### HTML

```html
<div class="group">
  <input type="text" value="一些值" readonly="readonly" id="text" />
  <label for="text">文本框</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">日期</label>
</div>
<div class="group">
  <input type="email" value="一些值" readonly="readonly" id="email" />
  <label for="email">电子邮件</label>
</div>
<div class="group">
  <input type="password" value="一些值" readonly="readonly" id="pwd" />
  <label for="pwd">密码</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">一些值</textarea>
  <label for="ta">消息</label>
</div>
```

### 结果

规范
--

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

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

### html.elements.input.readonly

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

### html.elements.textarea.readonly

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

参见
--

* `:read-only` 和 `:read-write` 伪类
* `<input>`
* `<select>`


HTML 属性：crossorigin - HTML（超文本标记语言）

HTML 属性：crossorigin
===================

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

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

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

`anonymous`

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

`use-credentials`

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

`""`

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

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

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

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

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

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

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

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

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

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

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

规范
--

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

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

### html.elements.img.crossorigin

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

### html.elements.link.crossorigin

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

### html.elements.script.crossorigin

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

### html.elements.video.crossorigin

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

参见
--

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


rel=preconnect - HTML（超文本标记语言）

rel=preconnect
==============

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

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

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

示例
--

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

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

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

规范
--

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

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

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

参见
--

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


链接类型：preload - HTML（超文本标记语言）

链接类型：preload
============

`<link>` 元素的 `rel` 属性的 `preload` 值允许你在 HTML 的 `<head>` 中声明获取请求，指定页面很快就需要的资源，这些资源是你希望在页面生命周期的早期就开始加载的，早于浏览器的主要渲染机制启动。这可以确保它们更早可用，并且不太可能阻塞页面的渲染，从而提高性能。尽管名称中包含“load”一词，但它并不加载和执行脚本，而只是安排脚本以更高的优先级进行下载和缓存。

基础知识
----

你最常使用 `<link>` 标签来加载一个 CSS 文件，以为你的页面添加样式：

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

然而，在这里，我们将使用值为 `preload` 的 `rel` 属性，这会将 `<link>` 标签转变成任何我们想要的资源的预加载器。你还需要指定：

* `href` 属性中的资源路径。
* `as` 属性中的资源类型。

一个简单的示例可能如下所示（查看我们的 JS 和 CSS 示例源码，以及在线演示）

```html
<head>
  <meta charset="utf-8" />
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

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

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>
```

在这里，我们预加载我们的 CSS 和 JavaScript 文件，以便它们在稍后渲染页面时立即可用。这个示例可能过于简单，因为浏览器很可能在与预加载的 HTML 块中相同的位置发现了 `<link rel="stylesheet">` 和 `<script>` 元素，但在稍后发现资源并且资源越大时，好处就会更加明显。例如：

* 从 CSS 内部指向的资源，如字体或图像。
* JavaScript 可以请求的资源，如 JSON、导入的脚本或 Web Worker。
* 较大的图像和视频文件。

`preload` 还有其他优点。使用 `as` 来指定要预加载的内容类型允许浏览器：

* 更准确地优先加载资源。
* 将资源存储在缓存中以备将来使用，在适当的情况下复用资源。
* 对资源应用正确的内容安全策略。
* 为其设置正确的 `Accept` 请求标头。
### 什么类型的内容可以被预加载？

可以预加载多种类型的内容。`as` 属性可能的值包括：

* `audio`：音频文件，通常在 `<audio>` 中使用。
* `document`：用于嵌入在 `<frame>` 或 `<iframe>` 中的 HTML 文档。
* `embed`：用于嵌入在 `<embed>` 元素中的资源。
* `fetch`：通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer、WebAssembly 二进制文件或 JSON 文件。
* `font`：字体文件。
* `image`：图像文件。
* `object`：要嵌入在 `<object>` 元素中的资源。
* `script`：JavaScript 文件。
* `style`：CSS 样式表。
* `track`：WebVTT 文件。
* `worker`：JavaScript web worker 或 shared worker。
* `video`：视频文件，通常在 `<video>` 中使用。

**备注：** 预加载 `font` 和 `fetch` 资源需要设置 `crossorigin` 属性；请参阅下文的启用 CORS 的获取请求。

**备注：** 关于这些值以及它们所期望被使用的 web 功能的更多细节可以在预加载规范中找到——请参见链接元素扩展。此外，请注意，`as` 属性可以接受的值的完整列表受 Fetch 规范的约束——请参见请求目标。

包括 MIME 类型
----------

`<link>` 元素可以接受一个 `type` 属性，其中包含元素指向的资源的 MIME 类型。这在预加载资源时特别有用——浏览器将使用 `type` 属性的值来确定是否支持该资源，如果不支持，则会忽略它，仅在支持时才会下载它。

你可以在我们的视频示例中看到这个示例（查看完整的源代码，以及在线版本），以下是其中一部分代码片段。这展示了一般情况下预加载背后的核心行为。

```html
<head>
  <meta charset="utf-8" />
  <title>Video preload example</title>

  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
</head>
<body>
  <video controls>
    <source src="sintel-short.mp4" type="video/mp4" />
    <source src="sintel-short.webm" type="video/webm" />
    <p>
      Your browser doesn't support HTML video. Here is a
      <a href="sintel-short.mp4">link to the video</a> instead.
    </p>
  </video>
</body>
```

上面的示例代码只会在支持的浏览器中预加载 `video/mp4` 格式的视频，对于那些浏览器中支持 `video/mp4` 格式的用户，实际上会使用 `video/mp4` 格式的视频（因为它是首个指定的 `<source>`）。这可以让拥有支持 `video/mp4` 格式的浏览器的用户获得更流畅和更响应的视频播放体验。

请注意，对于那些浏览器既支持 `video/mp4` 格式又支持 `video/webm` 格式的用户，如果在上述代码中还指定了一个 `<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">` 元素，那么两种格式的视频（`video/mp4` 和 `video/webm`）*都*会被预加载，尽管实际上只有其中一种会被使用。

因此，不建议为同一资源的多种类型指定预加载。相反，最佳实践是仅为大多数用户可能实际使用的类型指定预加载。这就是为什么上面示例中的代码没有为 `video/webm` 视频指定预加载的原因。

然而，缺少预加载并不会阻止那些需要的用户实际使用 `video/webm` 视频：对于那些浏览器不支持 `video/mp4` 但支持 `video/webm` 的用户，上述示例中的代码仍然会使 `video/webm` 视频被使用——但它这样做的同时也不会导致对大多数其他用户不必要地进行预加载。

启用 CORS 的获取请求
-------------

在预加载启用 CORS 的资源（例如 `fetch()`、`XMLHttpRequest` 或字体）时，需要特别注意在你的 `<link>` 元素上设置 `crossorigin` 属性。该属性需要设置为与资源的 CORS 和凭据模式相匹配，即使获取请求不跨域也需要设置。

如上所述，其中一个适用的有趣情况是字体文件。由于各种原因，这些文件必须使用匿名模式的 CORS 进行获取（参见字体获取要求）。

让我们以这个案例作为示例。你可以在 GitHub 上查看完整的示例源代码（也可以在线查看）：

```html
<head>
  <meta charset="utf-8" />
  <title>Web font example</title>

  <link
 rel="preload"
 href="fonts/cicle\_fina-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />
  <link
 rel="preload"
 href="fonts/zantroke-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />

  <link href="style.css" rel="stylesheet" />
</head>
<body>
  …
</body>
```

我们不仅在 `type` 属性中提供了 MIME 类型提示，还提供了 `crossorigin` 属性，以确保预加载的 CORS 模式与最终的字体资源请求相匹配。

包括 media
--------

`<link>` 元素的一个很好的特性是它们能够接受 `media` 属性。这些属性可以接受媒体类型或完整的媒体查询，让你可以进行响应式的预加载！

让我们来看一个例子（在 GitHub 上查看，包括源代码和在线示例）：

```html
<head>
  <meta charset="utf-8" />
  <title>Responsive preload example</title>

  <link
 rel="preload"
 href="bg-image-narrow.png"
 as="image"
 media="(max-width: 600px)" />
  <link
 rel="preload"
 href="bg-image-wide.png"
 as="image"
 media="(min-width: 601px)" />

  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <header>
    <h1>My site</h1>
  </header>

  <script>
 const mediaQueryList = window.matchMedia("(max-width: 600px)");
 const header = document.querySelector("header");

 if (mediaQueryList.matches) {
 header.style.backgroundImage = "url(bg-image-narrow.png)";
 } else {
 header.style.backgroundImage = "url(bg-image-wide.png)";
 }
 </script>
</body>
```

我们在 `<link>` 元素上包含 `media` 属性，以便在用户的视口较窄时预加载窄图像，在视口较宽时加载宽图像。我们使用 `Window.matchMedia` / `MediaQueryList` 来实现这一点（查看测试媒体查询以获取更多信息）。

这使得字体在页面渲染时更有可能可用，减少了 FOUT（未经样式处理的文本闪烁）。

这并不局限于图像，甚至不局限于同类型的文件——大胆想象！如果用户使用的是带宽和 CPU 可能更受限的窄屏幕，你可以预加载和显示一个简单的 SVG 图表，或者如果用户的资源更丰富，可以预加载一个复杂的 JavaScript 代码块，然后用它来渲染一个交互式的 3D 模型。

脚本和预加载
------

**备注：** 如果你正在使用 JavaScript 模块，请使用 `<link rel="modulepreload">` (en-US)。

关于这些预加载的另一个好处是，你可以使用脚本来执行它们。例如，这里我们创建一个 `HTMLLinkElement` (en-US) 实例，然后将其附加到 DOM 中：

```js
const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
```

这意味着浏览器将预加载 `myscript.js` 文件，但实际上还没有使用它。要使用它，你可以这样做：

```js
const preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
```

当你想要预加载一个脚本，但需要将执行推迟到确切需要它的时候，这很有用。

其他资源预加载机制
---------

还存在其他预加载特性，但都不如 `<link rel="preload">` 适合该目的：

* `<link rel="prefetch">` 在浏览器中支持已久，但它是用于预取将在下一次导航/页面加载时使用的资源（例如，当你跳转到下一页时）。这是可以的，但对于当前页面没有用！此外，浏览器会给预取（`prefetch`）的资源比预加载（`preload`）的资源更低的优先级——当前页面比下一页更重要。有关更多详细信息，请参阅预取。
* `<link rel="prerender">` 在后台渲染指定的网页，如果用户导航到该页面，可以加速其加载。由于有可能浪费用户的带宽，Chrome 将 `prerender` 视为 NoState 预取。
* `<link rel="subresource">`
非标准
 一段时间以前在 Chrome 中得到了支持，其目的是解决与 `preload` 相同的问题，但它存在一个问题：没有办法确定项目的优先级（`as` 当时还不存在），所以它们都是以相当低的优先级获取的。
* 有许多基于脚本的资源加载器，但它们无法控制浏览器的获取优先级队列，并面临着同样的性能问题。
规范
--

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

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

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

参见
--

* 预加载的好处是什么？作者 Yoav Weiss


链接类型：prefetch - HTML（超文本标记语言）

链接类型：prefetch
=============

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

规范
--

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

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

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


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

itemid
======

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

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

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

示例
--

### HTML

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

### 结构化数据

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

### 结果

规范
--

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

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

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

参见
--

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


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

lang
====

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

尝试一下
----

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

语言子标签

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

脚本子标签

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

地区子标签

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

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

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

规范
--

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

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

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

相关链接
----

* 所有全局属性


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

dir
===

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

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

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

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

规范
--

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

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

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

See also
--------

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


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

inputmode
=========

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

`"none"`

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

`"text"`

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

`"decimal"`

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

`"numeric"`

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

`"tel"`

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

`"search"`

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

`"email"`

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

`"url"`

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

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

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

规范
--

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

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

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

参照
--

* 所有 全局属性