WebAssembly.Module - WebAssembly

WebAssembly.Module
==================

**`WebAssembly.Module`** 对象包含已经由浏览器编译的无状态 WebAssembly 代码，可以高效地与 Worker 共享和多次实例化。

构造函数
----

`WebAssembly.Module()` (en-US)

创建一个新的 `Module` 对象。

静态属性
----

`WebAssembly.Module.customSections()` (en-US)

给定一个 `Module` 和字符串，返回模块中具有给定字符串名称的所有自定义的部分的内容副本。

`WebAssembly.Module.exports()` (en-US)

给定一个 `Module`，返回一个数组，其中包含所有声明的导出的描述。

`WebAssembly.Module.imports()` (en-US)

给定一个 `Module`，返回一个数组，其中包含所有声明的导入的描述。

示例
--

### 将编译后的模块发送到 worker

以下示例将使用 `WebAssembly.compileStreaming()` 方法编译 `simple.wasm` 加载后的字节码，并将返回的 `Module` 实例通过 `postMessage()` 发送到一个 worker。

参见 `index-compile.html` 的源代码，或查看在线演示。

```js
const worker = new Worker("wasm\_worker.js");

WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) =>
  worker.postMessage(mod),
);
```

Worker 函数 `wasm_worker.js` 定义了模块需要使用的导入对象。然后，该函数会创建一个事件处理器，以接受主线程发送的模块。在接收到模块后，我们使用 `WebAssembly.instantiate()` 方法创建一个它的实例，然后调用其导出的函数。

```js
const importObject = {
  imports: {
    imported\_func(arg) {
      console.log(arg);
    },
  },
};

onmessage = (e) => {
  console.log("module received from main thread");
  const mod = e.data;

  WebAssembly.instantiate(mod, importObject).then((instance) => {
    instance.exports.exported\_func();
  });
};
```

规范
--

| Specification |
| --- |
| WebAssembly JavaScript Interface # modules |

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

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

参见
--

* WebAssembly 概览页面
* WebAssembly 概念
* 使用 WebAssembly JavaScript API


WebAssembly.compileStreaming() - WebAssembly

WebAssembly.compileStreaming()
==============================

**`WebAssembly.compileStreaming()`** 方法用来从一个流式源中直接编译一个 `WebAssembly.Module`。当模块需要在被实例化前被编译时，这个方法会很有用。如果要从流式源实例化一个模块应采用 `WebAssembly.instantiateStreaming()` 方法。

语法
--
```

Promise<WebAssembly.Module> WebAssembly.compileStreaming(source);
```

### 参数

*source*

一个 `Response` 对象或一个会履行（fulfill）它的 promise，用来表示你想编译的 .wasm 模块的流式源。

### 返回值

一个会被解决（resolve）为编译后的 `WebAssembly.Module` 对象的 `Promise`。

### 异常

* 如果 `bufferSource` 不是一个 typed array，将会抛出 `TypeError` 异常。
* 如果编译失败，promise 会通过拒绝（reject）来返回一个 `WebAssembly.CompileError`。
示例
--

下面的例子（在 GitHub 上查看我们的 compile-streaming.html 示例或者直接在线预览）直接从流式源传输一个 .wasm 模块然后将其编译为一个 `WebAssembly.Module` 对象。因为 `compileStreaming()` 方法可以接受一个结果为 `Response` 对象的 promise，因此你可以直接用 `fetch()` 的调用结果来调用该方法。

```js
var importObject = { imports: { imported\_func: (arg) => console.log(arg) } };

WebAssembly.compileStreaming(fetch("simple.wasm"))
  .then((module) => WebAssembly.instantiate(module, importObject))
  .then((instance) => instance.exports.exported\_func());
```

得到的 module 实例接下来通过 `WebAssembly.instantiate()` 方法被实例化了，然后调用模块导出的函数。

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

| Specification |
| --- |
| WebAssembly Web API # dom-webassembly-compilestreaming |

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

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

See also
--------

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API


WebAssembly.CompileError() - WebAssembly

WebAssembly.CompileError()
==========================

\*\*`WebAssembly.CompileError()`\*\*构造函数创建一个新的 WebAssembly `CompileError`对象，该对象表示 WebAssembly 解码或验证期间的错误。

语法
--
```

new WebAssembly.CompileError(message, fileName, lineNumber)
```

### 参数

`message` 可选

有可读性的错误描述。

`fileName` 可选
非标准

包含导致异常的代码的文件名。

`lineNumber` 可选
非标准

导致异常的代码的行号。

属性
--

*`CompileError`构造函数没有一些它特有的属性，但是，它确实通过原型链继承了某些属性。*

`WebAssembly.CompileError.prototype.constructor`

创建示例原型的特定函数。

`WebAssembly.CompileError.prototype.message`

错误信息。尽管 ECMA-262 指定 `URIError` 应提供自己的 `message` 属性，但在 SpiderMonkey 中，它继承了 `Error.prototype.message`。

`WebAssembly.CompileError.prototype.name`

错误名称。继承自 `Error`。

`WebAssembly.CompileError.prototype.fileName`

报出错误的文件名。继承自 `Error`。

`WebAssembly.CompileError.prototype.lineNumber`

报出错误的代码所在文件中的行数。继承自 `Error`。

`WebAssembly.CompileError.prototype.columnNumber`

报出错误的代码所在文件中的列数。继承自 `Error`。

`WebAssembly.CompileError.prototype.stack`

堆栈跟踪。继承自`Error`。

方法
--

*`CompileError`构造函数不包含自己的方法，但是，它确实通过原型链继承了一些方法。*

`WebAssembly.CompileError.prototype.toSource()`

返回可能导致相同错误的代码。继承自`Error`。

`WebAssembly.CompileError.prototype.toString()`

返回表示代表指定的`Error`对象的字符串。从 `Error`继承。

示例
--

以下代码段创建一个新的 CompileError 实例，并将其详细信息记录到控制台：

```js
try {
  throw new WebAssembly.CompileError("Hello", "someFile", 10);
} catch (e) {
  console.log(e instanceof CompileError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "CompileError"
  console.log(e.fileName); // "someFile"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // 返回代码运行的位置
}
```

规范
--

| Specification |
| --- |
| WebAssembly JavaScript Interface # exceptiondef-compileerror |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard |

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

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

参见
--

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API


WebAssembly.Table - WebAssembly

WebAssembly.Table
=================

**`WebAssembly.Table`** 是代表 WebAssembly Table 的 JavaScript 包装对象，具有类数组结构，存储了多个函数引用。在 JavaScript 或者 WebAssemble 中创建的 Table 对象可以同时被 JavaScript 或 WebAssembly 访问和更改。

**备注：** Table 对象目前只能存储函数引用，不过在将来可能会被扩展。

构造函数
----

`WebAssembly.Table()` (en-US)

创建一个新的 `Table` 对象。

### 实例属性

`Table.prototype.length` (en-US) 只读

返回 Table 的长度，即元素数。

### 实例方法

`Table.prototype.get()` (en-US)

访问器函数——获取给定索引下存储的元素。

`Table.prototype.grow()` (en-US)

将 Table 实例的大小增加指定数量的元素。

`Table.prototype.set()` (en-US)

将存储在给定索引中的元素设置为给定值。

示例
--

### 创建一个新的 WebAssembly Table 实例

下面的示例（见 table2.html 源代码和实时版本）创建了一个新的 WebAssembly Table 实例，初始大小为 2 个元素。然后，我们打印出表的长度和两个索引的内容（通过 `Table.prototype.get()` (en-US) 检索），以显示长度为 2，且两个元素均为 `null`。

```js
const tbl = new WebAssembly.Table({ initial: 2, element: "anyfunc" });
console.log(tbl.length); // "2"
console.log(tbl.get(0)); // "null"
console.log(tbl.get(1)); // "null"
```

然后，我们创建一个包含 Table 的导入对象：

```js
const importObj = {
  js: { tbl },
};
```

最后，我们使用 `WebAssembly.instantiateStreaming()` 方法加载并实例化一个 Wasm 模块（table2.wasm）。table2.wasm 模块包含两个函数（一个返回 42，另一个返回 83），并将这两个函数分别存储到导入 Table 的 0 号和 1 号元素中（参见文本表示）。因此，在实例化之后，表的长度仍然是 2，但元素中现在包含了可调用的 WebAssembly 导出函数，可以通过 JS 调用这些函数。

```js
WebAssembly.instantiateStreaming(fetch("table2.wasm"), importObject).then(
  (obj) => {
    console.log(tbl.length);
    console.log(tbl.get(0)());
    console.log(tbl.get(1)());
  },
);
```

请注意，必须在访问器末尾包含第二个函数调用操作符，才能实际调用引用函数并记录其中存储的值（例如，要使用 `get(0)()` 而不是 `get(0)`）。

该示例显示，我们通过 JavaScript 创建并访问 Table，但在 Wasm 实例中，同样的 Table 也是可见并可调用的。

规范
--

| Specification |
| --- |
| WebAssembly JavaScript Interface # tables |

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

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

参见
--

* WebAssembly 概述页
* WebAssembly 概念
* 使用 WebAssembly JavaScript API


WebAssembly.Instance - WebAssembly

WebAssembly.Instance
====================

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

**`WebAssembly.Instance`** 对象本身是有状态的，是 WebAssembly.Module 的一个可执行实例。`实例`包含所有的 WebAssembly 导出函数，允许从 JavaScript 调用 WebAssembly 代码。

`WebAssembly.Instance()` 构造函数以同步方式实例化一个`WebAssembly.Module` 对象。然而，通常获取实例的方法是通过异步函数`WebAssembly.instantiate()` .

构造函数
----

**警告：** 由于大型模块的实例化代价极高，开发人员应只在必须同步实例化的时候，才使用`Instance()`；绝大多数情况应该使用异步方法`WebAssembly.instantiate()` .
```

var myInstance = new WebAssembly.Instance(module, importObject);
```

### 参数

*module*

要被实例化的 `WebAssembly.Module` 对象。

*importObject* 可选

一个包含值的对象，导入到新创建的 `实例`, 比如函数或 `WebAssembly.Memory` 对象。There must be one matching property for each declared import of `module` 否则抛出 WebAssembly.LinkError (en-US) 异常。

实例化
---

所有的 `Instance` 实例继承自`Instance()` 属性对象 (en-US)— 修改它会影响所有的`Instance` 实例。

### 实例属性

`Instance.prototype.exports` (en-US)

返回一个包含此 WebAssembly 模块实例所导出的全部成员的 JS 对象，以便 JavaScript 访问和使用这些成员，这个对象是只读的。

规格
--

| Specification |
| --- |
| WebAssembly JavaScript Interface # instances |

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

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

参考
--

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API


WebAssembly.compile() - WebAssembly

WebAssembly.compile()
=====================

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

**`WebAssembly.compile()`** 方法编译 WebAssembly 二进制代码到一个`WebAssembly.Module` 对象。如果在实例化之前有必要去编译一个模块，那么这个方法是有用的（否则，将会使用`WebAssembly.instantiate()` 方法）

语法
--
```

Promise<WebAssembly.Module> WebAssembly.compile(bufferSource);
```

### 参数

*bufferSource*

一个包含你想编译的 wasm 模块二进制代码的 typed array(类型数组) or ArrayBuffer(数组缓冲区)

### 返回值

一个解析为 `WebAssembly.Module` 的`Promise` 对象。

### 异常

* 如果 `bufferSource` 不是一个 typed array, 将抛出一个 `TypeError` 。
* 如果编译失败 promise 将会 reject 一个 `WebAssembly.CompileError`。
示例
--

下面的例子 (查看 GitHub 上的 index-compile.html 例子，并且也能 查看运行效果) 使用 `compile()` 方法编译加载进来的 simple.wasm 二进制代码并且使用 postMessage() 发送给一个 worker。

```js
var worker = new Worker("wasm\_worker.js");

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.compile(bytes))
  .then((mod) => worker.postMessage(mod));
```

在线程中 (查看 `wasm_worker.js`) 我们定义了一个导入对象共模块使用，然后设置了一个事件处理函数来接收主线程发送过来的模块。当模块被接收之后，我们使用`WebAssembly.Instantiate()` 方法创建了一个实例，调用从它里面导出的一个方法，接下来展示了我们可以用 `WebAssembly.Module.exports` (en-US) 属性来调用模块上返回的可用信息。

```js
var importObject = {
  imports: {
    imported\_func: function (arg) {
      console.log(arg);
    },
  },
};

onmessage = function (e) {
  console.log("module received from main thread");
  var mod = e.data;

  WebAssembly.instantiate(mod, importObject).then(function (instance) {
    instance.exports.exported\_func();
  });

  var exports = WebAssembly.Module.exports(mod);
  console.log(exports[0]);
};
```

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

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-webassembly-compile |

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

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

See also
--------

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API


WebAssembly.instantiateStreaming() - WebAssembly

WebAssembly.instantiateStreaming()
==================================

**`WebAssembly.instantiateStreaming()`** 函数直接从流式底层源编译并实例化 WebAssembly 模块。这是加载 Wasm 代码的最有效、最优化的方式。

**备注：** 具有严格的内容安全策略（CSP）的网页可能会阻止 WebAssembly 模块的编译和执行。请参阅 script-src CSP (en-US) 以了解更多有关允许 WebAssembly 编译和执行的信息。

语法
--

```js
WebAssembly.instantiateStreaming(source, importObject)
```

### 参数

`source`

一个 `Response` 对象或一个会兑现为 Response 的 promise，其表示你想要传输、编译和实例化的 Wasm 模块的底层源。

`importObject` 可选

包含一些想要导入到新创建的 `Instance` 中的值的对象，例如函数或 `WebAssembly.Memory` 对象。每个已编译模块的声明导入必须有一个匹配属性，否则抛出 `WebAssembly.LinkError` (en-US) 异常。

### 返回值

一个 `Promise`，会兑现为一个包含两个属性的 `ResultObject`：

* `module`：`WebAssembly.Module` 对象，表示编译完成的 WebAssembly 模块。这个 `Module` 能够再次被实例化或通过 postMessage() 共享。
* `instance`：`WebAssembly.Instance` 对象，包含所有导出的 WebAssembly 方法。
### 异常

* 如果任意参数的类型或结构存在错误，则抛出 `TypeError`。
* 如果操作失败，Promise 根据失败原因以 `WebAssembly.CompileError`、`WebAssembly.LinkError` (en-US) 或
 `WebAssembly.RuntimeError` 拒绝。
示例
--

下面的示例（在 GitHub 上查看 instantiate-streaming.html 示例，也可在线查看）直接从基础源传输一个 Wasm 模块，然后进行编译和实例化，Promise 会兑现 `ResultObject`。因为 `instantiateStreaming()` 函数接受兑现后返回 `Response` 对象的 Promise，你可以直接传递一个 `fetch()` 调用，它会在兑现后将 response 传递给该函数。

```js
const importObject = { imports: { imported\_func: (arg) => console.log(arg) } };

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (obj) => obj.instance.exports.exported\_func(),
);
```

然后访问 `ResultObject` 的实例成员，并调用包含的导出函数。

**备注：** 为了使其工作，服务器应该返回一个 `application/wasm` MIME 类型的 `.wasm` 文件。

规范
--

| Specification |
| --- |
| WebAssembly Web API # dom-webassembly-instantiatestreaming |

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

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

参见
--

* WebAssembly 概述页
* WebAssembly 概念
* 使用 WebAssembly JavaScript API


WebAssembly.RuntimeError() - WebAssembly

WebAssembly.RuntimeError()
==========================

\*\*`WebAssembly.RuntimeError()`\*\*构造函数创建一个新的 WebAssembly RuntimeError 对象 --- 一个每当 WebAssembly 陷入指定陷阱时将抛出的类型。

语法
--
```

new WebAssembly.RuntimeError(message, fileName, lineNumber)
```

### 参数

`message` 可选

有可读性的错误信息。

`fileName` 可选
非标准

包含导致异常的代码的文件名。

`lineNumber` 可选
非标准

导致异常的代码的行号。

属性
--

*`RuntimeError`构造函数不包含其自身特有的属性，但是，它确实通过原型链继承了某些属性。*

`WebAssembly.RuntimeError.prototype.constructor`

创建示例原型的特定函数。

`WebAssembly.RuntimeError.prototype.message`

错误信息。尽管 ECMA-262 指定 `URIError` 应提供自己的 `message` 属性，但在 SpiderMonkey 中，它继承了 `Error.prototype.message`。

`WebAssembly.RuntimeError.prototype.name`

错误名称。继承自 `Error`.

`WebAssembly.RuntimeError.prototype.fileName`

报出错误的文件路径。继承自 `Error`.

`WebAssembly.RuntimeError.prototype.lineNumber`

报出错误的代码所在文件中的行数。继承自`Error`.

`WebAssembly.RuntimeError.prototype.columnNumber`

报出错误的代码所在文件中的列数。继承自 `Error`.

`WebAssembly.RuntimeError.prototype.stack`

堆栈跟踪。继承自 `Error`.

方法
--

*`RuntimeError`构造函数不包含自己的方法，但是，它确实通过原型链继承了一些方法。*

`WebAssembly.RuntimeError.prototype.toSource()`

返回可能导致相同错误的代码。继承自`Error`.

`WebAssembly.RuntimeError.prototype.toString()`

返回表示代表指定的`Error`对象的字符串。从`Error`.

样例
--

以下代码段创建了一个新的 RuntimeError 实例，并将其详细信息记录到控制台：

```js
try {
  throw new WebAssembly.RuntimeError("Hello", "someFile", 10);
} catch (e) {
  console.log(e instanceof RuntimeError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "RuntimeError"
  console.log(e.fileName); // "someFile"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // 返回代码运行的位置
}
```

规范
--

| Specification |
| --- |
| WebAssembly JavaScript Interface # exceptiondef-runtimeerror |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard |

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

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

参见
--

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API


WebAssembly.validate() - WebAssembly

WebAssembly.validate()
======================

**`WebAssembly.validate()`** 方法用于验证包含 WebAssembly 二进制码的一个 typed array 是否合法，返回 `true` 如果这些字节能构成一个合法的 wasm 模块，否则返回 `false`。

语法
--
```

WebAssembly.validate(bufferSource);
```

### 参数

`bufferSource`

一个包含 WebAssembly 二进制码的 typed array 或 ArrayBuffer。

### 返回值

一个布尔值，用来表示给定的 `bufferSource` 是合法 wasm 代码（`true`）或者不是（`false`）。

### 异常

如果给定的 `bufferSource` 不是 typed array 或 ArrayBuffer 类型，将会抛出 `TypeError` 异常。

示例
--

下面的例子（查看 validate.html 源代码，或者在线预览）通过 `fetch` 获取了一个 .wasm 模块并将其转换为一个 typed array。接下来用 `validate()` 方法来验证这个模块是否合法。

```js
fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then(function (bytes) {
    var valid = WebAssembly.validate(bytes);
    console.log(
      "The given bytes are " + (valid ? "" : "not ") + "a valid wasm module",
    );
  });
```

规范
--

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-webassembly-validate |

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

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

参见
--

* WebAssembly overview page
* WebAssembly concepts
* Using the WebAssembly JavaScript API


开源 Web 技术示例

开源 Web 技术示例
===========

Mozilla 支持各种令人兴奋的开源 Web 技术，我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。

如果你知道开源 Web 技术的优秀演示或者应用，就在这里（以及 英文页面）添加一个合适的链接吧。

2D 图形
-----

### Canvas

* Blob Sallad: an interactive blob using JavaScript and canvas（示例）
* Flying through space
* 3D RayCaster
* processing.js
* 3D on 2D Canvas
* miniPaint: Image editor（源码）
* Zen Photon Garden（源码）
### SVG

* Bubblemenu （视觉特效与交互）
* HTML transformations（使用了 `<foreignObject>` 元素）（视觉特效与变换）
* Phonetics Guide（可交互）
* 3D objects demo（可交互）
* Blobular（可交互）
* Video embedded in SVG（或下载到本地）
* Summer HTML image map creator（源码）
### 视频

* Video 3D Animation "mozilla constantly evolving"
* Video 3D animation "Floating Dance"
* Streaming Anime, Movie Trailer and Interview
* Billy's Browser Firefox Flick
* Virtual Barber Shop
* Transformers Movie Trailer
* A Scanner Darkly Movie Trailer（自带控制功能）
* Events firing and volume control
* Dragable and sizable videos
3D 图像
-----

### WebGL

* Web Audio Fireworks
* IoQuake3（源码）
* Escher puzzle（源码）
* Kai 'Opua（源码）
### 虚拟现实（VR）

* The Polar Sea（源码）
* Sechelt fly-through（源码）
CSS
---

* CSS Zen Garden
* CSS floating logo "mozilla"
* Paperfold
* CSS Blockout
* Rubik's cube
* Pure CSS Slides
* Planetarium（源码）
* Loader with blend modes
* Text reveal with clip-path
* Ambient shadow with custom properties
* Luminiscent vial

旧项目：

* CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. (debug 模式)
* Bootstrap Contact Form Design
* CSS Paralax Forest
* Responsive Login Page Design
* One Page Scroll Website Template
### 变换

* Impress.js (源码)
游戏
--

* IoQuake3（源码）
* Kai 'Opua（源码）
Web API
-------

### 通知 API

* HTML5 Notifications（源码）
### 网络音频 API

* Web Audio Fireworks
* oscope.js - JavaScript oscilloscope
* HTML5 Web Audio Showcase（源码）
* HTML5 Audio Visualizer（源码）
* Graphical Filter Editor and Visualizer（源码）
### 文件 API

* Slide My Text - presentation from plain text files
### 其他

* Web Worker Fractals
* Photo editor
* Coral generator
* Raytracer
* HotCold Touch Typing


事件参考

事件参考
====

事件的触发用于通知“对变化感兴趣”的代码以影响代码的执行。这些事件可能来自用户的交互（例如：使用鼠标或调整窗口大小）、底层环境状态的改变（例如：电池电量不足或操作系统的媒体事件）和其他的情况。

每个事件都使用继承自 `Event` 接口的对象来表示，可以包括额外的自定义成员属性及函数，以获取事件发生时相关的更多信息。本文为每个事件都提供了一个表格（靠近顶部的区域），其中包含了指向相关事件接口的链接和其他相关的信息。事件 > 基于 `Event` 的接口中完整地列出了不同的事件类型。

本文提供了你可能感兴趣的主要事件类型（动画、剪切板、worker，等等）的索引，以及实现这些事件的主要的类。最后是所有提供了文档的事件列表。

**备注：** 此页面列出了你会在 web 上遇到的绝大多数常见事件。如果你正在查找一个这里没有列出的事件，请尝试在 MDN 上搜索它的名字、主题或关联的规范。

事件索引
----

| 事件类型 | 描述 | 文档 |
| --- | --- | --- |
| 动画 |
 与
 Web Animation API 相关的事件。

用于响应动画状态的改变（例如：动画的开始或结束）。 |
 在
 `Document`、`Window`、`HTMLElement` 上触发的事件。
  |
| 异步数据获取 | 与数据获取相关的事件。 |
 在
 `AbortSignal`、`XMLHttpRequest`、`FileReader` 上触发的事件。
  |
| 剪切板 |
 与
 Clipboard API 相关的事件。

用于在内容被剪切、复制或粘贴时发出通知。 |
 在
 `Document`、`Window`、`HTMLElement` 上触发的事件。
  |
| 文本输入（Composition） | 与文本输入相关的事件；“间接”输入文本（而不是直接使用常规的键盘输入）。
例如，使用语音转文字的引擎，或使用特殊的组合键以将键入的内容表示成另一种语言中的字符。 |
 在
 `Element` 上触发的事件。
  |
| CSS 变换 |
 与
 CSS 变换相关的事件。

当 CSS 变换开始、停止或取消等事件发生时发出通知。 |
 在
 `Document`、`Window`、`HTMLElement` 上触发的事件。
  |
| 数据库 | 与数据库操作相关的事件：打开、关闭、事务、错误，等等。 |
 在
 `IDBDatabase`、`IDBOpenDBRequest` (en-US)、`IDBRequest`、`IDBTransaction` 上触发的事件。
  |
| DOM 突变 | 与文档对象模型（DOM）层次结构和节点的修改相关的事件。 |

**警告：**
突变事件 (en-US)已被废弃。请使用 MutationObserver 代替。

 |
| 拖放、滚轮 |
 与使用
 HTML 拖放 API 和滚轮事件相关的事件。

拖动和滚轮事件派生自鼠标事件。虽然它们在使用鼠标滚轮和拖放时触发，但它们也可以和其他合适的硬件一起使用。 |
 拖放事件在
 `Document` 上触发。

 滚轮事件在
 `Document` (en-US)
 和
 `Element` 上触发。
  |
| 焦点 | 与元素获得和失去焦点相关的事件。 |
 在
 `Element`、`Window` 上触发的事件。
  |
| 表单 | 与创建、重置和提交表单相关的事件。 |
 在
 `HTMLFormElement` 上触发。
  |
| 全屏 |
 与
 Fullscreen API 相关的事件。

用于在全屏和窗口模式切换或切换期间发生错误时发送通知。 |
 在
 `Document`、`Element` 上触发的事件。
  |
| 游戏手柄（Gamepad） |
 与
 Gamepad API 相关的事件。
  |
 在
 `Window` 上触发的事件。
  |
| 手势 |
 建议使用
 Touch 事件来实现手势。
  |
 在
 `Document`、`Element` 上触发的事件。

此外还有一些非标准的手势事件：* WebKit 非标准的、在 `Element` 上的事件：
 `gesturestart` 事件 (en-US)、`gesturechange` 事件 (en-US)、`gestureend` 事件 (en-US)。
* IE 非标准的、在 `Element` 上的事件：
 `MSGestureStart`、`MSGestureChange`、`MSGestureEnd`、`MSGestureHold`、`MSGestureTap`。
* Mozilla 已启用/非标准的 touch 事件
 Touch 事件（Mozilla 实验性） (en-US)。
* Firefox 附加组件的鼠标手势事件
 |
| History |
 与
 History API
 相关的事件。
  |
 在
 `Window` 上触发的事件。
  |
| HTML 元素内容显示管理 | 与显示或文本元素状态的改变相关的事件。 |
 在
 `HTMLDetailsElement`、`HTMLDialogElement`、`HTMLSlotElement` 上触发的事件。
  |
| 输入 | 与 HTML input 元素（如：`<input>`、`<select>` 或 `<textarea>`）相关的事件。 |
 在
 `HTMLElement`、`HTMLInputElement` 上触发的事件。
  |
| 键盘 | 与使用键盘相关的事件。
用于在按键向上、向下或仅仅只是按下时发出通知。 |
 在
 `Document`、`Element` 上触发的事件。
  |
| 加载/卸载文档 | 在加载或卸载文档时触发的事件。 |
 在
 `Document` 和
 `Window` 上触发的事件。
  |
| 清单 | 与安装渐进式 web 应用清单相关的事件。 |
 在
 `Window` 上触发的事件
  |
| 媒体 | 与媒体使用（包括媒体捕捉与媒体流 API、Web Audio API、画中画 API，等等）相关的事件。 |
 在
 `ScriptProcessorNode`、`HTMLMediaElement`、`AudioTrackList` (en-US)、`AudioScheduledSourceNode`、`MediaRecorder`、`MediaStream`、`MediaStreamTrack`、`VideoTrackList` (en-US)、`HTMLTrackElement` (en-US)、`OfflineAudioContext`、`TextTrack` (en-US)、`TextTrackList` (en-US)、Element/audio,
 Element/video 上触发的事件。
  |
| 消息传递 | 与窗口从另一个浏览上下文接受消息相关的事件。 |
 在
 `Window` 上触发的事件。
  |
| 鼠标 | 与计算机鼠标相关的事件。
用于在鼠标单机、双击、释放、按下、右击、移入移除元素/文本、选择等动作时发出通知。
指针事件为鼠标事件提供了与硬件无关的代替方案。拖放和滚轮事件派生自鼠标事件。 |
 在
 `Element` 上触发的事件。
  |
| 网络连接 | 与获得和失去网络连接相关的事件。 |
 在
 `Window` 上触发的事件。

 在
 `NetworkInformation`（网络状况 API）上触发的事件。
  |
| 支付 | 与支付请求 API 相关的事件。 |
 在
 `PaymentRequest` (en-US)、`PaymentResponse` (en-US) 上触发的事件。
  |
| 性能 |
 与
 High Resolution Time API、Navigation Timing API、User Timing API
 和
 Resource Timing API 相关的事件。
  |
 在
 `Performance` 上触发的事件。
  |
| 指针 | 与指针事件 API 相关的事件。
提供来自指针设备（包括鼠标、触控、笔/触控笔）的与硬件无关的通知。 |
 在
 `Document`、`HTMLElement` 上触发的事件。
  |
| 打印 | 与打印相关的事件。 |
 在
 `Window` 上触发的事件。
  |
| Promise rejection | 在任意 JavaScript promise 被拒绝时，发送到全局脚本上下文的事件。 |
 在
 `Window` 上触发的事件。
  |
| 网络套接字 |
 与
 WebSockets API 相关的事件。
  |
 在
 `Websocket` 上触发的事件。
  |
| SVG | 与 SVG 图像相关的事件。 |
 在
 `SVGElement`、`SVGAnimationElement` (en-US)、`SVGGraphicsElement` 上触发的事件。
  |
| 文本选择 | 与选择文本相关的 Selection API 事件。 |
 事件（`selectionchange`）在
 `HTMLTextAreaElement` (en-US)、`HTMLInputElement` 上触发。
  |
| 触控 |
 与
 Touch Events API 相关的事件。

 在与触控屏交互（例如：用手指或触控笔）时发出通知。与
 Force Touch API 无关。
  |
 在
 `Document`、`Element` 上触发的事件。
  |
| 虚拟现实 |
 与
 WebXR Device API 相关的事件。

**警告：**
WebVR API（和关联的
 `Window` 事件）已被废弃。

 |
 在
 `XRSystem` (en-US)、`XRSession` (en-US)、`XRReferenceSpace` (en-US) 上触发的事件。
  |
| RTC（实时通信） |
 与
 WebRTC API 相关的事件。
  |
 在
 `RTCDataChannel`、`RTCDTMFSender` (en-US)、`RTCIceTransport` (en-US)、`RTCPeerConnection` 上触发的事件。
  |
| Server-sent 事件 |
 与
 server sent events API 相关的事件。
  |
 在
 `EventSource` 上触发的事件。
  |
| 语音合成 |
 与
 Web Speech API 相关的事件。
  |
 在
 `SpeechSynthesisUtterance` (en-US) 上触发的事件。
  |
| Worker |
 与
 Web Workers API、Service Worker API、Broadcast Channel API 和
 Channel Messaging API 相关的事件。

 用于相应新消息和消息发送的错误。Service
 worker 还可以收到其他事件的通知，包括推送通知、用户单击显示的通知 push 订阅失效、从内容索引中删除条目，等等。
  |
 在
 `ServiceWorkerGlobalScope`、`DedicatedWorkerGlobalScope`、`SharedWorkerGlobalScope` (en-US)、`WorkerGlobalScope` (en-US)、`Worker`、`WorkerGlobalScope` (en-US)、`BroadcastChannel`、`MessagePort` 上触发的事件。
  |

事件列表
----

本节列出了在 MDN 上有自己的参考页面的事件。如果下面没有列出你感兴趣的某个事件，请尝试搜索它的名字、主题或关联的规范。

* `AbortSignal`
    + abort 事件
* `AudioScheduledSourceNode`
    + ended 事件 (en-US)
* `AudioTrackList` (en-US)
    + addtrack 事件 (en-US)
    + change 事件 (en-US)
    + removetrack 事件 (en-US)
* `BroadcastChannel`
    + messageerror 事件
    + message 事件
* `DedicatedWorkerGlobalScope`
    + messageerror 事件 (en-US)
    + message 事件 (en-US)
* `Document`
    + animationcancel 事件 (en-US)
    + animationend 事件 (en-US)
    + animationiteration 事件 (en-US)
    + animationstart 事件 (en-US)
    + copy 事件 (en-US)
    + cut 事件 (en-US)
    + DOMContentLoaded 事件
    + dragend 事件
    + dragenter 事件
    + dragleave 事件
    + dragover 事件
    + dragstart 事件
    + drag 事件
    + drop 事件
    + fullscreenchange 事件
    + fullscreenerror 事件
    + gotpointercapture 事件 (en-US)
    + keydown 事件 (en-US)
    + keypress 事件
    + keyup 事件 (en-US)
    + lostpointercapture 事件 (en-US)
    + paste 事件 (en-US)
    + pointercancel 事件 (en-US)
    + pointerdown 事件 (en-US)
    + pointerenter 事件 (en-US)
    + pointerleave 事件 (en-US)
    + pointerlockchange 事件
    + pointerlockerror 事件 (en-US)
    + pointermove 事件 (en-US)
    + pointerout 事件 (en-US)
    + pointerover 事件 (en-US)
    + pointerup 事件 (en-US)
    + readystatechange 事件
    + scroll 事件
    + selectionchange 事件
    + selectstart 事件
    + touchcancel 事件
    + touchend 事件
    + touchmove 事件
    + touchstart 事件
    + transitioncancel 事件 (en-US)
    + transitionend 事件 (en-US)
    + transitionrun 事件 (en-US)
    + transitionstart 事件 (en-US)
    + visibilitychange 事件
    + wheel 事件 (en-US)
* `Element`
    + afterscriptexecute 事件
    + auxclick 事件
    + beforescriptexecute 事件
    + blur 事件
    + click 事件
    + compositionend 事件
    + compositionstart 事件
    + compositionupdate 事件
    + contextmenu 事件
    + copy 事件
    + cut 事件
    + dblclick 事件
    + DOMActivate 事件
    + DOMMouseScroll 事件 (en-US)
    + error 事件
    + focusin 事件 (en-US)
    + focusout 事件
    + focus 事件
    + fullscreenchange 事件
    + fullscreenerror 事件
    + gesturechange 事件 (en-US)
    + gestureend 事件 (en-US)
    + gesturestart 事件 (en-US)
    + keydown 事件
    + keypress 事件
    + keyup 事件
    + mousedown 事件
    + mouseenter 事件
    + mouseleave 事件
    + mousemove 事件
    + mouseout 事件
    + mouseover 事件
    + mouseup 事件
    + mousewheel 事件
    + msContentZoom 事件
    + MSGestureChange 事件
    + MSGestureEnd 事件
    + MSGestureHold 事件
    + MSGestureStart 事件
    + MSGestureTap 事件
    + MSInertiaStart 事件
    + MSManipulationStateChanged 事件
    + paste 事件
    + scroll 事件
    + select 事件
    + touchcancel 事件
    + touchend 事件
    + touchmove 事件
    + touchstart 事件
    + webkitmouseforcechanged 事件 (en-US)
    + webkitmouseforcedown 事件 (en-US)
    + webkitmouseforceup 事件 (en-US)
    + webkitmouseforcewillbegin 事件 (en-US)
    + wheel 事件
* `EventSource`
    + error 事件
    + message 事件
    + open 事件
* `FileReader`
    + abort 事件
    + error 事件 (en-US)
    + loadend 事件 (en-US)
    + loadstart 事件 (en-US)
    + load 事件
    + progress 事件 (en-US)
* `HTMLCanvasElement`
    + webglcontextcreationerror 事件 (en-US)
    + webglcontextlost 事件
    + webglcontextrestored 事件 (en-US)
* `HTMLDetailsElement`
    + toggle 事件
* `HTMLDialogElement`
    + cancel 事件
    + close 事件
* `HTMLElement`
    + animationcancel 事件
    + animationend 事件
    + animationiteration 事件
    + animationstart 事件
    + beforeinput 事件
    + change 事件
    + gotpointercapture 事件 (en-US)
    + input 事件
    + lostpointercapture 事件 (en-US)
    + pointercancel 事件
    + pointerdown 事件 (en-US)
    + pointerenter 事件 (en-US)
    + pointerleave 事件 (en-US)
    + pointermove 事件 (en-US)
    + pointerout 事件 (en-US)
    + pointerover 事件 (en-US)
    + pointerup 事件 (en-US)
    + transitioncancel 事件 (en-US)
    + transitionend 事件
    + transitionrun 事件 (en-US)
    + transitionstart 事件
* `HTMLFormElement`
    + formdata 事件
    + reset 事件
    + submit 事件
* `HTMLInputElement`
    + invalid 事件
    + search 事件 (en-US)
* `HTMLMediaElement`
    + abort 事件
    + canplaythrough 事件
    + canplay 事件
    + durationchange 事件
    + emptied 事件 (en-US)
    + ended 事件
    + error 事件
    + loadeddata 事件
    + loadedmetadata 事件
    + loadstart 事件
    + pause 事件
    + playing 事件
    + play 事件
    + progress 事件
    + ratechange 事件 (en-US)
    + seeked 事件 (en-US)
    + seeking 事件 (en-US)
    + stalled 事件 (en-US)
    + suspend 事件 (en-US)
    + timeupdate 事件
    + volumechange 事件 (en-US)
    + waiting 事件 (en-US)
* `HTMLSlotElement`
    + slotchange 事件 (en-US)
* `HTMLTrackElement` (en-US)
    + cuechange 事件 (en-US)
* `HTMLVideoElement`
    + enterpictureinpicture 事件
    + leavepictureinpicture 事件
* `IDBDatabase`
    + abort 事件 (en-US)
    + close 事件 (en-US)
    + error 事件 (en-US)
    + versionchange 事件
* `IDBOpenDBRequest` (en-US)
    + blocked 事件 (en-US)
    + upgradeneeded 事件 (en-US)
* `IDBRequest`
    + error 事件 (en-US)
    + success 事件 (en-US)
* `IDBTransaction`
    + abort 事件 (en-US)
    + complete 事件 (en-US)
    + error 事件 (en-US)
* `MediaDevices`
    + devicechange 事件
* `MediaRecorder`
    + error 事件 (en-US)
* `MediaStream`
    + addtrack 事件 (en-US)
    + removetrack 事件 (en-US)
* `MediaStreamTrack`
    + ended 事件 (en-US)
    + mute 事件 (en-US)
    + unmute 事件 (en-US)
* `MessagePort`
    + messageerror 事件 (en-US)
    + message 事件
* `OfflineAudioContext`
    + complete 事件
* `PaymentRequest` (en-US)
    + merchantvalidation 事件 (en-US)
    + paymentmethodchange 事件 (en-US)
    + shippingaddresschange 事件 (en-US)
    + shippingoptionchange 事件 (en-US)
* `PaymentResponse` (en-US)
    + payerdetailchange 事件 (en-US)
* `Performance`
    + resourcetimingbufferfull 事件
* `PictureInPictureWindow`
    + resize 事件 (en-US)
* `RTCDataChannel`
    + bufferedamountlow 事件 (en-US)
    + close 事件 (en-US)
    + closing 事件 (en-US)
    + error 事件 (en-US)
    + message 事件 (en-US)
    + open 事件 (en-US)
* `RTCDtlsTransport` (en-US)
    + error 事件 (en-US)
* `RTCDTMFSender` (en-US)
    + tonechange 事件
* `RTCIceTransport` (en-US)
    + gatheringstatechange 事件 (en-US)
    + selectedcandidatepairchange 事件 (en-US)
    + statechange 事件 (en-US)
* `RTCPeerConnection`
    + addstream 事件
    + connectionstatechange 事件 (en-US)
    + datachannel 事件
    + icecandidateerror 事件 (en-US)
    + icecandidate 事件
    + iceconnectionstatechange 事件 (en-US)
    + icegatheringstatechange 事件 (en-US)
    + negotiationneeded 事件 (en-US)
    + removestream 事件 (en-US)
    + signalingstatechange 事件 (en-US)
    + track 事件
* `ScriptProcessorNode`
    + audioprocess 事件 (en-US)
* `ServiceWorkerContainer`
    + message 事件 (en-US)
* `ServiceWorkerGlobalScope`
    + activate 事件 (en-US)
    + contentdelete 事件 (en-US)
    + install 事件 (en-US)
    + message 事件 (en-US)
    + notificationclick 事件 (en-US)
    + pushsubscriptionchange 事件 (en-US)
    + push 事件 (en-US)
* `SharedWorkerGlobalScope` (en-US)
    + connect 事件 (en-US)
* `SpeechRecognition` (en-US)
    + audioend 事件 (en-US)
    + audiostart 事件 (en-US)
    + end 事件 (en-US)
    + error 事件 (en-US)
    + nomatch 事件 (en-US)
    + result 事件 (en-US)
    + soundend 事件 (en-US)
    + soundstart 事件 (en-US)
    + speechend 事件 (en-US)
    + speechstart 事件 (en-US)
    + start 事件 (en-US)
* `SpeechSynthesis`
    + voiceschanged 事件 (en-US)
* `SpeechSynthesisUtterance` (en-US)
    + boundary 事件 (en-US)
    + end 事件 (en-US)
    + error 事件 (en-US)
    + mark 事件 (en-US)
    + pause 事件 (en-US)
    + resume 事件 (en-US)
    + start 事件 (en-US)
* `SVGAnimationElement` (en-US)
    + beginEvent 事件 (en-US)
    + endEvent 事件 (en-US)
    + repeatEvent 事件 (en-US)
* `SVGElement`
    + abort 事件
    + error 事件 (en-US)
    + load 事件 (en-US)
    + resize 事件
    + scroll 事件
    + unload 事件
* `SVGGraphicsElement`
    + copy 事件 (en-US)
    + cut 事件 (en-US)
    + paste 事件 (en-US)
* `TextTrack` (en-US)
    + cuechange 事件
* `TextTrackList` (en-US)
    + addtrack 事件 (en-US)
    + change 事件 (en-US)
    + removeTrack 事件 (en-US)
* `VideoTrackList` (en-US)
    + addtrack 事件 (en-US)
    + change 事件 (en-US)
    + removetrack 事件 (en-US)
* `VisualViewport`
    + resize 事件 (en-US)
    + scroll 事件 (en-US)
* `WebSocket`
    + close 事件
    + error 事件
    + message 事件
    + open 事件
* `Window`
    + afterprint 事件
    + animationcancel 事件 (en-US)
    + animationend 事件 (en-US)
    + animationiteration 事件 (en-US)
    + animationstart 事件 (en-US)
    + appinstalled 事件
    + beforeprint 事件
    + beforeunload 事件
    + blur 事件
    + copy 事件
    + cut 事件
    + devicemotion 事件
    + deviceorientation 事件
    + error 事件
    + focus 事件
    + gamepadconnected 事件
    + gamepaddisconnected 事件 (en-US)
    + hashchange 事件
    + languagechange 事件 (en-US)
    + load 事件
    + messageerror 事件
    + message 事件
    + offline 事件
    + online 事件
    + orientationchange 事件
    + pagehide 事件
    + pageshow 事件
    + paste 事件
    + popstate 事件
    + rejectionhandled 事件
    + resize 事件
    + storage 事件
    + transitioncancel 事件 (en-US)
    + transitionend 事件 (en-US)
    + transitionrun 事件 (en-US)
    + transitionstart 事件 (en-US)
    + unhandledrejection 事件
    + unload 事件
    + vrdisplayactivate 事件 (en-US)
    + vrdisplayblur 事件 (en-US)
    + vrdisplayconnect 事件 (en-US)
    + vrdisplaydeactivate 事件 (en-US)
    + vrdisplaydisconnect 事件 (en-US)
    + vrdisplayfocus 事件 (en-US)
    + vrdisplaypointerrestricted 事件 (en-US)
    + vrdisplaypointerunrestricted 事件 (en-US)
    + vrdisplaypresentchange 事件 (en-US)
* `Worker`
    + messageerror 事件
    + message 事件
* `WorkerGlobalScope` (en-US)
    + languagechange 事件 (en-US)
* `XMLHttpRequest`
    + abort 事件
    + error 事件
    + loadend 事件
    + loadstart 事件
    + load 事件
    + progress 事件
    + timeout 事件
* `XRReferenceSpace` (en-US)
    + reset 事件 (en-US)
* `XRSession` (en-US)
    + end 事件 (en-US)
    + inputsourceschange 事件 (en-US)
    + selectend 事件 (en-US)
    + selectstart 事件 (en-US)
    + select 事件 (en-US)
    + squeezeend 事件 (en-US)
    + squeezestart 事件 (en-US)
    + squeeze 事件 (en-US)
    + visibilitychange 事件 (en-US)
* `XRSystem` (en-US)
    + devicechange 事件 (en-US)
规范
--

| Specification |
| --- |
| HTML Standard # events-2 |


WebDriver

WebDriver
=========

WebDriver 是远程控制接口，可以对用户代理进行控制。它提供了一个平台和中立语言协议结构，作为进程外程序远程指导 web 浏览器行为的方法。

具备编写可以在不同平台上的许多浏览器中互换运行的指令集的能力，对于向用户提供一致的体验至关重要。随着网络平台的新一轮发展，设备多样性的增加以及对技术之间真正的互操作性的要求，WebDriver 提供了跨浏览器测试的工具。

WebDriver 所提供的是一组接口，用于发现和操作网络文档中的 DOM 元素，并控制用户代理的行为。它的主要目的是让 web 作者编写测试，从单独的控制过程中实现用户代理的自动化，但也可以用这样的方式，让浏览器内的脚本控制一个（单独的）浏览器。

使用方法
----

那么，WebDriver 可以让你做什么，它又是什么样子的？由于 WebDriver 是编程语言中立的，这个问题的答案取决于你所使用的 WebDriver 客户端和语言的选择。

使用一个用流行的 Python 语言编写的客户端，与 WebDriver 的互动可能看起来像这样：

```python
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.expected_conditions import presence_of_element_located

with webdriver.Firefox() as driver:

    driver.get("http://google.com/ncr")
    wait = WebDriverWait(driver, 10)
    driver.find_element(By.NAME, "q").send_keys("cheese" + Keys.RETURN)
    wait.until(presence_of_element_located((By.XPATH, '//\*[@id="rcnt"]')))
    results = driver.find_elements(By.XPATH, "//a[@href]")

    for i, elem in enumerate(results):
        print(f'#{i} {elem.text} ({elem.get\_attribute("href")})')
```

它可能会输出：
```

#1 Cheese - Wikipedia (https://en.wikipedia.org/wiki/Cheese)
```

参考
--

### 命令

命令 (en-US)

### 类型

类型

* 错误对象 (en-US)
* 超时对象 (en-US)
* WebElement
* WebWindow
### 能力

能力 (en-US)

### 错误

错误 (en-US)

规范
--

* WebDriver
参见
--

* 跨浏览器测试
* Selenium 文档


XSLT：可扩展样式表语言转换

XSLT：可扩展样式表语言转换
===============

**可扩展样式表语言转换**（XSLT）是一种基于 XML 的语言，和专门的处理软件一起使用，用于 XML 文档转换。

虽然这个处理过程被称作“转换”，但并没有改变原始文档，而是在原文档内容的基础上创建了一个新的 XML 文档。然后，这个新文档会被处理器序列化（输出）为标准的 XML 语法或其他格式（如 HTML 或纯文本）。

XSLT 最常用于不同 XML 模式间的数据转换，或用于将 XML 数据转换为网页或 PDF 文档。

文档
--

XSLT 元素参考 (en-US)

参考。

使用 XSLT 转换 XML

XSLT 允许样式表作者以两种重要的方式转换主 XML 文档：对内容进行操作或排序，包括根据需要对其进行整体重新排序，以及将内容转换为不同的格式。

使用 Mozilla JavaScript 接口进行 XSL 转换 (en-US)

文档描述了 Mozilla 1.2 及以上版本中 XSLT 处理引擎的 JavaScript 接口。

使用处理指令指定参数 (en-US)

Firefox 允许在使用 `<?xml-stylesheet?>` 处理指令时指定样式表参数。这是通过文档中描述的 `<?xslt-param?>` 处理指令完成的。

XSLT 教程

此 W3Schools 教程指导读者如何使用 XSLT 将 XML 文档转换为其他格式（如 XHTML）。

什么是 XSLT？

对 XSLT 和 XPath 的详尽介绍，假设读者先前不了解这些技术，并引导读者了解背景、上下文、结构、概念和介绍性的术语。

XSLT 的常见错误 (en-US)

本文列出了在 Firefox 中使用 XSLT 时的一些常见问题。

相关主题
----

* XML、XPath


无障碍

无障碍
===

**无障碍**（Accessibility，常被缩写为 **A11y**，因为它以“a”开头，后跟 11 个字母，以“y”结尾）在 web 开发中意味着使尽可能多的人能够使用网站，即使有些用户的能力在某种程度上受限。

对大多数人来说，技术让生活更便捷。而对于有障碍的人群，技术使一切皆有可能。无障碍化意味着设计出尽可能没有使用障碍的内容，无论访问者的身体情况、认知能力以及他们访问 web 的方式是怎样的。

“**Web 从根本上是为所有人设计的**，无论他们的硬件、软件、语言、位置或能力如何。当 web 达到这一目标时，具有不同听力、运动、视觉和认知能力的人都可以访问它。”（W3C——无障碍）

主要教程
----

MDN 无障碍学习区包含现代的最新教程，涵盖以下无障碍性要点：

什么是无障碍？

这篇文章很好地初步介绍了无障碍化的实际情况——包括我们需要考虑哪些人群以及为什么，不同的人用什么工具与 Web 进行交互，以及如何在网站开发的流程中加入无障碍设计。

HTML：无障碍性的良好基础

只需确保以恰当的方式使用正确的 HTML 元素，很多 web 内容就能实现无障碍化。本文详细介绍如何使用 HTML 来实现最大程度的无障碍化。

CSS 和 JavaScript 无障碍最佳做法

如果使用得当，CSS 和 JavaScript 也能提供无障碍的 web 体验。倘若误用，无障碍性会明显受损。本文列出了一些 CSS 和 JavaScript 最佳实践，即使是复杂的内容，也能尽可地确保无障碍。

WAI-ARIA 基础知识

如前文所述，在涉及无语义 HTML 和 JavaScript 动态更新的内容时，制作复杂的 UI 控件可能很困难。借助 WAI-ARIA 技术来添加额外的语义，使得浏览器和无障碍技术可以识别和使用这些控件，并让用户了解网页实际情况。这里我们将介绍这种技术的基础知识，并用它改善无障碍性。

多媒体无障碍化

多媒体也是一类可能需要无障碍化的内容——视频、音频、图像等都需要给出适当的文本替代，以便可以被辅助性技术及其用户来理解。本文就介绍了以上内容。

移动设备的无障碍

使用移动设备访问 web 越来越流行，而同时，iOS、Android 等主流移动平台也拥有日趋完善的辅助工具，让你的网站内容在这些平台上做到无障碍化自然很重要。本文将介绍移动设备领域的无障碍化注意事项。

其他文章
----

了解 Web 内容无障碍功能指南 (en-US)

这组文章提供了快速解释，以帮助你了解需要采取的步骤，以符合 W3C web 内容无障碍指南 2.0（WCAG 2.0 或简称 WCAG，出于撰文需要）的建议。

色彩与无障碍简介 (en-US)

本文探讨了我们对于亮度和色彩的感知，并提供了如何在无障碍设计中使用色彩的基础知识，也演示了视觉与可读内容的最佳实践。

可通过键盘导航的 JavaScript 小部件 (en-US)

直到目前，web 开发人员仍缺乏合适的技术使基于 `<div>` 和 `<span>` 的自定义组件无障碍化。**对键盘的无障碍性**是最基础的无障碍要求之一，开发者应当了解这一内容。

ARIA (en-US)

学习如何利用无障碍富互联网应用（Accessible Rich Internet Application）使你的 HTML 文档进一步无障碍化的一组文章。

移动无障碍化清单

本文档向移动应用开发者提供了实现无障碍化所需内容的简明清单。

认知无障碍 (en-US)

本文说明了如何确保你创造的 web 内容对认知障碍群体是无障碍的。

对癫痫症患者的无障碍 (en-US)

对于伴有特定脑部缺陷的群体，web 上的某些视觉内容可能导致他们出现癫痫症状。本文可以帮助你理解哪一类内容会有这些问题，并提供了避开这些问题的策略与工具。

参见
--

* WAI 兴趣组
* 开发者指南


XML (可扩展标记语言)

XML (可扩展标记语言)
=============

**可扩展标记语言**是可由文档对象模型 (DOM)严格序列化的一种语言。

XML 简介XML（Extensible Markup Language）是一种类似于 HTML，但是没有使用预定义标记的语言。因此，可以根据自己的设计需求定义专属的标记。这是一种强大将数据存储在一个可以存储、搜索和共享的格式中的方法。最重要的是，因为 XML 的基本格式是标准化的，如果你在本地或互联网上跨系统或平台共享或传输 XML，由于标准化的 XML 语法，接收者仍然可以解析数据。

解析或序列化 XML有时，你可能需要解析 XML 内容，并把它转换为 DOM 树，或者，反过来将现有的 DOM 树序列化成 XML。在本文中，我们将了解 web 平台提供的对象，以便轻松地完成序列化和解析 XML 的常见任务。


Web 性能

Web 性能
======

Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速打开，动画是否平滑？Web 性能既包括客观的度量如加载时间，每秒帧数和到页面可交互的时间；也包括用户的对页面内容加载时间的主观感觉。

页面响应时间越长，越多的用户就会放弃该网站。重要的是，通过使体验尽可能早地变得可用和交互，同时异步地加载长尾体验部分，来最大程度地减少加载和响应时间，并添加其他功能以降低延迟。

有很多工具，API 和最佳实践帮助我们测量和改进网页性能。本章对此有所讲解。

关键性能指南
------

CSS 动画与 JavaScript 动画的性能对众多应用程序而言，动画对提供友好的用户体验有着关键的作用。我们有很多方式生成 web 动画，比如 CSS `transition` 和 `animation` 或者基于 JavaScript 的动画（使用 `Window.requestAnimationFrame`）。在这篇文章中，我们分析 CSS 动画和 JavaScript 动画的性能差异。

优化启动性能一个在软件应用开发中经常被忽视的方面—即便在那些专注于性能优化的软件中—就是启动时的表现。你的应用需要花费多长时间启动？当应用加载时是否会卡住用户的设备或浏览器？这会让用户担心你的应用崩溃了，或者哪儿出错了。花时间确保你的应用能够更好地启动总是一个好主意。这篇文章提供了一些技巧和建议来帮助你达成这个目标，不管是在写一个新的应用还是从其他平台向 Web 移植一个应用。

使用 dns-prefetch**`DNS-prefetch`** 尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。

关键渲染路径**关键渲染路径**是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了 文档对象模型(DOM)，CSS 对象模型 (CSSOM)，渲染树和布局。

懒加载**延迟加载**（懒加载）是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。这是一种缩短关键渲染路径长度的方法，可以缩短页面加载时间。

渲染页面：浏览器的工作原理页面内容快速加载和流畅的交互是用户希望得到的 Web 体验，因此，开发者应力争实现这两个目标。

初学者教程
-----

MDN Web 性能学习专区有着涵盖性能要素的最新教程。如果你是性能新手，请从这里开始：

Web 性能：概述 (en-US)

Web 性能学习路径概述。在这里开始你的旅程。

什么是 Web 性能？

该文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。

用户如何看待性能？

比网站在毫秒内响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳练习来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。

Web 性能基础

除了 HTML，CSS，JavaScript 和媒体文件这些前端模块之外，还有其他影响 Web 性能的因素，它们可能会导致应用程序变慢，或在主观和客观上使应用程序变快。有许多与 Web 性能相关的 API、开发人员工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。

HTML 性能特性

标签的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性，包括样式、脚本、媒体和第三方脚本等内容，可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。

多媒体：图像与视频

Web 性能的最小代价通常是媒体优化。基于每个用户代理的能力、大小和像素密度来服务不同的媒体文件已成为可能。另外，如从背景图像中删除音频轨迹，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保影响尽可能小的方法。

CSS 性能特性

CSS 对于提高性能来说可能是一个不太重要的优化点，但是某些 CSS 特性对性能的影响比其他特性更大。在该文中，我们将研究一些影响性能的 CSS 属性，并提供样式处理的建议方法，以确保性能不受负面影响。

JavaScript 性能最佳实践

如果正确使用 JavaScript，则可以提供交互式和身临其境的 Web 体验——否则可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。

移动端性能

随着移动设备上的 Web 访问普及，并且所有移动平台都具有功能完善的 Web 浏览器，但由于受限于带宽、CPU、电池续航等因素，因此考虑这些平台上 Web 内容的性能非常重要。本文着眼于特定于移动设备的性能注意事项。

使用 Performance API
------------------

Performance API

该指南介绍了如何使用 High-Resolution Time 标准中定义的 `Performance` 接口。

Resource Timing API

资源加载和定时加载这些资源，包括管理资源缓冲区和处理 CORS

User Timing API

使用创建特定于应用程序的时间戳 user timing API 的“标记”和“度量”条目类型——它们是浏览器性能时间轴的一部分。

Beacon API (en-US)

使用 Beacon 接口调度发送给服务器的异步非阻塞请求。

Intersection Observer API (en-US)

通过 Intersection Observer API 学习对元素可见性的监测，并在关注的元素变得可见时被异步通知。

其他文档
----

开发者工具中与性能相关的功能

本节提供有关如何使用和理解开发人员工具中的性能特性的信息，包括 Waterfall、Call Tree 和 Flame Charts (en-US)。

使用内置分析器进行分析

了解如何使用 Firefox 的内置分析器来分析应用程序性能。

各种术语
----

* Beacon (en-US)
* Brotli 压缩
* 客户端提示 (en-US)
* 代码拆分
* CSSOM
* 域名分片
* 有效连接类型 (en-US)
* 首次内容绘制 (en-US)
* 首次 CPU 空闲 (en-US)
* 首次输入延迟 (en-US)
* 首次交互 (en-US)
* 首次有效绘制 (en-US)
* 首次绘制
* HTTP
* HTTP/2
* 卡顿（Jank）
* 延迟
* 懒加载 (en-US)
* 长任务 (en-US)
* 无损压缩 (en-US)
* 有损压缩 (en-US)
* 主线程
* 代码缩减 (en-US)
* 网络节流 (en-US)
* 包 (en-US)
* 页面加载时间 (en-US)
* 页面预测 (en-US)
* 解析
* 感知性能 (en-US)
* Prefetch
* Prerender (en-US)
* QUIC (en-US)
* RAIL
* 真实用户监控 (en-US)
* Resource Timing (en-US)
* 来回通讯延迟（RTT） (en-US)
* Server Timing (en-US)
* Speculative parsing
* 速度指标 (en-US)
* SSL
* 综合监控 (en-US)
* TCP 握手 (en-US)
* TCP 慢开始
* 第一字节时间
* 可交互时间 (en-US)
* TLS
* 传输控制协议（TCP）
* 摇树（Tree shaking）
* Web 性能 (en-US)
参见
--

HTML

* `<picture>` 元素
* `<video>` 元素
* `<source>` 元素
* `<img> srcset` 属性
    + 响应式图片
* 使用 `rel="preload"` 以预加载内容——https://w3c.github.io/preload/

CSS

* will-change
* GPU v CPU
* 布局测量
* 字体加载最佳实践

JavaScript

* DOMContentLoaded
* 垃圾回收（GC）
* requestAnimationFrame

API

* Performance API
* Navigation Timing API
* Media Capabilities API (en-US)
* Network Information API
* PerformanceNavigationTiming
* Battery Status API
* Navigator.deviceMemory
* Intersection Observer
* 使用 User Timing API
* Long Tasks API
* High Resolution Timing API（https://w3c.github.io/hr-time/)）
* Resource Timing API
* Page Visibility
* 基于 Background Tasks API 的后台任务调度
    + requestIdleCallback()
* Beacon API
* Resource Hints - dns-prefetch, preconnect, prefetch, and prerender
* FetchEvent.preloadResponse (en-US)
* Performance Server Timing API (en-US)

标头

* Content-encoding
* HTTP/2
* gZip
* 客户端提示

工具

* 开发者工具中的性能工具

额外的指标

* 速度指数和感知速度指数

最佳实践

* 使用 Service Worker
* 使用 Web Worker
    + Web Worker API
* PWA
* 缓存
* 内容分发网络（CDN）


Web 媒体技术

Web 媒体技术
========

逐年来，Web 呈现、创建并管理音频、视频和其他媒体的能力以不断增长的步伐发展。今日有着大量可用的 API、HTML 元素、DOM 界面和其他不仅仅限于完成这些任务，而是为了将媒体和其他技术联合使用以实现非凡事物的特性可供使用。这篇文章列出了可能对你掌握这些技术有帮助的多种 API 与其文档链接。

参考资料
----

### HTML

这些文章包含了供媒体开发者使用的 HTML 特性。

`<audio>`

`<audio>` 元素用于在 Web 上下文中播放音频。这可以用于复杂媒体的隐性目标，亦或是用户控制播放音频的可见控制。可以通过 JavaScript `HTMLAudioElement` 对象访问。

`<video>`

`<video>` 元素是 Web 上下文中视频内容的端点。其可以简单地用于呈现视频，亦或是流式视频的目标。`<video>` 也可以用于连接媒体 API 和其他 HTML 与 DOM 技术，比如 `<canvas>`（用于抓取并控制框中内容)，例如，可以通过 JavaScript `HTMLVideoElement` 对象访问。

`<track>`

`<track>` 元素可以被放置在 `<audio>` 或者 `<video>` 元素内部，当在媒体播放时，以提供 WebVTT 格式化字幕或标题轨道的参考。可以通过 JavaScript `HTMLTrackElement` (en-US) 对象访问。

`<source>`

`<source>` 元素可以放在 `<audio>` 或者 `<video>` 元素内部，以指定当前显示的源媒体。可以使用多个不同格式、大小、分辨率的媒体源。可以通过 JavaScript `HTMLSourceElement` (en-US) 对象访问。

### API 接口

媒体功能 API (en-US)

媒体功能 API 可以确定运行你的应用程序或网站的设备的编码和解码能力，让你实时决定使用的格式以及时机。

媒体捕获和流媒体 API

使得串流、播放和控制本地和网络媒体成为可能的 API 参考文献。包括使用本地摄像头与麦克风来抓取视频、音频和静止图片。

媒体会话 API (en-US)

媒体会话 API 提供了一种定制媒体通知的方法。它通过提供元数据，让用户代理显示你的网络应用程序正在播放的媒体。它还提供了行动处理程序，浏览器可以用来访问平台媒体键，如键盘、耳机、遥控器上的硬件键，以及通知区和移动设备锁屏上的软件键。

媒体流录制 API

媒体流录制 API 允许你捕获媒体流并处理或过滤数据，或者将其保存在磁盘上。

网络音频 API

网络音频 API 允许你生成、过滤并调节实时与预录的音频材料，并将其发送至 `<audio>` 元素、媒体流或磁盘中。

WebRTC

WebRTC（网页即时通信）可以使互联网上任意两位用户在无需媒介的情况下中串流实时音频、视频和任意数据。

指南
--

在 HTML 中使用音频和视频资源 (en-US)

这里是一篇使用 HTML `<audio>` 和 `<video>` 元素的指南。

Web 设计中的媒体无障碍指南

在本指南中，我们将介绍 web 设计人员和开发人员创建的内容能让具有不同能力的人可以访问的方法。这个范围包括从 `<img>` 元素上简单地使用 `alt` 属性到为屏幕阅读者提供字幕标记的媒体。

Web 媒体类型和格式指南

关于文件类型和编解码器对于 web 上的图像、音频和视频媒体有效的指南。这包括使用何种格式处理什么内容的建议、最佳实践，以及如何提供后备方案和如何对媒体类型进行优先排序，还包括针对每个媒体容器和编解码器的一般浏览器支持信息。

音频和视频推流 (en-US)

该指南涵盖了如何进行音频和视频流推送，以及你可以利用的技巧和技术，以确保你的流媒体的最佳质量和/或性能。

媒体和 Web 音频 API 自动播放指南

出乎意料的自动播放媒体或音频对用户来说可能是一个不受欢迎的惊喜。虽然自动播放是有目的的，但应该谨慎使用。为了让用户控制这一点，许多浏览器现在都提供了自动播放阻塞的形式。本文是关于自动播放的指南，提供了一些技巧，告诉你何时以及如何使用它，以及如何使用浏览器优雅地处理自动播放阻塞。

Web 音频空间化基础

3D 环境既可以是渲染到屏幕上的 3D 场景，也可以是使用头盔体验的混合现实场景，重要的是音频的表现要让它听起来像来自其来源的方向。本指南涵盖了如何实现这一点。

其他主题
----

你可能会感兴趣的相关主题，因为这些技术可以用有趣的方式与媒体 API 共同使用。

Canvas API

Canvas API 允许你在 `<canvas>` 上绘画、操纵并改变图像内容。这样可以与媒体以多种方式使用，包括设置 `<canvas>` 元素作为视频播放或摄像头捕获的终点以捕获或操纵视频帧。

WebGL

WebGL 在已存在的 Canvas API 上提供了与 OpenGL ES 兼容的 API，使得在 Web 上制作强大的 3D 图像成为可能。通过一张画布，这可以用于为媒体内容添加 3D 图像。

WebXR

作为取代 WebVR API 的存在，WebXR 是一种支持创建虚拟现实（VR）和增强现实 (AR) 内容的技术。混合现实内容可以显示在设备的屏幕上，或者是显示在目镜或耳机内。

WebVR
已弃用

Web Virtual Reality API 支持虚拟现实（VR）设备，如 Oculus Rift 或 HTC Vive，使开发人员能够将用户的位置和移动转换为 3D 场景中的移动，然后在设备上显示。WebVR 已经被 WebXR 所取代，并将从浏览器中移除。


渐进式 Web 应用（PWA）

渐进式 Web 应用（PWA）
===============

**渐进式 Web 应用**（Progressive Web App，PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。

它像网站一样，PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。

指南
--

这些指南对 PWA 的不同方面进行了概念性的解释。它们的目的是帮助你了解 PWA 可以实现哪些事情，并提供足够的指南来帮助你了解如何实现它们。

什么是渐进式 web 应用？

PWA 的介绍，将其与传统网站和特定平台的应用程序进行比较，并概述了其主要特点。

让 PWA 易于安装

PWA 的一个决定性方面是它可以安装在设备上，然后作为一个平台特定的应用出现在用户面前，是他们设备的一个永久功能。PWA 应用可以像其他应用一样直接从操作系统中启动。在本指南中，我们将探讨“可安装”意味着什么，PWA 需要提供什么才能被安装，以及如何定制安装体验。

离线与后台操作

在本指南中，我们将介绍一组技术，使 PWA 即使在设备有间歇性网络连接时也能提供良好的用户体验，并在后台执行操作，即使主应用程序没有运行。

PWA 的最佳实践

PWA 应该适应不同的浏览器和设备，可以访问，有良好的性能，并与操作系统很好地整合。本指南提供了一个最佳实践的清单，以帮助你确保你的 PWA 尽可能运行顺利。

技术指南
----

这些指南对如何实现特定的 PWA 功能给出了具体详细的说明。

创建独立应用 (en-US)

描述了如何指定 PWA 在启动时应在自己的专用窗口中启动，而不是浏览器标签。

自定义应用的颜色 (en-US)

描述了如何为 PWA 设置背景和主题颜色。

显示徽章 (en-US)

描述了如何在 PWA 的图标上显示一个徽章：例如，让用户知道他们收到了新的消息。

将常用 app 动作暴露为快捷方式 (en-US)

描述了如何为可从操作系统的应用程序快捷菜单中启动的 PWA 暴露常见的动作。

在应用间共享数据 (en-US)

描述了 PWA 如何通过使用操作系统的应用共享机制来相互共享数据。

从你的 PWA 中触发安装 (en-US)

描述了开发者如何提供自己的用户界面来邀请用户安装他们的 PWA。

将文件与你的 PWA 建立联系 (en-US)

描述了如何在文件类型和你的 PWA 之间建立关联，以便当用户点击文件时，启动你的 PWA 来处理它。

参考
--

你将用于建立 PWA 的 web 技术的参考文件。

### Web 应用清单

Web 应用清单成员

开发人员可以使用 web 应用清单成员来描述 PWA，定制其外观，并更深入地将其整合到操作系统中。

### Service Worker API

#### 与应用进行通信

Service worker 可使用以下 API 与其相关的 PWA 客户端进行通信：

`Client.postMessage()`

允许 service worker 向其 PWA 客户端发送一个消息。

Broadcast Channel API

允许 service worker 和它的 PWA 客户端建立一个基本的双向通信通道。

#### 离线操作

Service worker 可以使用以下 API 来使你的应用程序在离线状态下工作：

`Cache`

HTTP 响应的持久性存储机制，用于存储资源，在应用程序离线时可以重复使用。

`Clients`

一个用于提供对由 service worker 控制的文件访问接口。

`FetchEvent`

一个事件，随着 PWA 客户端发出的每个 HTTP 请求而在 service worker 中派发。该事件可用于像正常一样将请求发送到服务器并保存响应以供将来使用，或者拦截请求并立即用先前缓存的响应进行响应。

#### 后台操作

以下 API 可以被 service worker 用来在后台执行任务，即使你的应用程序没有运行：

Background Synchronization API (en-US)

一旦有了稳定的网络连接，就可以将任务推迟到 service worker 中运行的一种方法。

Web Periodic Background Synchronization API (en-US)

一种注册任务的方式，以便在网络连接存在时周期性的在 service worker 中运行。

Background Fetch API (en-US)

一种用于 service worker 管理可能需要大量时间的下载的方法，如视频或音频文件。

### 其他 web API

IndexedDB

一个用于大量结构化数据的客户端存储 API，包括文件。

Badging API (en-US)

一种在应用图标上设置徽章的方法，提供低打扰性的通知。

Notifications API

一种发送通知的方式，这些通知在操作系统层面显示。

Web Share API (en-US)

一种将文本、链接、文件和其他内容分享给用户在其设备上选择的其他应用程序的机制。

Window Controls Overlay API (en-US)

为安装在桌面操作系统上的 PWA 提供的 API，能够隐藏默认的窗口标题栏，使应用能够在应用窗口的整个表面区域显示。

参见
--

* web.dev 上的渐进式 web 应用
* web.dev 上的学习 PWA
* learn.microsoft.com 上的渐进式 web 应用（2023 年 1 月 24 日）


Web API 接口参考

Web API 接口参考
============

在编写 Web 代码时，有许多 Web API 可供调用。下面是开发 Web 应用程序或网站时可能使用的所有 API 和接口（对象类型）的列表。

Web API 主要用于 JavaScript，但也可能有例外。

规范
--

这是一个所有可用 API 的列表。

### A

* Audio Output Devices API (en-US)
实验性

### B

* Background Fetch API (en-US)
实验性
* Background Sync (en-US)
实验性
* Background Tasks
* Badging API (en-US)
* Barcode Detection API
实验性
* Battery API
* Beacon
* Bluetooth API (en-US)
实验性
* Broadcast Channel API

### C

* CSS Counter Styles
* CSS Custom Highlight API
* CSS Font Loading API
* CSS Painting API (en-US)
实验性
* CSS Properties and Values API
* CSS Typed Object Model API (en-US)
* CSSOM
* Canvas API
* Channel Messaging API
* Clipboard API
* Compression Streams API
* Console API
* Contact Picker API (en-US)
实验性
* Content Index API (en-US)
实验性
* Cookie Store API (en-US)
实验性
* Credential Management API

### D

* DOM
* Device Memory API (en-US)
* Device Orientation Events (en-US)
* Document Picture-in-Picture API (en-US)
实验性

### E

* EditContext API (en-US)
实验性
* Encoding API
* Encrypted Media Extensions (en-US)
* EyeDropper API
实验性

### F

* FedCM API (en-US)
实验性
* Fetch API
* File API
* File System API
* File and Directory Entries API
* Force Touch Events
非标准
* Fullscreen API

### G

* Gamepad API
* Geolocation API
* Geometry Interfaces (en-US)

### H

* HTML DOM
* HTML Drag and Drop API
* HTML Sanitizer API (en-US)
实验性
* History API
* Houdini API

### I

* Idle Detection API (en-US)
实验性
* Image Capture API (en-US)
实验性
* IndexedDB
* Ink API (en-US)
实验性
* Input Device Capabilities API (en-US)
实验性
* Insertable Streams for MediaStreamTrack API (en-US)
* Intersection Observer API

### K

* Keyboard API (en-US)
实验性

### L

* Launch Handler API (en-US)
实验性
* Local Font Access API
实验性

### M

* Media Capabilities API (en-US)
* Media Capture and Streams
* Media Session API (en-US)
* Media Source Extensions
实验性
* MediaStream Recording

### N

* Navigation API (en-US)
实验性
* Network Information API
实验性

### P

* Page Visibility API
* Payment Handler API (en-US)
实验性
* Payment Request API
* Performance API
* Periodic Background Sync (en-US)
实验性
* Permissions API (en-US)
* Picture-in-Picture API
* Pointer Events
* Pointer Lock API
* Popover API (en-US)
* Presentation API (en-US)
实验性
* Prioritized Task Scheduling API (en-US)
* Push API

### R

* Remote Playback API (en-US)
* Reporting API (en-US)
实验性
* Resize Observer API

### S

* SVG (en-US)
* Screen Capture API
* Screen Orientation API (en-US)
* Screen Wake Lock API (en-US)
* Selection API (en-US)
* Sensor API
* Server Sent Events
* Service Workers API
* Shared Storage API (en-US)
实验性
* Speculation Rules API (en-US)
实验性
* Storage
* Storage Access API (en-US)
* Streams

### T

* Touch Events
* Trusted Types API (en-US)

### U

* UI Events (en-US)
* URL API
* URL Pattern API (en-US)
实验性
* User-Agent Client Hints API (en-US)
实验性

### V

* Vibration API
* View Transitions API
实验性
* VirtualKeyboard API (en-US)
实验性
* Visual Viewport (en-US)

### W

* Web Animations
* Web Audio API
* Web Authentication API
* Web Components
* Web Crypto API
* Web Locks API
* Web MIDI API (en-US)
* Web NFC API (en-US)
实验性
* Web Notifications
* Web Serial API (en-US)
实验性
* Web Share API (en-US)
* Web Speech API
* Web Storage API
* Web Workers API
* WebCodecs API
* WebGL
* WebGPU API
实验性
* WebHID API (en-US)
实验性
* WebOTP API (en-US)
* WebRTC
* WebTransport API (en-US)
* WebUSB API (en-US)
实验性
* WebVR API
非标准

已弃用
* WebVTT
* WebXR Device API
实验性
* Websockets API
* Window Controls Overlay API (en-US)
实验性
* Window Management API (en-US)
实验性

### X

* XMLHttpRequest API (en-US)

接口
--

这是一个所有接口（即对象类型）的列表。

### A

* `AbortController`
* `AbortSignal`
* `AbsoluteOrientationSensor` (en-US)
* `AbstractRange` (en-US)
* `Accelerometer` (en-US)
实验性
* `AesCbcParams` (en-US)
* `AesCtrParams` (en-US)
* `AesGcmParams` (en-US)
* `AesKeyGenParams` (en-US)
* `AmbientLightSensor`
实验性
* `AnalyserNode`
* `ANGLE_instanced_arrays`
* `Animation`
* `AnimationEffect` (en-US)
* `AnimationEvent` (en-US)
* `AnimationPlaybackEvent` (en-US)
* `AnimationTimeline`
* `Attr`
* `AudioBuffer`
* `AudioBufferSourceNode`
* `AudioContext`
* `AudioData` (en-US)
实验性
* `AudioDecoder` (en-US)
实验性
* `AudioDestinationNode`
* `AudioEncoder` (en-US)
实验性
* `AudioListener`
* `AudioNode`
* `AudioParam`
* `AudioParamDescriptor`
* `AudioParamMap` (en-US)
* `AudioProcessingEvent` (en-US)
已弃用
* `AudioScheduledSourceNode`
* `AudioSinkInfo` (en-US)
实验性
* `AudioTrack`
* `AudioTrackList` (en-US)
* `AudioWorklet` (en-US)
* `AudioWorkletGlobalScope` (en-US)
* `AudioWorkletNode`
* `AudioWorkletProcessor`
* `AuthenticatorAssertionResponse` (en-US)
* `AuthenticatorAttestationResponse` (en-US)
* `AuthenticatorResponse` (en-US)

### B

* `BackgroundFetchEvent` (en-US)
实验性
* `BackgroundFetchManager` (en-US)
实验性
* `BackgroundFetchRecord` (en-US)
实验性
* `BackgroundFetchRegistration` (en-US)
实验性
* `BackgroundFetchUpdateUIEvent` (en-US)
实验性
* `BarcodeDetector`
实验性
* `BarProp` (en-US)
* `BaseAudioContext` (en-US)
* `BatteryManager`
* `BeforeInstallPromptEvent`
实验性

非标准
* `BeforeUnloadEvent`
* `BiquadFilterNode`
* `Blob`
* `BlobEvent` (en-US)
* `Bluetooth`
实验性
* `BluetoothCharacteristicProperties` (en-US)
实验性
* `BluetoothDevice` (en-US)
实验性
* `BluetoothRemoteGATTCharacteristic` (en-US)
实验性
* `BluetoothRemoteGATTDescriptor` (en-US)
实验性
* `BluetoothRemoteGATTServer` (en-US)
实验性
* `BluetoothRemoteGATTService` (en-US)
实验性
* `BluetoothUUID` (en-US)
* `BroadcastChannel`
* `ByteLengthQueuingStrategy`

### C

* `Cache`
* `CacheStorage`
* `CanMakePaymentEvent` (en-US)
实验性
* `CanvasCaptureMediaStreamTrack`
* `CanvasGradient`
* `CanvasPattern`
* `CanvasRenderingContext2D`
* `CaptureController` (en-US)
实验性
* `CaretPosition`
实验性
* `CDATASection`
* `ChannelMergerNode`
* `ChannelSplitterNode` (en-US)
* `CharacterBoundsUpdateEvent` (en-US)
实验性
* `CharacterData`
* `Client`
* `Clients`
* `Clipboard`
* `ClipboardEvent`
* `ClipboardItem` (en-US)
* `CloseEvent`
* `Comment`
* `CompositionEvent`
* `CompressionStream`
* `console`
* `ConstantSourceNode` (en-US)
* `ContactAddress` (en-US)
实验性
* `ContactsManager` (en-US)
实验性
* `ContentIndex` (en-US)
实验性
* `ContentIndexEvent` (en-US)
实验性
* `ContentVisibilityAutoStateChangeEvent`
实验性
* `ConvolverNode`
* `CookieChangeEvent` (en-US)
实验性
* `CookieStore` (en-US)
实验性
* `CookieStoreManager` (en-US)
实验性
* `CountQueuingStrategy`
* `Credential` (en-US)
* `CredentialsContainer`
* `Crypto`
* `CryptoKey`
* `CryptoKeyPair` (en-US)
* `CSPViolationReportBody` (en-US)
* `CSS`
* `CSSAnimation` (en-US)
* `CSSConditionRule`
* `CSSContainerRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesRule` (en-US)
* `CSSFontPaletteValuesRule` (en-US)
* `CSSGroupingRule`
* `CSSImageValue` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSKeywordValue` (en-US)
* `CSSLayerBlockRule` (en-US)
* `CSSLayerStatementRule` (en-US)
* `CSSMathInvert` (en-US)
* `CSSMathMax` (en-US)
* `CSSMathMin` (en-US)
* `CSSMathNegate` (en-US)
* `CSSMathProduct` (en-US)
* `CSSMathSum`
* `CSSMathValue` (en-US)
* `CSSMatrixComponent` (en-US)
* `CSSMediaRule`
* `CSSNamespaceRule` (en-US)
* `CSSNumericArray` (en-US)
* `CSSNumericValue` (en-US)
* `CSSPageRule`
* `CSSPerspective` (en-US)
* `CSSPositionValue` (en-US)
非标准

已弃用
* `CSSPrimitiveValue` (en-US)
已弃用
* `CSSPropertyRule` (en-US)
* `CSSPseudoElement` (en-US)
实验性
* `CSSRotate` (en-US)
* `CSSRule`
* `CSSRuleList`
* `CSSScale` (en-US)
* `CSSScopeRule` (en-US)
实验性
* `CSSSkew` (en-US)
* `CSSSkewX` (en-US)
* `CSSSkewY` (en-US)
* `CSSStartingStyleRule` (en-US)
实验性
* `CSSStyleDeclaration`
* `CSSStyleRule`
* `CSSStyleSheet`
* `CSSStyleValue` (en-US)
* `CSSSupportsRule`
* `CSSTransformComponent` (en-US)
* `CSSTransformValue` (en-US)
* `CSSTransition` (en-US)
* `CSSTranslate` (en-US)
* `CSSUnitValue` (en-US)
* `CSSUnparsedValue` (en-US)
* `CSSValue`
已弃用
* `CSSValueList`
已弃用
* `CSSVariableReferenceValue` (en-US)
* `CustomElementRegistry`
* `CustomEvent`
* `CustomStateSet` (en-US)
实验性

### D

* `DataTransfer`
* `DataTransferItem`
* `DataTransferItemList`
* `DecompressionStream`
* `DedicatedWorkerGlobalScope`
* `DelayNode` (en-US)
* `DeprecationReportBody` (en-US)
实验性
* `DeviceMotionEvent`
* `DeviceMotionEventAcceleration`
* `DeviceMotionEventRotationRate` (en-US)
* `DeviceOrientationEvent`
* `DirectoryEntrySync` (en-US)
非标准

已弃用
* `DirectoryReaderSync` (en-US)
非标准

已弃用
* `Document`
* `DocumentFragment`
* `DocumentPictureInPicture` (en-US)
实验性
* `DocumentPictureInPictureEvent` (en-US)
实验性
* `DocumentTimeline` (en-US)
* `DocumentType`
* `DOMError`
已弃用
* `DOMException`
* `DOMHighResTimeStamp`
* `DOMImplementation`
* `DOMMatrix` (WebKitCSSMatrix)
* `DOMMatrixReadOnly` (en-US)
* `DOMParser`
* `DOMPoint`
* `DOMPointReadOnly` (en-US)
* `DOMQuad`
* `DOMRect`
* `DOMRectReadOnly`
* `DOMStringList`
* `DOMStringMap`
* `DOMTokenList`
* `DragEvent`
* `DynamicsCompressorNode`

### E

* `EcdhKeyDeriveParams` (en-US)
* `EcdsaParams` (en-US)
* `EcKeyGenParams` (en-US)
* `EcKeyImportParams` (en-US)
* `EditContext` (en-US)
实验性
* `Element`
* `ElementInternals` (en-US)
* `EncodedAudioChunk` (en-US)
实验性
* `EncodedVideoChunk` (en-US)
* `ErrorEvent`
* `Event`
* `EventCounts` (en-US)
* `EventSource`
* `EventTarget`
* `ExtendableCookieChangeEvent` (en-US)
* `ExtendableEvent`
* `ExtendableMessageEvent` (en-US)
* `EyeDropper`
实验性

### F

* `FeaturePolicy` (en-US)
实验性
* `FederatedCredential` (en-US)
实验性
* `FetchEvent`
* `File`
* `FileEntrySync` (en-US)
非标准

已弃用
* `FileList`
* `FileReader`
* `FileReaderSync`
* `FileSystem`
* `FileSystemDirectoryEntry`
* `FileSystemDirectoryHandle`
* `FileSystemDirectoryReader` (en-US)
* `FileSystemEntry` (en-US)
* `FileSystemFileEntry`
* `FileSystemFileHandle`
* `FileSystemHandle`
* `FileSystemSync`
非标准

已弃用
* `FileSystemSyncAccessHandle`
* `FileSystemWritableFileStream`
* `FocusEvent`
* `FontData`
实验性
* `FontFace`
* `FontFaceSet`
* `FontFaceSetLoadEvent` (en-US)
* `FormData`
* `FormDataEvent` (en-US)
* `FragmentDirective` (en-US)
实验性

### G

* `GainNode`
* `Gamepad`
* `GamepadButton`
* `GamepadEvent`
* `GamepadHapticActuator` (en-US)
* `GamepadPose`
实验性
* `Geolocation`
* `GeolocationCoordinates`
* `GeolocationPosition`
* `GeolocationPositionError`
* `GestureEvent`
非标准
* `GPU`
实验性
* `GPUAdapter`
实验性
* `GPUAdapterInfo`
实验性
* `GPUBindGroup` (en-US)
实验性
* `GPUBindGroupLayout` (en-US)
实验性
* `GPUBuffer` (en-US)
实验性
* `GPUCanvasContext`
实验性
* `GPUCommandBuffer` (en-US)
实验性
* `GPUCommandEncoder` (en-US)
实验性
* `GPUCompilationInfo` (en-US)
实验性
* `GPUCompilationMessage` (en-US)
实验性
* `GPUComputePassEncoder` (en-US)
实验性
* `GPUComputePipeline` (en-US)
实验性
* `GPUDevice`
实验性
* `GPUDeviceLostInfo` (en-US)
实验性
* `GPUError` (en-US)
实验性
* `GPUExternalTexture` (en-US)
实验性
* `GPUInternalError` (en-US)
实验性
* `GPUOutOfMemoryError` (en-US)
实验性
* `GPUPipelineError` (en-US)
实验性
* `GPUPipelineLayout` (en-US)
实验性
* `GPUQuerySet` (en-US)
实验性
* `GPUQueue` (en-US)
实验性
* `GPURenderBundle` (en-US)
实验性
* `GPURenderBundleEncoder` (en-US)
实验性
* `GPURenderPassEncoder` (en-US)
实验性
* `GPURenderPipeline` (en-US)
实验性
* `GPUSampler` (en-US)
实验性
* `GPUShaderModule` (en-US)
实验性
* `GPUSupportedFeatures` (en-US)
实验性
* `GPUSupportedLimits` (en-US)
实验性
* `GPUTexture` (en-US)
实验性
* `GPUTextureView` (en-US)
实验性
* `GPUUncapturedErrorEvent` (en-US)
实验性
* `GPUValidationError` (en-US)
实验性
* `GravitySensor` (en-US)
* `Gyroscope` (en-US)

### H

* `HashChangeEvent`
* `Headers`
* `HID` (en-US)
实验性
* `HIDConnectionEvent` (en-US)
实验性
* `HIDDevice` (en-US)
实验性
* `HIDInputReportEvent` (en-US)
实验性
* `Highlight` (en-US)
* `HighlightRegistry` (en-US)
* `History`
* `HkdfParams` (en-US)
* `HmacImportParams` (en-US)
* `HmacKeyGenParams` (en-US)
* `HMDVRDevice` (en-US)
非标准

已弃用
* `HTMLAllCollection` (en-US)
* `HTMLAnchorElement` (en-US)
* `HTMLAreaElement`
* `HTMLAudioElement`
* `HTMLBaseElement`
* `HTMLBodyElement`
* `HTMLBRElement`
* `HTMLButtonElement`
* `HTMLCanvasElement`
* `HTMLCollection`
* `HTMLDataElement` (en-US)
* `HTMLDataListElement` (en-US)
* `HTMLDetailsElement`
* `HTMLDialogElement`
* `HTMLDivElement`
* `HTMLDListElement` (en-US)
* `HTMLDocument`
* `HTMLElement`
* `HTMLEmbedElement` (en-US)
* `HTMLFieldSetElement`
* `HTMLFontElement` (en-US)
已弃用
* `HTMLFormControlsCollection` (en-US)
* `HTMLFormElement`
* `HTMLFrameSetElement` (en-US)
已弃用
* `HTMLHeadElement`
* `HTMLHeadingElement` (en-US)
* `HTMLHRElement` (en-US)
* `HTMLHtmlElement`
* `HTMLIFrameElement`
* `HTMLImageElement`
* `HTMLInputElement`
* `HTMLLabelElement` (en-US)
* `HTMLLegendElement` (en-US)
* `HTMLLIElement`
* `HTMLLinkElement` (en-US)
* `HTMLMapElement` (en-US)
* `HTMLMarqueeElement` (en-US)
已弃用
* `HTMLMediaElement`
* `HTMLMenuElement` (en-US)
* `HTMLMenuItemElement` (en-US)
非标准

已弃用
* `HTMLMetaElement` (en-US)
* `HTMLMeterElement` (en-US)
* `HTMLModElement` (en-US)
* `HTMLObjectElement` (en-US)
* `HTMLOListElement` (en-US)
* `HTMLOptGroupElement`
* `HTMLOptionElement`
* `HTMLOptionsCollection` (en-US)
* `HTMLOutputElement` (en-US)
* `HTMLParagraphElement`
* `HTMLParamElement` (en-US)
已弃用
* `HTMLPictureElement` (en-US)
* `HTMLPreElement` (en-US)
* `HTMLProgressElement` (en-US)
* `HTMLQuoteElement` (en-US)
* `HTMLScriptElement`
* `HTMLSelectElement` (en-US)
* `HTMLSlotElement`
* `HTMLSourceElement` (en-US)
* `HTMLSpanElement`
* `HTMLStyleElement`
* `HTMLTableCaptionElement` (en-US)
* `HTMLTableCellElement` (en-US)
* `HTMLTableColElement` (en-US)
* `HTMLTableElement`
* `HTMLTableRowElement` (en-US)
* `HTMLTableSectionElement` (en-US)
* `HTMLTemplateElement`
* `HTMLTextAreaElement`
* `HTMLTimeElement` (en-US)
* `HTMLTitleElement` (en-US)
* `HTMLTrackElement` (en-US)
* `HTMLUListElement` (en-US)
* `HTMLUnknownElement`
* `HTMLVideoElement`

### I

* `IDBCursor`
* `IDBCursorWithValue` (en-US)
* `IDBDatabase`
* `IDBFactory`
* `IDBIndex`
* `IDBKeyRange`
* `IDBLocaleAwareKeyRange` (en-US)
实验性

非标准
* `IDBObjectStore`
* `IDBOpenDBRequest` (en-US)
* `IDBRequest`
* `IDBTransaction`
* `IDBVersionChangeEvent` (en-US)
* `IdentityCredential` (en-US)
实验性
* `IdentityProvider` (en-US)
实验性
* `IdleDeadline`
* `IdleDetector` (en-US)
实验性
* `IIRFilterNode` (en-US)
* `ImageBitmap`
* `ImageBitmapRenderingContext`
* `ImageCapture` (en-US)
实验性
* `ImageData`
* `ImageDecoder` (en-US)
实验性
* `ImageTrack` (en-US)
实验性
* `ImageTrackList` (en-US)
实验性
* `Ink` (en-US)
实验性
* `InkPresenter` (en-US)
实验性
* `InputDeviceCapabilities` (en-US)
实验性
* `InputDeviceInfo` (en-US)
* `InputEvent`
* `InstallEvent`
非标准

已弃用
* `IntersectionObserver`
* `IntersectionObserverEntry`
* `InterventionReportBody` (en-US)
实验性

### K

* `Keyboard` (en-US)
实验性
* `KeyboardEvent`
* `KeyboardLayoutMap` (en-US)
实验性
* `KeyframeEffect` (en-US)

### L

* `LargestContentfulPaint` (en-US)
* `LaunchParams` (en-US)
实验性
* `LaunchQueue` (en-US)
实验性
* `LayoutShift` (en-US)
实验性
* `LayoutShiftAttribution` (en-US)
实验性
* `LinearAccelerationSensor` (en-US)
* `Location`
* `Lock`
* `LockManager`

### M

* `Magnetometer` (en-US)
实验性
* `MathMLElement`
* `MediaCapabilities` (en-US)
* `MediaDeviceInfo` (en-US)
* `MediaDevices`
* `MediaElementAudioSourceNode`
* `MediaEncryptedEvent` (en-US)
* `MediaError` (en-US)
* `MediaKeyMessageEvent` (en-US)
* `MediaKeys` (en-US)
* `MediaKeySession` (en-US)
* `MediaKeyStatusMap` (en-US)
* `MediaKeySystemAccess` (en-US)
* `MediaList`
* `MediaMetadata` (en-US)
* `MediaQueryList`
* `MediaQueryListEvent`
* `MediaRecorder`
* `MediaRecorderErrorEvent` (en-US)
非标准

已弃用
* `MediaSession`
* `MediaSource`
* `MediaSourceHandle` (en-US)
实验性
* `MediaStream`
* `MediaStreamAudioDestinationNode` (en-US)
* `MediaStreamAudioSourceNode`
* `MediaStreamEvent`
非标准

已弃用
* `MediaStreamTrack`
* `MediaStreamTrackAudioSourceNode` (en-US)
* `MediaStreamTrackEvent` (en-US)
* `MediaStreamTrackGenerator` (en-US)
实验性

非标准
* `MediaStreamTrackProcessor` (en-US)
实验性
* `MediaTrackConstraints`
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `MerchantValidationEvent` (en-US)
已弃用
* `MessageChannel`
* `MessageEvent`
* `MessagePort`
* `Metadata` (en-US)
实验性

非标准
* `MIDIAccess`
* `MIDIConnectionEvent`
* `MIDIInput` (en-US)
* `MIDIInputMap` (en-US)
* `MIDIMessageEvent` (en-US)
* `MIDIOutput` (en-US)
* `MIDIOutputMap` (en-US)
* `MIDIPort` (en-US)
* `MimeType`
已弃用
* `MimeTypeArray` (en-US)
已弃用
* `MouseEvent`
* `MouseScrollEvent`
非标准

已弃用
* `MutationEvent` (en-US)
已弃用
* `MutationObserver`
* `MutationRecord`

### N

* `NamedNodeMap`
* `NavigateEvent` (en-US)
实验性
* `Navigation` (en-US)
实验性
* `NavigationCurrentEntryChangeEvent` (en-US)
实验性
* `NavigationDestination` (en-US)
实验性
* `NavigationHistoryEntry` (en-US)
实验性
* `NavigationPreloadManager` (en-US)
* `NavigationTransition` (en-US)
实验性
* `Navigator`
* `NavigatorUAData` (en-US)
实验性
* `NDEFMessage` (en-US)
实验性
* `NDEFReader` (en-US)
实验性
* `NDEFReadingEvent` (en-US)
实验性
* `NDEFRecord` (en-US)
实验性
* `NetworkInformation`
实验性
* `Node`
* `NodeIterator`
* `NodeList`
* `Notification`
* `NotificationEvent`

### O

* `OES_draw_buffers_indexed` (en-US)
* `OfflineAudioCompletionEvent` (en-US)
* `OfflineAudioContext`
* `OffscreenCanvas`
* `OffscreenCanvasRenderingContext2D` (en-US)
* `OrientationSensor` (en-US)
* `OscillatorNode`
* `OTPCredential` (en-US)
实验性
* `OverconstrainedError` (en-US)

### P

* `PageTransitionEvent`
* `PaintWorkletGlobalScope` (en-US)
实验性
* `PannerNode` (en-US)
* `PasswordCredential` (en-US)
实验性
* `Path2D`
* `PaymentAddress` (en-US)
非标准

已弃用
* `PaymentManager` (en-US)
实验性
* `PaymentMethodChangeEvent` (en-US)
* `PaymentRequest` (en-US)
* `PaymentRequestEvent` (en-US)
实验性
* `PaymentRequestUpdateEvent` (en-US)
* `PaymentResponse` (en-US)
* `Pbkdf2Params` (en-US)
* `Performance`
* `PerformanceElementTiming` (en-US)
实验性
* `PerformanceEntry`
* `PerformanceEventTiming` (en-US)
* `PerformanceLongTaskTiming`
实验性
* `PerformanceMark` (en-US)
* `PerformanceMeasure` (en-US)
* `PerformanceNavigation`
已弃用
* `PerformanceNavigationTiming`
* `PerformanceObserver`
* `PerformanceObserverEntryList` (en-US)
* `PerformancePaintTiming`
* `PerformanceResourceTiming`
* `PerformanceServerTiming` (en-US)
* `PerformanceTiming`
已弃用
* `PeriodicSyncEvent` (en-US)
实验性
* `PeriodicSyncManager` (en-US)
实验性
* `PeriodicWave`
* `Permissions`
* `PermissionStatus` (en-US)
* `PictureInPictureEvent` (en-US)
* `PictureInPictureWindow`
* `Plugin`
已弃用
* `PluginArray` (en-US)
已弃用
* `Point` (en-US)
非标准

已弃用
* `PointerEvent`
* `PopStateEvent` (en-US)
* `PositionSensorVRDevice` (en-US)
非标准

已弃用
* `Presentation` (en-US)
实验性
* `PresentationAvailability` (en-US)
实验性
* `PresentationConnection` (en-US)
实验性
* `PresentationConnectionAvailableEvent` (en-US)
实验性
* `PresentationConnectionCloseEvent` (en-US)
实验性
* `PresentationConnectionList` (en-US)
实验性
* `PresentationReceiver` (en-US)
实验性
* `PresentationRequest` (en-US)
实验性
* `ProcessingInstruction` (en-US)
* `ProgressEvent`
* `PromiseRejectionEvent`
* `PublicKeyCredential` (en-US)
* `PushEvent` (en-US)
* `PushManager`
* `PushMessageData` (en-US)
* `PushSubscription` (en-US)
* `PushSubscriptionOptions` (en-US)

### R

* `RadioNodeList` (en-US)
* `Range`
* `ReadableByteStreamController` (en-US)
* `ReadableStream`
* `ReadableStreamBYOBReader` (en-US)
* `ReadableStreamBYOBRequest` (en-US)
* `ReadableStreamDefaultController`
* `ReadableStreamDefaultReader`
* `RelativeOrientationSensor` (en-US)
* `RemotePlayback` (en-US)
* `Report` (en-US)
* `ReportBody` (en-US)
* `ReportingObserver` (en-US)
* `Request`
* `ResizeObserver`
* `ResizeObserverEntry`
* `ResizeObserverSize` (en-US)
* `Response`
* `RsaHashedImportParams` (en-US)
* `RsaHashedKeyGenParams` (en-US)
* `RsaOaepParams` (en-US)
* `RsaPssParams` (en-US)
* `RTCAudioSourceStats` (en-US)
* `RTCCertificate` (en-US)
* `RTCCertificateStats` (en-US)
* `RTCDataChannel`
* `RTCDataChannelEvent` (en-US)
* `RTCDtlsTransport` (en-US)
* `RTCDTMFSender` (en-US)
* `RTCDTMFToneChangeEvent` (en-US)
* `RTCEncodedAudioFrame` (en-US)
* `RTCEncodedVideoFrame` (en-US)
* `RTCError` (en-US)
* `RTCErrorEvent` (en-US)
* `RTCIceCandidate` (en-US)
* `RTCIceCandidatePair` (en-US)
* `RTCIceCandidatePairStats` (en-US)
* `RTCIceCandidateStats` (en-US)
* `RTCIceParameters` (en-US)
* `RTCIceTransport` (en-US)
* `RTCIdentityAssertion` (en-US)
实验性
* `RTCInboundRtpStreamStats` (en-US)
* `RTCOutboundRtpStreamStats` (en-US)
* `RTCPeerConnection`
* `RTCPeerConnectionIceErrorEvent` (en-US)
* `RTCPeerConnectionIceEvent` (en-US)
* `RTCPeerConnectionStats` (en-US)
* `RTCRemoteOutboundRtpStreamStats` (en-US)
* `RTCRtpCodecParameters` (en-US)
* `RTCRtpReceiver` (en-US)
* `RTCRtpScriptTransform` (en-US)
* `RTCRtpScriptTransformer` (en-US)
* `RTCRtpSender` (en-US)
* `RTCRtpStreamStats` (en-US)
* `RTCRtpTransceiver` (en-US)
* `RTCSctpTransport` (en-US)
* `RTCSessionDescription`
* `RTCStatsReport`
* `RTCTrackEvent` (en-US)
* `RTCTransformEvent` (en-US)
* `RTCTransportStats` (en-US)

### S

* `Sanitizer` (en-US)
实验性
* `Scheduler` (en-US)
* `Scheduling` (en-US)
实验性
* `Screen`
* `ScreenDetailed` (en-US)
实验性
* `ScreenDetails` (en-US)
实验性
* `ScreenOrientation` (en-US)
* `ScriptProcessorNode`
已弃用
* `ScrollTimeline` (en-US)
实验性
* `SecurePaymentConfirmationRequest` (en-US)
* `SecurityPolicyViolationEvent` (en-US)
* `Selection`
* `Sensor` (en-US)
* `SensorErrorEvent` (en-US)
* `Serial` (en-US)
实验性
* `SerialPort` (en-US)
实验性
* `ServiceWorker`
* `ServiceWorkerContainer`
* `ServiceWorkerGlobalScope`
* `ServiceWorkerRegistration` (en-US)
* `ShadowRoot`
* `SharedStorage` (en-US)
实验性
* `SharedStorageOperation` (en-US)
实验性
* `SharedStorageRunOperation` (en-US)
实验性
* `SharedStorageSelectURLOperation` (en-US)
实验性
* `SharedStorageWorklet` (en-US)
实验性
* `SharedStorageWorkletGlobalScope` (en-US)
实验性
* `SharedWorker`
* `SharedWorkerGlobalScope` (en-US)
* `SourceBuffer`
* `SourceBufferList`
* `SpeechGrammar`
实验性
* `SpeechGrammarList` (en-US)
实验性
* `SpeechRecognition` (en-US)
* `SpeechRecognitionAlternative` (en-US)
* `SpeechRecognitionErrorEvent` (en-US)
* `SpeechRecognitionEvent` (en-US)
* `SpeechRecognitionResult` (en-US)
* `SpeechRecognitionResultList` (en-US)
* `SpeechSynthesis`
* `SpeechSynthesisErrorEvent` (en-US)
* `SpeechSynthesisEvent` (en-US)
* `SpeechSynthesisUtterance` (en-US)
* `SpeechSynthesisVoice` (en-US)
* `StaticRange` (en-US)
* `StereoPannerNode` (en-US)
* `Storage`
* `StorageEvent`
* `StorageManager`
* `StylePropertyMap`
* `StylePropertyMapReadOnly` (en-US)
* `StyleSheet`
* `StyleSheetList`
* `SubmitEvent` (en-US)
* `SubtleCrypto`
* `SVGAElement`
* `SVGAngle` (en-US)
* `SVGAnimateColorElement` (en-US)
已弃用
* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
* `SVGAnimateElement`
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGAnimationElement` (en-US)
* `SVGCircleElement`
* `SVGClipPathElement` (en-US)
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
已弃用
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement`
* `SVGEllipseElement` (en-US)
* `SVGEvent`
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEDropShadowElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFontElement` (en-US)
已弃用
* `SVGFontFaceElement` (en-US)
已弃用
* `SVGFontFaceFormatElement` (en-US)
已弃用
* `SVGFontFaceNameElement` (en-US)
已弃用
* `SVGFontFaceSrcElement` (en-US)
已弃用
* `SVGFontFaceUriElement` (en-US)
已弃用
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGeometryElement` (en-US)
* `SVGGlyphElement` (en-US)
已弃用
* `SVGGlyphRefElement` (en-US)
已弃用
* `SVGGradientElement` (en-US)
* `SVGGraphicsElement`
* `SVGHKernElement` (en-US)
已弃用
* `SVGImageElement` (en-US)
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
已弃用
* `SVGMPathElement` (en-US)
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPoint` (en-US)
已弃用
* `SVGPointList` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPreserveAspectRatio` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRect` (en-US)
* `SVGRectElement` (en-US)
* `SVGRenderingIntent` (en-US)
已弃用
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStringList` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement`
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextContentElement` (en-US)
* `SVGTextElement` (en-US)
* `SVGTextPathElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)
* `SVGTRefElement` (en-US)
已弃用
* `SVGTSpanElement` (en-US)
* `SVGUnitTypes` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
已弃用
* `SyncEvent` (en-US)
实验性
* `SyncManager` (en-US)
实验性

### T

* `TaskAttributionTiming` (en-US)
实验性
* `TaskController` (en-US)
* `TaskPriorityChangeEvent` (en-US)
* `TaskSignal` (en-US)
* `Text` (en-US)
* `TextDecoder`
* `TextDecoderStream`
* `TextEncoder`
* `TextEncoderStream`
* `TextFormat` (en-US)
实验性
* `TextFormatUpdateEvent` (en-US)
实验性
* `TextMetrics`
* `TextTrack` (en-US)
* `TextTrackCue` (en-US)
* `TextTrackCueList` (en-US)
* `TextTrackList` (en-US)
* `TextUpdateEvent` (en-US)
实验性
* `TimeEvent` (en-US)
* `TimeRanges`
* `ToggleEvent` (en-US)
* `Touch`
* `TouchEvent`
* `TouchList`
* `TrackEvent` (en-US)
* `TransformStream`
* `TransformStreamDefaultController`
* `TransitionEvent`
* `TreeWalker`
* `TrustedHTML` (en-US)
* `TrustedScript` (en-US)
* `TrustedScriptURL` (en-US)
* `TrustedTypePolicy` (en-US)
* `TrustedTypePolicyFactory` (en-US)

### U

* `UIEvent`
* `URL`
* `URLPattern` (en-US)
实验性
* `URLSearchParams`
* `USB`
实验性
* `USBAlternateInterface` (en-US)
实验性
* `USBConfiguration` (en-US)
实验性
* `USBConnectionEvent` (en-US)
实验性
* `USBDevice` (en-US)
实验性
* `USBEndpoint` (en-US)
实验性
* `USBInterface` (en-US)
实验性
* `USBInTransferResult` (en-US)
实验性
* `USBIsochronousInTransferPacket` (en-US)
实验性
* `USBIsochronousInTransferResult` (en-US)
实验性
* `USBIsochronousOutTransferPacket` (en-US)
实验性
* `USBIsochronousOutTransferResult` (en-US)
实验性
* `USBOutTransferResult` (en-US)
实验性
* `UserActivation` (en-US)

### V

* `ValidityState`
* `VideoColorSpace` (en-US)
* `VideoDecoder` (en-US)
* `VideoEncoder` (en-US)
* `VideoFrame` (en-US)
* `VideoPlaybackQuality`
* `VideoTrack` (en-US)
* `VideoTrackList` (en-US)
* `ViewTimeline` (en-US)
实验性
* `ViewTransition`
实验性
* `VirtualKeyboard` (en-US)
实验性
* `VisibilityStateEntry` (en-US)
实验性
* `VisualViewport`
* `VRDisplay`
非标准

已弃用
* `VRDisplayCapabilities` (en-US)
非标准

已弃用
* `VRDisplayEvent` (en-US)
非标准

已弃用
* `VREyeParameters` (en-US)
非标准

已弃用
* `VRFieldOfView` (en-US)
非标准

已弃用
* `VRFrameData` (en-US)
非标准

已弃用
* `VRLayerInit` (en-US)
已弃用
* `VRPose`
非标准

已弃用
* `VRStageParameters` (en-US)
非标准

已弃用
* `VTTCue` (en-US)
* `VTTRegion` (en-US)

### W

* `WakeLock`
* `WakeLockSentinel` (en-US)
* `WaveShaperNode`
* `WebGL2RenderingContext`
* `WebGLActiveInfo`
* `WebGLBuffer`
* `WebGLContextEvent`
* `WebGLFramebuffer`
* `WebGLObject` (en-US)
* `WebGLProgram`
* `WebGLQuery`
* `WebGLRenderbuffer`
* `WebGLRenderingContext`
* `WebGLSampler`
* `WebGLShader`
* `WebGLShaderPrecisionFormat`
* `WebGLSync` (en-US)
* `WebGLTexture`
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation`
* `WebGLVertexArrayObject`
* `WebSocket`
* `WebTransport` (en-US)
* `WebTransportBidirectionalStream` (en-US)
* `WebTransportDatagramDuplexStream` (en-US)
* `WebTransportError` (en-US)
* `WebTransportReceiveStream` (en-US)
实验性
* `WebTransportSendStream` (en-US)
实验性
* `WGSLLanguageFeatures` (en-US)
实验性
* `WheelEvent`
* `Window`
* `WindowClient` (en-US)
* `WindowControlsOverlay` (en-US)
实验性
* `WindowControlsOverlayGeometryChangeEvent` (en-US)
实验性
* `WindowSharedStorage` (en-US)
实验性
* `Worker`
* `WorkerGlobalScope` (en-US)
* `WorkerLocation` (en-US)
* `WorkerNavigator` (en-US)
* `Worklet` (en-US)
* `WorkletGlobalScope` (en-US)
* `WorkletSharedStorage` (en-US)
实验性
* `WritableStream`
* `WritableStreamDefaultController`
* `WritableStreamDefaultWriter`

### X

* `XMLDocument`
* `XMLHttpRequest`
* `XMLHttpRequestEventTarget`
* `XMLHttpRequestUpload` (en-US)
* `XMLSerializer`
* `XPathEvaluator`
* `XPathException` (en-US)
* `XPathExpression` (en-US)
* `XPathNSResolver` (en-US)
* `XPathResult` (en-US)
* `XRAnchor` (en-US)
实验性
* `XRAnchorSet` (en-US)
实验性
* `XRBoundedReferenceSpace` (en-US)
实验性
* `XRCompositionLayer` (en-US)
实验性
* `XRCPUDepthInformation` (en-US)
实验性
* `XRCubeLayer` (en-US)
实验性
* `XRCylinderLayer` (en-US)
实验性
* `XRDepthInformation` (en-US)
实验性
* `XREquirectLayer` (en-US)
实验性
* `XRFrame` (en-US)
实验性
* `XRHand` (en-US)
* `XRHitTestResult` (en-US)
实验性
* `XRHitTestSource` (en-US)
实验性
* `XRInputSource` (en-US)
* `XRInputSourceArray` (en-US)
实验性
* `XRInputSourceEvent` (en-US)
* `XRInputSourcesChangeEvent` (en-US)
* `XRJointPose` (en-US)
* `XRJointSpace` (en-US)
* `XRLayer` (en-US)
实验性
* `XRLayerEvent` (en-US)
实验性
* `XRLightEstimate` (en-US)
实验性
* `XRLightProbe` (en-US)
实验性
* `XRMediaBinding` (en-US)
实验性
* `XRPose` (en-US)
* `XRProjectionLayer` (en-US)
实验性
* `XRQuadLayer` (en-US)
实验性
* `XRRay` (en-US)
实验性
* `XRReferenceSpace` (en-US)
* `XRReferenceSpaceEvent` (en-US)
* `XRRenderState` (en-US)
实验性
* `XRRigidTransform` (en-US)
* `XRSession` (en-US)
实验性
* `XRSessionEvent` (en-US)
* `XRSpace` (en-US)
* `XRSubImage` (en-US)
实验性
* `XRSystem` (en-US)
实验性
* `XRTransientInputHitTestResult` (en-US)
实验性
* `XRTransientInputHitTestSource` (en-US)
实验性
* `XRView` (en-US)
实验性
* `XRViewerPose` (en-US)
* `XRViewport` (en-US)
* `XRWebGLBinding` (en-US)
实验性
* `XRWebGLDepthInformation` (en-US)
实验性
* `XRWebGLLayer` (en-US)
实验性
* `XRWebGLSubImage` (en-US)
实验性
* `XSLTProcessor` (en-US)

参见
--

* Web API 事件参考


CSS：层叠样式表

CSS：层叠样式表
=========

**层叠样式表**（Cascading Style Sheets，缩写为 **CSS**）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

CSS 是**开放 Web** 的核心语言之一，并根据 W3C 规范在 Web 浏览器中进行了标准化。以前，CSS 规范的各个部分的开发是同步进行的，这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；相反，现在的一切都是没有版本号的 CSS。

在 CSS2.1 之后，规范的制定范围不断地增加，并且不同的 CSS 模块进展差异如此之大，以至于按照模块来单独进行开发并发布建议变得更加有效。W3C 现在不再对 CSS 规范进行版本控制，而是定期对 CSS 规范的最新稳定状态和各个模块的进展用快照来记录。CSS 模块现在有版本号或者级别，例如 CSS 颜色模块第五版。

主要资源
----

CSS 介绍

如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础文章以学习 CSS 的含义和用法。

CSS 教程

我们的 CSS 学习区包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。

CSS 参考

我们针对资深 Web 开发者编写的详细参考手册，描述了 CSS 的各个属性与概念。

#### 想要成为一名前端工程师？

我们汇总了一门课程，其中包含你实现成为前端工程师目标所需要的所有基本信息。

**点击开始**

教程
--

我们的 CSS 学习区 以多模块、零基础为特色进行 CSS 的教学——这也就意味着你不需要任何知识基础。

学习 CSS 第一步

CSS（层叠样式表）用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其他装饰性的特征。本模块将通过阐述基本原理，展示语法示例，以及如何与 HTML 相联系三方面，为你日后精通 CSS 提供一个友好的开端。

CSS 构建

本模块是学习 CSS 第一步的延续，相信你已经熟悉了这门语言及它的语法，并拥有一些使用它的基本经验，是时候更进一步了。本模块着眼于层叠和继承、所有可用的选择器类型、单位、大小、背景、边框、调试等等。

其目的在于先为你提供编写功能强大的 CSS 工具包，了解所有基础理论，之后再进行进一步的学习，诸如样式化文本和 CSS 布局。

CSS 为文本添加样式

在学习了 CSS 语言基础知识的基础上，你需要关注的下一个重点是样式化文本——这是使用 CSS 时最常用的场景之一。在这一模块将学习文本样式设置的基础知识，包括设置字体、粗体、斜体、行、字符间距、阴影以及其他文本属性。我们通过在页面上应用自定义的字体以及样式化的列表、链接来完善本模块。

CSS 布局

至此，我们已经了解了 CSS 的基本原理、如何设置文本样式，以及如何设置和操作内容所在的盒子。现在我们来看看如何将这些盒子放置在相对视口或另一些盒子之间的正确位置。我们到此已经覆盖了所有预备知识，因此现在能够深入学习 CSS 布局，研究不同的显示设置，学习像弹性盒（flexbox）、CSS 网格和定位这样的现代布局工具，以及一些你可能仍想了解的传统技术。

解决常见的 CSS 相关问题

本模块提供了一些内容链接，这些内容很好的回答了在创建网页时使用 CSS 所遇到的常见问题。

参考
--

* CSS 参考：针对资深 Web 开发者的详细参考手册，其中描述了 CSS 的各个属性和概念。
* CSS 关键概念：
    + 语言语法和形式
    + 特殊性（另译优先级）、继承和级联
    + 盒模型和外边距合并
    + 包含块
    + 堆叠上下文和区块格式化上下文
    + 初始值、计算值、应用值和实际值
    + CSS 简写属性
    + CSS 弹性盒子布局
    + CSS 网格布局
    + 媒体查询
    + 动画
技术手册
----

CSS 布局技术手册的目的是将一些也许你将要在自己的网站中实现的、常用的布局模式的方法汇集在一起，并且还提供了代码使你可以在项目中作为基础来使用。这些方法突出表现了同一布局规范的不同使用方式，作为开发者你可以自由选择自己想要的方式来实现。

CSS 开发工具
--------

* 万维网联盟 CSS 验证服务用于检查 CSS 是否有效。这是非常有价值的调试工具。
* Firefox 开发工具允许通过页面查看器和样式编辑器工具查看和实时编辑页面的 CSS 样式。
* Firefox 的 Web Developer 扩展也允许实时查看和编辑网站的 CSS。
自身的错误
-----

* Firefox：Firefox bug 1323667
参见
--

* CSS 演示：通过探索最新的 CSS 技术的应用实例，获得创造性的提升。
* CSS 常常应用的 Web 语言：HTML、SVG、MathML、XHTML 以及 XML。
* StackOverflow 上 CSS 相关的问题


HTTP

HTTP
====

***超文本传输协议***（HTTP）是一个用于传输超媒体文档（例如 HTML）的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的客户端—服务端模型，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应。HTTP 是无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态）。

教程
--

通过以下指南和教程来学习如何使用 HTTP。

HTTP 概述

介绍了客户端 - 服务器端协议的基本特征：它能够做什么以及它的设计意图。

HTTP 缓存

缓存对高速 Web 站点来说是非常重要。这篇文章阐述了不同种类的缓存以及如何配置 HTTP 标头来控制它们。

HTTP Cookie

RFC 6265 定义了 cookie 的工作方式。在处理 HTTP 请求时，服务器可以发送带有响应的 `Set-Cookie` 标头。然后，对于同一服务器发起的每一个请求，客户端都会在 HTTP 请求标头中以字段 `Cookie` 的形式将 cookie 的值发送过去。也可以将 cookie 设置为在特定日期过期，或限制为特定的域和路径。

跨域资源共享（CORS）

**跨站点 HTTP 请求**就是从**另一个域**，而不是资源所在的域发起的 HTTP 请求。举例来说，在域 A（`http://domaina.example/`）的 HTML 页面上通过 `img` 元素来请求域 B（`http://domainb.foo/image.jpg`）上的图片资源。这在当今的 Web 页面上是很常见的——加载跨站点资源，包括 CSS 样式表、图片、脚本和其他资源。CORS 允许 Web 开发人员控制其站点对跨站点请求的反应。

HTTP 客户端提示（Client Hint）

**客户端提示**是一组响应标头，服务器可以使用它来主动从客户端请求关于设备、网络、用户以及用户代理指定的首选项的信息。然后，服务器可以根据客户端选择提供的信息来确定发送哪些资源。

HTTP 的演变

简单描述了从早期版本的 HTTP 到现代 HTTP/2，新兴的 HTTP/3 以及未来版本的 HTTP 这个过程中发生的变更。

Mozilla Web 安全准则

一系列用于帮助运营团队创建安全的 Web 应用程序的技巧。

HTTP 消息

描述了 HTTP/1.x 和 HTTP/2 中不同种类消息的类型和结构。

典型的 HTTP 会话

展现并解释了一个常见 HTTP 会话的流程。

HTTP/1.x 中的连接管理

描述了在 HTTP/1.x 中的三种连接管理模型，以及它们的优点和缺点。

参考
--

浏览详细的 HTTP 参考文档。

HTTP 标头

HTTP 消息标头用于描述资源或服务器或客户端的行为。标头字段保存在 IANA 注册表中。IANA 也维护一个建议的新 HTTP 消息标头的注册表。

HTTP 请求方法

可以使用 HTTP：`GET`、`POST` 方法来完成不同操作，或是一些不太常见的请求方式，像是：`OPTIONS`、`DELETE` 或 `TRACE`。

HTTP 状态码

HTTP 状态码用来表示指定的 HTTP 请求是否已成功完成。响应分为五类：信息响应、成功响应，重定向、客户端错误和服务器错误。

CSP 指令

`Content-Security-Policy` 响应标头字段允许网站管理员控制页面上哪些资源能够被用户代理程序加载。除了少数例外，此策略主要涉及指定服务器来源和脚本终端。

工具与资源
-----

有助于了解和调试 HTTP 的工具和资源。

Firefox 开发者工具

网络监视器

Mozilla Observatory

一个旨在帮助开发人员，系统管理员和安全专业人员安全地配置其站点的项目。

RedBot

用于检查与缓存相关的 HTTP 标头的工具。

浏览器的工作原理（2011）

一篇非常全面的关于浏览器内部实现与通过 HTTP 协议的请求流的文章。可以说是所有 Web 开发者的必读内容。


XPath

XPath
=====

XPath 表示 XML 路径语言。它使用非 XML 语法来提供一种灵活地定位（指向）XML 文档的不同部分的方法。它也可以用于检查文档中某个定位节点是否与某个模式（pattern）匹配。

XPath 主要用于 XSLT，但也可以作为一种更强大的方式使用——使用 `XPathExpression` (en-US) 来导航任何类似 XML 语言文档的 DOM（例如 HTML 和 SVG）。而不是依赖于 `Document.getElementById()` 或 `Document.querySelectorAll()` 方法、`Node.childNodes` 属性和其他 DOM 核心特性。

XPath 使用路径标识符（类似于 URL）通过层级结构来导航 XML 文档。它使用非 XML 语法，使得它可被用于 URI 和 XML 属性值。

**备注：** XPath 的浏览器支持差别很大；它在 Firefox 中得到来相当不错的支持（尽管没有计划进一步改进的计划），而其他浏览器则较小程度地实现了它（如果支持的话）。如果你需要 polyfill，你可以考虑使用 js-xpath 或 wicked-good-xpath。

文档
--

在 JavaScript 中使用 XPath 的简介

描述 XPath 的非 XSLT 使用。

XPath：轴

XPath 规范中定义的轴的列表和定义。轴用于描述节点之间的关系。

XPath：函数 (en-US)

核心 XPath 函数和添加到 XPath 中的特定于 XSLT 的函数的列表和描述。

使用 XSLT 转换 XML

XSLT 使用 XPath 来定位它希望转换的 XML 文档中的代码段。

XPath 代码片段 (en-US)

一些可以在你自己的代码中使用的 JavaScript 实用函数，基于 DOM Level 3 XPath API。

什么是 XSLT？

对 XSLT 和 XPath 的详尽介绍，假设读者先前不了解这些技术，并引导读者了解背景、上下文、结构、概念和介绍性的术语。

工具
--

XPath 测试工具

在线的 XPath 构建器/调试器。

相关主题
----

* XSLT、XML、DOM
* CSS 选择器和 XPath 的比较


JavaScript

JavaScript
==========

**JavaScript**（**JS**）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 Node.js、Apache CouchDB、Adobe Acrobat 等。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript 的动态特性包括运行时对象的构造、变量参数列表、函数变量、动态脚本创建（通过 `eval`）、对象内枚举（通过 `for...in` 和 `Object` 工具方法）和源代码恢复（JavaScript 函数会存储其源代码文本，可以使用 `toString()` 进行检索）。

本部分文档将专注于 JavaScript 语言本身，而非局限于网页或其他运行环境。想要了解网页中特有的 API，请参考 Web API 以及 DOM。

ECMAScript 语言规范（ECMAScript Language Specification）（ECMA-262）和ECMAScript 国际化 API 规范（ECMAScript Internationalization API specification）（ECMA-402）是 Javascript 的标准。当某个 ECMAScript 新特性的提案已经被一些浏览器实现时，MDN 上的文档或示例就可能会涉及到这些新特性。大多数时候，处在 stages 3 和 4 的新特性会被收录到文档中，且收录时间通常早于其正式发布的时间。

不要将 JavaScript 与 Java 编程语言混淆——**JavaScript 不是“解释型 Java”**。虽然“Java”和“JavaScript”都是 Oracle 公司在美国和其他国家注册（或未注册）的商标，但是这两门语言在语法、语义与用途方面有相当大的不同。

JavaScript 的核心语言特性（大部分是纯 ECMAScript）的文档包括以下内容：

* JavaScript 指南
* JavaScript 参考

有关 JavaScript 规范和相关技术的更多信息，请参阅 JavaScript 技术概述。

**想成为一名前端网页开发人员吗？**

为了帮助你实现这个目标，我们总结了一条包含所有必要信息的学习路线。

**从这里起步**

教程
--

借助指南和教程来学习如何用 JavaScript 编程。

### 对于完全的初学者

如果你想学习 JavaScript，却从未接触过 JavaScript 或编程，你可以投入到我们的 JavaScript 主题学习区。下面列出了这部分的所有章节：

JavaScript 第一步

回答了一些基本问题，比如“JavaScript 是什么？”、“它长什么样子？”、“它可以用来做什么？”等，同时还谈及了如变量、字符串、数值、数组等 JavaScript 的关键特性。

JavaScript 基本结构

继介绍了 JavaScript 关键的基本特性后，我们需要关注常见的代码组成部分，如条件语句、循环、函数、事件等。

介绍 JavaScript 对象

如果你想进一步使用它撰写更有效率的代码，理解 JavaScript 面向对象的特性是很重要的，因此我们提供了该模块来帮助你理解它。

异步 JavaScript

介绍异步 Javascript，解释为什么这个特性是重要的，以及如何借助这个特性，有效解决诸如从服务器抓取资源这类潜在的阻塞操作。

客户端 web API

了解 API 是什么，以及如何使用那些在开发工作中常见的 API。

### JavaScript 指南

JavaScript 指南

一份更详尽的 JavaScript 指南，适用于有过 JavaScript 或其他语言编程经验的读者。

### 中级内容

理解客户端 Javascript 框架

作为现代前端 Web 开发中不可或缺的一部分，Javascript 框架给开发者提供了一套经过验证的工具，用来构建可扩展的交互式 Web 应用。在你移步一系列涵盖了当前流行前端框架的教程前，这部分内容提供了一些基础的背景知识，包括这些客户端框架是如何工作的，以及它们如何与你现有的工具集相配合。

重新介绍 JavaScript

给那些 *认为自己了解 Javascript* 的朋友们准备的 JavaScript 概述。

JavaScript 数据结构

概述 JavaScript 中涉及的数据结构。

相同、相等的比较性判断

JavaScript 提供了三种比较操作符，包括严格比较操作符`===`和非严格的比较操作符 `==`，以及 `Object.is()` 方法。

属性的可枚举性和所有权

不同的逐个访问一组对象属性的方法对可枚举性和属性所有权的处理。

闭包

闭包由一个函数与其本身所被定义的词法环境的结合而成。

### 高级内容

继承和原型链

基于原型继承被外界广泛地误解与低估，这一版块对基于原型的继承作了阐述。

JavaScript 类型化数组

Javascript 类型化数组提供了操作原始二进制数据的机制。

内存管理

JavaScript 中的内存生命周期和垃圾回收机制。

并发模型以及事件循环

JavaScript 具有基于“事件循环”的并发模型。

参考
--

浏览完整的 JavaScript 参考文档。

标准对象

例如 `Array`、`Boolean`、`Date`、`Error`、`Function`、`JSON`、`Math`、`Number`、`Object`、`RegExp`、`String`、`Map`、`Set`、`WeakMap` 、`WeakSet` 等标准内置对象。

表达式和运算符

运算符的作用`instanceof`、`typeof`、`new`、`this`，运算符优先级，以及其他运算符。

语句和声明

了解 `do-while`、`for-in`、`for-of`、`try-catch`、`let`、`var`、`const`、`if-else`、`switch` 以及其他语句和关键字的作用。

函数

学习如何使用 JavaScript 函数来开发你的应用。

类

JavaScript 类是进行面向对象编程最合适的方式。


SVG：可缩放矢量图形

SVG：可缩放矢量图形
===========

开始学习 SVG
--------

**可缩放矢量图形**（**Scalable Vector Graphics，SVG**）基于 XML 标记语言，用于描述二维的矢量图形。

作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

和传统的点阵图像模式（如 JPEG 和 PNG）不同的是，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。通过使用合适的库进行配合，SVG 文件甚至可以随时进行本地化。

SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。

其他内容请查阅 SVG 教程。

文档
--

SVG 元素参考

了解每一种 SVG 元素的细节。

SVG 属性参考

了解每一种 SVG 属性的细节。

SVG DOM 接口参考

了解有关 SVG DOM API 的全部细节。

在 HTML 内容中应用 SVG 效果

SVG 与 HTML、CSS 和 JavaScript 一起工作。

工具
--

* SVG 测试套件
* SVG 语法校验工具
实例
--

* SVG 创作指南
* SVG 作为图片
* 使用 SMIL 的 SVG 动画
* SVG 艺术画廊
* D3（用于使用 HTML、SVG 和 CSS 可视化数据的 JavaScript 库）


教程

教程
==

**警告：** 本页面上的链接通向各式各样的入门指导和培训教材。不管你是仅仅开始入门、学过些基础或者是个网站开发老手，你都能在这里找到有用的资源加以绝佳的练习。这些资源都来自卓有远见的公司和乐于接受开放标准网站开发人员。这是网站开发的绝佳练习而且使用一种开放内容授权，比如知识共享许可协议来提供并允许进行翻译。

对于学习 Web 的新手
------------

开始学习 Web

一系列介绍帮助你开始学习 Web 开发。你需要准备工具去创建一个简单的网页并发布你自己简单的代码。

HTML 入门
-------

### 初级课程

HTML 简介

HTML 是什么，干什么，以及其简要历史，还有一个 HTML 文档的结构是什么样子的。其后的文章会更深入 HTML 的每一个部分。

网页的基本构架 *（由出版社提供）*

学习 HTML 元素是如何组装在一起从而构成一个更大的图块的。

MDN 的 HTML 元素参考

一个 HTML 元素综合性性参考，还有不同浏览器对它们的支持。

HTML 挑战*（来自维基大学）*

参与这些挑战来巩固你的 HTML 技能。（例如，“我到底是应该使用一个 <h2> 元素还是用 <strong> 呢？”）专注于有意义的小点滴。

### 高级课程

编写出能够快速加载 HTML 页面的小贴士

优化网页，以减少你的 Web 服务器上的负载和网络连接和为游客提供一个响应迅速的网站。

HTML5 入门*（HTML5 Rocks）*

通过指南来指导使用 HTML5 特征来写代码。

HTML5 语法 *(分开的列表)*

学习那些可扩展和向后和向前兼容的有意义的标签语法。

Canvas 入门 (en-US)

学习如何使用脚本和 canvas 标签来画图。

HTML5 博士

HTML5 应用前线上的文章。

HTML5 声音标签的乐趣*（兴趣勃勃啊）*

学习如何使用 HTML audio 标签简简单单地来把声音文件放到你的网页里去。在这里包含了很多代码范例。

Javascript 入门
-------------

### 初级课程

Codecademy *（*来自 Codecademy 网站*）*

Codecademy 是学习如何编写 JavaScript 最容易的方式。它互动、有趣，你能够和你的朋友们一起来学习。

开始使用 JavaScript

JavaScript 是什么以及它如何帮助你？

JavaScript 最佳实践 *（来自 WebPlatform.org 网站）*

学习一些明显或者不是很明显的编写 JavaScript 最佳实践。

CodeAvengers*（来自 CodeAvengers.com 网站）*

Code Avengers（代码复仇者联盟）是一个有趣且高效的学习使用 HTML, CSS, and JavaScript 编写网络 apps 和游戏代码的好地方。

### 中级课程

JavaScript 再深入

针对于中等水平的开发者的关于 Javascript 编程语言的一个回顾。

Eloquent JavaScript

一本中级和高级 JavaScript 使用方法的全面指南。（译者注：简体中文版《JavaScript 编程精解》已由机械工业出版社华章公司出版发行）

必要的 JavaScript 设计模式 *(Addy Osmani)*

介绍基本的 JavaScript 设计模式。

JavaScript 编程语言 *(YUI Blog)*

Douglas Crockford 探讨了如今这个语言的情况，还有如何来实现。

### 高级课程

JavaScript 指南

一个为所有的学习者从初级到高级的全面、定期更新的 JavaScript 指南。

学习高级别的 JavaScript *(John Resig)*

John Resig 的高级 JavaScript 指南。

介绍 JavaScript DOM (Elated)

DOM 是什么，以及为什么有用？这篇文章将向你介绍 Javascript 这一强大功能。

一个麻烦的 API : DOM 理论 (YUI Blog)

Douglas Crockford 解释文件对象模型。

Javascript 进阶 (YUI Blog)

Douglas Crockford 审视代码的模式，以便程序员在创建应用的时候可以选择。

JavaScript 花园

关于 Javascript 最古怪部分的资料。

非阻塞 JavaScript 加载 (YUI Blog)

提高含 Javascript 页面加载性能的一些提示。

CSS 入门
------

### 初级课程

CSS 入门

这个教程向你介绍层叠样式表（CSS），通过具体的实例引导你熟悉基本的 CSS 功能，你可以试着在自己电脑上练习这些实例。

CSS 类选择器 (来自维基大学)

在 CSS 里类是什么？

外部 CSS (来自维基大学)

从外部样式表使用 CSS。

添加一点样式 (W3C)

入门介绍使用 CSS 样式化网页。

常见 CSS 问题

初学者一些常见问题和解答。

代码复仇者 (CodeAvengers.com)

代码复仇者用有趣、高效的方式学习使用 HTML，CSS，JavaScript 开发 Web 应用和游戏。

### 中级课程

CSS 参考

CSS 完整参考，包含 Firefox 和另外浏览器支持的详细信息。

CSS 挑战 (维基大学)

让你的 CSS 技巧更灵活，看你是否需要更多的练习。

中级 CSS 概念 (HTML.net)

分组，伪类等等。

CSS 定位 101 (A List Apart)

使用符合标准的定位，无表布局。

CSS 渐进增强 (A List Apart)

把 CSS 渐进增强结合到你的网页。

流体网格 (A List Apart)

设计根据浏览器窗口自适应布局，同时使用一个字体网格。

### 高级课程

应用 CSS 转换

使用 CSS 旋转、倾斜、缩放和变换。

CSS 过渡

CSS 过渡是 CSS3 草案规范的一部分，提供了渐变动画来改变 CSS 属性，而不是突变生效。

应用网页字体快速指南 - 使用 @font-face (HTML5 Rocks)

来自 CSS3 的 @font-face 功能，允许你以可访问的，可操作的，易扩展的方式使用 web 上的自定义字体。

开始写 CSS (David Walsh)

介绍工具和方法来写更简洁，易维护和可扩展的 CSS。


MathML

MathML
======

**Mathematical Markup Language (MathML)** 是一个用于描述数学公式、符号的一种 XML (en-US) 标记语言。

在这里你可以找到有关的文档、例子和工具来帮助你使用这个强大的技术。如果想快速了解这项技术，请看 Slides for the innovation fairs at Mozilla Summit 2013。

MathML 参考文档
-----------

MathML 元素参考

MathML 元素的细节和在桌面浏览器与移动设备浏览器上的兼容性情况。

MathML 属性参考

关于 MathML 属性的参考文档。用这些属性可以修改这些元素的显示效果。

MathML 例子

可以让你理解如何使用 MathML 的例子。

编写 MathML

编写 MathML 的一些建议和提示，包括建议使用的编辑器以及如何将编辑器的输出集成到网页中去。

查看全部...

从社区获得帮助
-------

* IRC 频道
* Mozilla 贡献者的 Wiki
* W3C Math 主页
* www-math w3.org 邮件存档
工具
--

* W3C Validator
* Mathzilla Firefox 拓展收藏集
* TeXZilla - 基于 Javascript 的 LaTeX to MathML 转换器（在线 demo，Firefox OS webapp，Firefox 拓展，在网页、JS 程序中使用，等等）
* LaTeXML - 将 LaTeX 文档转换为 HTML+MathML 网页
* Web Equation - 将手写的公式转换为 MathML 或 LaTeX
* MathJax - 跨浏览器的 JavaScript 数学渲染引擎。若要强制 MathJax 使用原生 MathML，可以试试这个 Mozilla 拓展、这个 Safari 拓展，或是这个 UserScript 脚本。
相关主题
----

* CSS
* HTML
* SVG
浏览器兼容性
------

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


HTML（超文本标记语言）

HTML（超文本标记语言）
=============

**HTML**（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 `<head>`、`<title>`、`<body>`、`<header>`、`<footer>`、`<article>`、`<section>`、`<p>`、`<div>`、`<span>`、`<img>`、`<aside>`、`<audio>`、`<canvas>`、`<datalist>`、`<details>`、`<embed>`、`<nav>`、`<output>`、`<progress>`、`<video>`、`<ul>`、`<ol>`、`<li>` 等等。

HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“`<`”和“`>`”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，`<title>` 标签可以写成 `<Title>`，`<TITLE>` 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。

下面的文章会帮助你更好地了解 HTML。

主要资源
----

HTML 介绍

如果你是 Web 开发新手，请务必阅读我们的 HTML 基础 文章来了解什么是 HTML 以及如何使用它。

HTML 教程

关于如何使用 HTML 的文章，教程和完整的示例，查看我们的 HTML 学习区。

HTML 参考

在我们丰富的 HTML 参考部分中，你可以找到在 HTML 中每一个元素和属性的详细信息。

#### 想要成为一名前端工程师？

我们汇总了一门课程，其中包含你实现成为前端工程师目标所需要的所有基本信息。

**点击开始**

初学者教程
-----

我们的 HTML 学习区 含有许多富有特色的模块，学习者可以在没有任何先前经验的情况下从零开始，掌握 HTML。

HTML 介绍

这一模块将为你打下基础，并为进一步的学习铺平道路。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。

多媒体与嵌入内容

这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。

HTML 表格

如何用可理解并易于访问的形式在网页中展示表格化数据一向都是个不小的挑战。这个模块涵盖了基本的表格标记，以及一些更复杂的特性，比如实现标题和总结等。

HTML 表单

表单是构成 Web 世界的重要组成部分——它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。这个模块将引导你建立一个客户端／前端部分的表单。

用 HTML 解决常见问题

该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。

高级主题
----

CORS 处理跨域图片

通过搭配 `crossorigin` 属性和适当的 CORS 标头，在 `<img>` 元素中定义的图片可以从外部来源加载并在 `<canvas>` 元素中使用，就像是从本地源加载一样。

CORS 设置属性

一些提供了对 CORS 的支持的 HTML 元素，比如 `<img>` 或 `<video>`，具有 `crossorigin` 元素属性／attribute（`crossOrigin` 对象属性／property），该属性能使你配置其跨域获取资源的请求。

使用 rel="preload" 预加载页面内容

`<link>` 元素的 `rel` 属性的值 `preload` 允许你在 HTML 的 `<head>` 部分声明一些（资源）获取请求，以指定那些在页面加载后即刻需要的资源。因此在浏览器的主渲染机制介入前，这些资源会在页面加载生命周期的早期阶段进行预加载。这样可以保证这些资源可被更早使用并减少阻塞页面初次渲染的可能性，从而提升性能。这篇文章提供了关于 `preload` 作用机制的基本指导。

参考
--

HTML 参考

HTML 由**元素**组成，每个元素都可以被多个**属性**修饰。HTML 文档通过链接相互连接。

HTML 元素参考

浏览完整的 HTML 元素列表。

HTML 属性参考

HTML 元素都含有**属性**。这些额外的属性值可以通过各种途径对元素进行配置或调整其行为。

全局属性

全局属性可以在所有 HTML 元素上进行设置，*包括那些没有在相关标准中出现的元素*。这意味着即使这些非标准元素使得文档并不符合 HTML5 标准，它们也必须允许这些属性存在。

行级元素和块级元素

HTML 元素通常是“行级”或“块级”元素。一个行级元素仅会占用由定义它的标签所包裹起来的空间。而一个块级元素将会占用其父元素（容器）的全部空间，也就是创建一个“块”。

链接类型

在 HTML 中，各种各样的链接类型被用来确立和定义两个文档之间的关系。可以设置链接类型的链接元素包括 `<a>`、`<area>` 和 `<link>`。

Web 媒体类型和格式指南

`<audio>` 和 `<video>` 元素允许你原生地播放音频和视频媒体，无需任何外部软件的支持。

HTML 内容种类

HTML 包含了几种内容，每种内容在特定的情景上下文中有效，而在其他上下文中无效。每种内容也指定了可以被它们包含的类别，以及可以或不可以在其中使用的元素。这里提供了一个关于这些类别的说明。

怪异模式和标准模式

关于怪异模式和标准模式的历史信息。

相关主题
----

使用 CSS 为 HTML 元素应用颜色

这篇文章涵盖了大多数使用 CSS 为 HTML 内容增加颜色的方式，并列举了 HTML 文档里哪些部分可以进行上色以及这一操作需要使用哪些 CSS 属性。它包含了一些示例，配色建构工具的链接，以及其他内容。


Web App Manifest

Web App Manifest
================

Web 应用程序清单在一个 JSON 文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将 Web 应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

Web 应用程序清单是被称为渐进式 Web 应用程序 (PWA)的 Web 技术集合的一部分，它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能，比如离线可用和接收推送通知。

部署一个 manifest
-------------

Web 应用程序清单部署在你的 HTML 页面中，使用在你的文件的头部的一个链接标记：

```html
<link rel="manifest" href="/manifest.json" />
```

manifest 范例
-----------

```json
{
  "name": "HackerWeb",
  "short\_name": "HackerWeb",
  "start\_url": ".",
  "display": "standalone",
  "background\_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related\_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}
```

成员
--

### `background_color`

为 web 应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载 manifest，浏览器可以用来绘制 web 应用程序的背景颜色。在启动 web 应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

```json
"background\_color": "red"
```

**备注：** background\_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。

### `description`

提供有关 Web 应用程序的一般描述。

```json
"description": "The app that helps you find the best food in town!"
```

### `dir`

指定名称、短名称和描述成员的主文本方向。与 lang 一起配置，可以帮助正确显示右到左文本。

```json
"dir": "rtl",
"lang": "ar",
"short\_name": "أنا من التطبيق!"
```

可选值：

* `ltr` (由左到右)
* `rtl` (由右到左)
* `auto` (由浏览器自动判断。

**备注：** 当省略时，默认为 auto

### `display`

定义开发人员对 Web 应用程序的首选显示模式。

```json
"display": "standalone"
```

有效值：

| 显示模式 | 描述 | 后备显示模式 |
| --- | --- | --- |
| `fullscreen` | 全屏显示，所有可用的显示区域都被使用，并且不显示状态栏chrome。 | `standalone` |
| `standalone` | 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的 UI 元素，但是可以包括其他 UI 元素，例如状态栏。 | `minimal-ui` |
| `minimal-ui` | 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。 | `browser` |
| `browser` | 该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。这是默认的设置。 | (None) |

**备注：** 你可以使用显示模式媒体功能，根据显示模式 (en-US)选择性地将 CSS 应用到你的应用程序。这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。

### `icons`

指定可在各种环境中用作应用程序图标的图像对象数组。例如，它们可以用来在其他应用程序列表中表示 Web 应用程序，或者将 Web 应用程序与 OS 的任务切换器和/或系统偏好集成在一起。

```json
"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd\_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd\_hi.svg",
    "sizes": "72x72"
  }
]
```

图像对象可能包含以下值：

| 字段 | 描述 |
| --- | --- |
| `sizes` | 包含空格分隔的图像尺寸的字符串。 |
| `src` | 图像文件的路径。如果`src`是一个相对 URL，则基本 URL 将是 manifest 的 URL。 |
| `type` | 提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。 |

### `lang`

指定`name`和`short_name`成员中的值的主要语言。该值是包含单个语言标记的字符串。

```json
"lang": "en-US"
```

### `name`

为应用程序提供一个人类可读的名称，例如在其他应用程序的列表中或作为图标的标签显示给用户。

```json
"name": "Google I/O 2017"
```

### `orientation`

定义所有 Web 应用程序顶级的默认方向 browsing contexts.

```json
"orientation": "portrait-primary"
```

方向可以是以下值之一：

* `any`
* `natural`
* `landscape`
* `landscape-primary`
* `landscape-secondary`
* `portrait`
* `portrait-primary`
* `portrait-secondary`
### `prefer_related_applications`

指定一个布尔值，提示用户代理向用户指示指定的相关应用程序（请参见下文）可用，并建议通过 Web 应用程序。只有当相关的本地应用程序确实提供了某些 Web 应用程序无法做到的事情时，才应该使用它。

```json
"prefer\_related\_applications": false
```

**备注：** 如果省略，默认设置为 `false`.

### `related_applications`

指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 - 例如可通过 Google Play Store 获取的原生 Android 应用程序。这样的应用程序旨在替代提供类似或等同功能的 Web 应用程序 - 就像 Web 应用程序的本机应用程序版本一样。

```json
"related\_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]
```

应用程序对象可能包含以下值：

| Member | Description |
| --- | --- |
| `platform` | 可以找到应用程序的平台。 |
| `url` | 可以找到应用程序的 URL。 |
| `id` | 用于表示指定平台上的应用程序的 ID。 |

### `scope`

定义此 Web 应用程序的应用程序上下文的导航范围。这基本上限制了 manifest 可以查看的网页。如果用户在范围之外浏览应用程序，则返回到正常的网页。

如果`scope`是相对 URL，则基本 URL 将是 manifest 的 URL。

```json
"scope": "/myapp/"
```

### `short_name`

为应用程序提供简短易读的名称。这是为了在没有足够空间显示 Web 应用程序的全名时使用。

```json
"short\_name": "I/O 2017"
```

### `start_url`

指定用户从设备启动应用程序时加载的 URL。如果以相对 URL 的形式给出，则基本 URL 将是 manifest 的 URL。

```json
"start\_url": "./?utm\_source=web\_app\_manifest"
```

### `theme_color`

定义应用程序的默认主题颜色。这有时会影响操作系统显示应用程序的方式（例如，在 Android 的任务切换器上，主题颜色包围应用程序）。

```json
"theme\_color": "aliceblue"
```

初始屏幕
----

在 Chrome 47 及更高版本中，从主屏幕启动的 Web 应用程序将显示启动画面。这个启动画面是使用 Web 应用程序清单中的属性自动生成的，具体来说就是：`name`，`background_color`以及`icons` 中距设备最近 128dpi 的图标。

Mime 类型
-------

Manifests 应使用 `application/manifest+json` MIME 类型。但是，你不必非得这样做。

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

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


Web 开发者指南

Web 开发者指南
=========

MDN 文档中有大量的指南，这些文章意在增加用例，或教你如何使用 API 接口或特性。此页面将提供到一些最流行的阅读材料的链接。

HTML
----

使用 HTML 构建网页

HTML 学习区会提供从头开始的 HTML 学习教程。

HTML 基础

这篇文章将会让你对 HTML 有一个基本的了解。在遵循本指南后，你可以进一步探索 HTML 学习区的资料。

CSS
---

学习使用 CSS 给 HTML 添加样式

我们完整的 CSS 指南将带你从头开始，学习如何给文字添加样式、创建布局等更多内容。

CSS 布局指南 (en-US)

MDN 上包含了很多有关 CSS 布局的指南，这个页面将它们收集到了一起。

使用 CSS 动画

CSS 动画使得从一个 CSS 样式配置到另一个样式配置的动画过渡成为可能。本指南将帮助你开始使用动画属性。

JavaScript
----------

JavaScript 学习区

无论是完全的初学者，还是希望提升你的技能，这里都是好的开始。

媒体
--

音视频传输 (en-US)

我们可以通过多种方式在 Web 上传递音频和视频，从“静态”媒体文件到自适应实时流。本文旨在作为探索基于网络的媒体的各种传输机制以及与流行浏览器的兼容性的起点。

音视频操作

Web 的魅力在于你可以结合各种技术来创造新的形式。在浏览器中拥有原生音频和视频意味着我们可以使用这些诸如 `<canvas>`、WebGL 或 Web 音频 API 的数据流技术来直接修改音视频，例如向音频添加混响或压缩效果，或向视频添加灰度或褐色滤镜。本篇文章提供了一个参考，解释了你需要做些什么。

API 接口
------

表单数据对象

`FormData` 对象允许你配置一组键值对并通过 `XMLHttpRequest` 发送它们。虽然它主要用来发送表单数据，但它也可以独立地用于传输其他带键值的数据。若将表单的编码类型设置为“multipart/form-data”，则传输的格式与表单的 `submit()` 方法用于发送数据的格式相同。

渐进式 Web 应用

渐进式 Web 应用（PWA）通过使用现代 Web API 和传统的渐进式策略来开发跨平台的 Web 应用程序。这些应用程序可以在任何设备上运行并提供接近原生应用程序的体验。这是一些教程来告诉你一些你需要知道的关于 PWA 的知识。

XML 解析和序列化

Web 平台提供了解析和序列化 XML 的不同方法，每种方法都有其优点和缺点。

性能
--

优化和性能

在开发现代网络站点及应用时，使内容加载迅速高效很重要。这篇文章将会帮助你在桌面系统和手持设备上都可以提高效率。

字体
--

可变字体指南

了解如何在你的设计中使用可变字体。

网络开放字体格式（WOFF）

WOFF（网络开放字体格式）是在网络上开放给任何人免费使用的字体文件格式。

用户界面开发
------

用户输入和控制 (en-US)

现代 Web 用户输入已经超越了简单的鼠标和键盘：例如，他们在使用触摸屏。本文提供了管理用户输入和在开放网络应用中实现控制的建议，以及常见问题解答、真实世界的例子，并为需要更多底层技术详细信息的人提供了进一步的信息链接。