HTTP/3 - MDN Web 文档术语表：Web 相关术语的定义

HTTP/3
======

**HTTP/3**是继HTTP/2即将到来的HTTP 网络协议的主要修订版。HTTP/3 的要点是它使用名为 QUIC 的新UDP协议代替TCP。

参见
--

* 基础知识
    + HTTP on MDN
    + HTTP/3
* 词汇表
    + HTTP
    + HTTP 2
    + Latency


空元素 - MDN Web 文档术语表：Web 相关术语的定义

空元素
===

**空元素**（empty element）是 HTML 中**不能**存在子节点（例如内嵌的元素或者文本节点）的元素。空元素只有开始标签且不能指定结束标签。

在 HTML 中，空元素不能有结束标签。例如，`<input type="text"></input>` 是无效的 HTML。相反，不能有任何子节点的 SVG 或 MathML 元素可以使用结束标签来代替 XML 开始标签中的自闭合标签语法。

HTML、SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容。所以一些标签的组合是没有任何语义的。

尽管无法使用具有子元素的空元素标记，但可以使用 JavaScript 在这些元素的 DOM 中添加子节点。但这并不是一个被推荐的做法，因为其结果不可靠。

在 HTML 中有以下空元素：

* `<area>`
* `<base>`
* `<br>`
* `<col>`
* `<embed>`
* `<hr>`
* `<img>`
* `<input>`
* `<link>`
* `<meta>`
* `<param>`
已弃用
* `<source>`
* `<track>`
* `<wbr>`
自闭合标签
-----

*HTML 中不存在自闭合标签（`<tag />`）。*

如果一个 HTML 元素的开始标签中存在尾随的 `/`（斜杠）字符，HTML 解析器会忽略该斜杠字符。请记住一些元素（例如 `<script>` 或 `<ul>`）的确需要结束标签。在这种情况下，在开始标签中添加尾随斜杠不会闭合元素。

但是，某些代码格式化工具会在空元素的开始标签中添加尾随斜杠字符，以使其兼容 XHTML 并更易读。例如，某些代码格式化工具会将 `<input type="text">` 转换为 `<input type="text" />`。

XML、XHTML 和 SVG 的空元素则必须使用自闭合标签（例如 `<circle cx="50" cy="50" r="50" />`）。

在 SVG 和 MathML 中，有任何子节点的元素不允许使用自闭合标签。在这种情况下，如果元素的开始标签被标记为自闭合，则该元素不能有结束标签。

**备注：** 如果开始标签中的尾随 `/`（斜杠）字符直接位于未使用引号包裹的属性值之后（两者之间没有空格），则该斜杠字符将成为属性值的一部分，而不是被解析器丢弃。例如，标记 `<img src=http://www.example.com/logo.svg/>` 会导致 `src` 属性的值为 `http://www.example.com/logo.svg/`——这会导致 URL 错误。

参见
--

* 可替换元素


Base64 - MDN Web 文档术语表：Web 相关术语的定义

Base64
======

**Base64** 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。*Base64* 这个词出自一种特定的 MIME 内容传输编码。

Base64 编码方案通常用于需要对二进制数据进行编码的情况，这些数据需要通过设计用于处理 ASCII 的媒体进行存储和传输。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML 中储存复杂数据时使用。

Base64 编码在网络上的一个常见应用是对二进制数据进行编码，以便将其纳入 data: URL 中。

在 JavaScript 中，有两个函数被分别用来处理解码和编码 Base64 字符串：

* `btoa()`：从二进制数据“字符串”创建一个 Base-64 编码的 ASCII 字符串（“btoa”应读作“binary to ASCII”）
* `atob()`：解码通过 Base-64 编码的字符串数据（“atob”应读作“ASCII to binary”）

`atob()` 和 `btoa()` 使用的算法在 RFC 4648 第四节中给出。

**备注：** `btoa()` 需要传入二进制数据，如果给定的字符串包含任何 UTF-16 表示的字符占据一个以上的字节，则会抛出一个异常。

编码尺寸增加
------

每一个 Base64 字符实际上代表着 6 比特位。因此，3 字节（一字节是 8 比特，3 字节也就是 24 比特）的字符串/二进制文件可以转换成 4 个 Base64 字符（4x6 = 24 比特）。

这意味着 Base64 格式的字符串或文件的尺寸约是原始尺寸的 133%（增加了大约 33%）。如果编码的数据很少，增加的比例可能会更高。例如：长度为 1 的字符串 `"a"` 进行 Base64 编码后是 `"YQ=="`，长度为 4，尺寸增加了 3 倍。

“Unicode 问题”
------------

由于 JavaScript 字符串是 16 位编码的字符串，在大多数浏览器中，在 Unicode 字符串上调用 `window.btoa`，如果一个字符超过了 8 位 ASCII 编码字符的范围，就会引起 `Character Out Of Range` 异常。有两种可能的方法来解决这个问题：

* 第一种是先对整个字符串转义，然后进行编码；
* 第二种是将 UTF-16 字符串转换为 UTF-8 字符数组，然后进行编码。

以下是两种可能的方法：

### 方案 1——先转义字符串

```js
function utf8\_to\_b64(str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}

function b64\_to\_utf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
}

// Usage:
utf8\_to\_b64("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU="
b64\_to\_utf8("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode"
```

该方案由 Johan Sundström 提出。

另一个可能的解决方案是不利用现在已经废弃的 'unescape' 和 'escape' 函数。不过这个方案并没有对输入的字符串进行 base64 编码。注意，`utf8_to_b64` 和 `b64EncodeUnicode` 的输出结果的不同。采用这种方式可能会导致与其他应用程序的互操作性问题。

```js
function b64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str));
}

function UnicodeDecodeB64(str) {
  return decodeURIComponent(atob(str));
}

b64EncodeUnicode("✓ à la mode"); // "JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"
UnicodeDecodeB64("JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"); // "✓ à la mode"
```

### 方案 2——使用 `TypedArray` 和 UTF-8 重写 `atob()` 和 `btoa()` 方法

**备注：** 以下代码对于从 Base64 字符串中获取 ArrayBuffer 和/或从 ArrayBuffer 获取 Base64 字符串（见下文）也很有用。

```js
"use strict";
// Array of bytes to Base64 string decoding
function b64ToUint6(nChr) {
  return nChr > 64 && nChr < 91
    ? nChr - 65
    : nChr > 96 && nChr < 123
      ? nChr - 71
      : nChr > 47 && nChr < 58
        ? nChr + 4
        : nChr === 43
          ? 62
          : nChr === 47
            ? 63
            : 0;
}

function base64DecToArr(sBase64, nBlocksSize) {
  const sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, ""); // Remove any non-base64 characters, such as trailing "=", whitespace, and more.
  const nInLen = sB64Enc.length;
  const nOutLen = nBlocksSize
    ? Math.ceil(((nInLen \* 3 + 1) >> 2) / nBlocksSize) \* nBlocksSize
    : (nInLen \* 3 + 1) >> 2;
  const taBytes = new Uint8Array(nOutLen);

  let nMod3;
  let nMod4;
  let nUint24 = 0;
  let nOutIdx = 0;
  for (let nInIdx = 0; nInIdx < nInLen; nInIdx++) {
    nMod4 = nInIdx & 3;
    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (6 \* (3 - nMod4));
    if (nMod4 === 3 || nInLen - nInIdx === 1) {
      nMod3 = 0;
      while (nMod3 < 3 && nOutIdx < nOutLen) {
        taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255;
        nMod3++;
        nOutIdx++;
      }
      nUint24 = 0;
    }
  }

  return taBytes;
}

/\* Base64 string to array encoding \*/
function uint6ToB64(nUint6) {
  return nUint6 < 26
    ? nUint6 + 65
    : nUint6 < 52
      ? nUint6 + 71
      : nUint6 < 62
        ? nUint6 - 4
        : nUint6 === 62
          ? 43
          : nUint6 === 63
            ? 47
            : 65;
}

function base64EncArr(aBytes) {
  let nMod3 = 2;
  let sB64Enc = "";

  const nLen = aBytes.length;
  let nUint24 = 0;
  for (let nIdx = 0; nIdx < nLen; nIdx++) {
    nMod3 = nIdx % 3;
    // To break your base64 into several 80-character lines, add:
    // if (nIdx > 0 && ((nIdx \* 4) / 3) % 76 === 0) {
    // sB64Enc += "\r\n";
    // }

    nUint24 |= aBytes[nIdx] << ((16 >>> nMod3) & 24);
    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
      sB64Enc += String.fromCodePoint(
        uint6ToB64((nUint24 >>> 18) & 63),
        uint6ToB64((nUint24 >>> 12) & 63),
        uint6ToB64((nUint24 >>> 6) & 63),
        uint6ToB64(nUint24 & 63),
      );
      nUint24 = 0;
    }
  }
  return (
    sB64Enc.substring(0, sB64Enc.length - 2 + nMod3) +
    (nMod3 === 2 ? "" : nMod3 === 1 ? "=" : "==")
  );
}

/\* UTF-8 array to JS string and vice versa \*/

function UTF8ArrToStr(aBytes) {
  let sView = "";
  let nPart;
  const nLen = aBytes.length;
  for (let nIdx = 0; nIdx < nLen; nIdx++) {
    nPart = aBytes[nIdx];
    sView += String.fromCodePoint(
      nPart > 251 && nPart < 254 && nIdx + 5 < nLen /\* six bytes \*/
        ? /\* (nPart - 252 << 30) may be not so safe in ECMAScript! So…: \*/
          (nPart - 252) \* 1073741824 +
            ((aBytes[++nIdx] - 128) << 24) +
            ((aBytes[++nIdx] - 128) << 18) +
            ((aBytes[++nIdx] - 128) << 12) +
            ((aBytes[++nIdx] - 128) << 6) +
            aBytes[++nIdx] -
            128
        : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /\* five bytes \*/
          ? ((nPart - 248) << 24) +
            ((aBytes[++nIdx] - 128) << 18) +
            ((aBytes[++nIdx] - 128) << 12) +
            ((aBytes[++nIdx] - 128) << 6) +
            aBytes[++nIdx] -
            128
          : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /\* four bytes \*/
            ? ((nPart - 240) << 18) +
              ((aBytes[++nIdx] - 128) << 12) +
              ((aBytes[++nIdx] - 128) << 6) +
              aBytes[++nIdx] -
              128
            : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /\* three bytes \*/
              ? ((nPart - 224) << 12) +
                ((aBytes[++nIdx] - 128) << 6) +
                aBytes[++nIdx] -
                128
              : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /\* two bytes \*/
                ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128
                : /\* nPart < 127 ? \*/ /\* one byte \*/
                  nPart,
    );
  }
  return sView;
}

function strToUTF8Arr(sDOMStr) {
  let aBytes;
  let nChr;
  const nStrLen = sDOMStr.length;
  let nArrLen = 0;

  /\* mapping… \*/
  for (let nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
    nChr = sDOMStr.codePointAt(nMapIdx);

    if (nChr >= 0x10000) {
      nMapIdx++;
    }

    nArrLen +=
      nChr < 0x80
        ? 1
        : nChr < 0x800
          ? 2
          : nChr < 0x10000
            ? 3
            : nChr < 0x200000
              ? 4
              : nChr < 0x4000000
                ? 5
                : 6;
  }

  aBytes = new Uint8Array(nArrLen);

  /\* transcription… \*/
  let nIdx = 0;
  let nChrIdx = 0;
  while (nIdx < nArrLen) {
    nChr = sDOMStr.codePointAt(nChrIdx);
    if (nChr < 128) {
      /\* one byte \*/
      aBytes[nIdx++] = nChr;
    } else if (nChr < 0x800) {
      /\* two bytes \*/
      aBytes[nIdx++] = 192 + (nChr >>> 6);
      aBytes[nIdx++] = 128 + (nChr & 63);
    } else if (nChr < 0x10000) {
      /\* three bytes \*/
      aBytes[nIdx++] = 224 + (nChr >>> 12);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
    } else if (nChr < 0x200000) {
      /\* four bytes \*/
      aBytes[nIdx++] = 240 + (nChr >>> 18);
      aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
      nChrIdx++;
    } else if (nChr < 0x4000000) {
      /\* five bytes \*/
      aBytes[nIdx++] = 248 + (nChr >>> 24);
      aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
      nChrIdx++;
    } /\* if (nChr <= 0x7fffffff) \*/ else {
      /\* six bytes \*/
      aBytes[nIdx++] = 252 + (nChr >>> 30);
      aBytes[nIdx++] = 128 + ((nChr >>> 24) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
      aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
      aBytes[nIdx++] = 128 + (nChr & 63);
      nChrIdx++;
    }
    nChrIdx++;
  }

  return aBytes;
}
```

### 测试

```js
/\* Tests \*/

const sMyInput = "Base 64 \u2014 Mozilla Developer Network";

const aMyUTF8Input = strToUTF8Arr(sMyInput);

const sMyBase64 = base64EncArr(aMyUTF8Input);

alert(sMyBase64);

const aMyUTF8Output = base64DecToArr(sMyBase64);

const sMyOutput = UTF8ArrToStr(aMyUTF8Output);

alert(sMyOutput);
```

### 附录：将 Base64 字符串解码为 Uint8Array 或 ArrayBuffer

这些函数让我们也可以从 Base64 编码的字符串中创建 Uint8Array 或 ArrayBuffer。

```js
// "Base 64 \u2014 Mozilla Developer Network"
const myArray = base64DecToArr(
  "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==",
);

// "Base 64 \u2014 Mozilla Developer Network"
const myBuffer = base64DecToArr(
  "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==",
).buffer;

alert(myBuffer.byteLength);
```

**备注：** 函数 `base64DecToArr(sBase64[, nBlocksSize])` 将返回 `uint8Array` 字节数组。如果你的目标是构建 16 位/ 32 位/ 64 位原始数据的缓冲区，使用 `nBlocksSize` 参数，这是 `uint8Array.buffer.bytesLength` 属性必须产生的字节数的倍数［`1` 或省略为 ASCII、二进制字符串（即字符串中的每个字符都被当作二进制数据的一个字节来处理）或 UTF-8 编码的字符串，`2` 用于 UTF-16 字符串，`4` 用于 UTF-32 字符串］。


Regular expression - MDN Web 文档术语表：Web 相关术语的定义

Regular expression
==================

**正则表达式**（*Regular expressions*或 *regex*）是决定了在搜索中使用何种字符串序列的规则。

正则表达式在多种语言中都得到了实现，但是最知名的实现，当属 Perl 的实现。该实现引出了名为 PCRE（*Perl Compatible Regular Expression*）的生态系统。在 Web 中，JavaScript 通过 `RegExp` 对象，给出了正则表达式的另一种实现。

参见
--

* 在维基百科上的 正则表达式
* 互动教程
* 虚拟化的正则表达式
* 在 JavaScript 中写正则表达式


document environment - MDN Web 文档术语表：Web 相关术语的定义

document environment
====================

当 JavaScript 所处的全局环境为 window 或 iframe 时，这种环境被称为*全局文档环境*。全局的文档环境处于所有环境的顶层，即没有更外层的环境。

参见
--

* document environment 的 HTML 规范


Blink - MDN Web 文档术语表：Web 相关术语的定义

Blink
=====

Blink 是一个开源的浏览器布局引擎，由谷歌作为 Chromium 项目的一部分开发（因而也是 Chrome 的一部分）。具体而言，Blink 是一个派生自 WebKit (en-US) 项目中 WebCore 库的分支，用于处理布局、渲染以及 DOM。

参见
--

* Blink 项目主页（英文）
* Wikipedia 上的信息：Blink
* Blink 的 FAQ （英文）


浅拷贝 - MDN Web 文档术语表：Web 相关术语的定义

浅拷贝
===

对象的**浅拷贝**是其属性与拷贝源对象的属性共享相同引用（指向相同的底层值）的副本。因此，当你更改源或副本时，也可能导致其他对象也发生更改——也就是说，你可能会无意中对源或副本造成意料之外的更改。这种行为与深拷贝的行为形成对比，在深拷贝中，源和副本是完全独立的。

对于浅拷贝，有选择地更改对象中现有元素的共享属性的值与给现有元素赋一个全新的值是不同的，理解这一点很重要。

例如，如果在一个数组对象名为 `copy` 的浅拷贝中，`copy[0]` 元素的值是 `{"list":["butter"，"flour"]}`，然后执行 `copy[0].List = ["oil"，"flour"]`，那么源对象中的相应元素也将发生变化——因为你有选择地更改了源对象和浅拷贝共享的对象的属性。

然而，如果你做的是 `copy[0] = {"list":["oil"，"flour"]}`，那么源对象中的对应元素将**不会改变**——因为在这种情况下，你不仅仅是有选择地改变了浅拷贝与源对象共享的现有数组元素的属性；相反，你实际上是在浅拷贝中分配了一个全新的值给 `copy[0]` 数组元素。

在 JavaScript 中，所有标准的内置对象复制操作（展开语法、`Array.prototype.concat()`、`Array.prototype.slice()`、`Array.from()`、`Object.assign()` 和 `Object.create()`）创建的是浅拷贝而不是深拷贝。

示例
--

考虑以下示例，其中创建了一个 `ingredients_list` 数组对象，然后通过复制 `ingredients_list` 对象创建了一个 `ingredients_list_copy` 对象。

```js
let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];

let ingredients_list_copy = Array.from(ingredients_list);
console.log(JSON.stringify(ingredients_list_copy));
// ["noodles",{"list":["eggs","flour","water"]}]
```

改变 `ingredients_list_copy` 中 `list` 属性的值也将导致 `ingredients_list` 源对象中的 `list` 属性发生变化。

```js
ingredients_list_copy[1].list = ["rice flour", "water"];
console.log(ingredients_list[1].list);
// Array [ "rice flour", "water" ]
console.log(JSON.stringify(ingredients_list));
// ["noodles",{"list":["rice flour","water"]}]
```

为 `ingredients_list_copy` 中的第一个元素赋值，不会导致 `ingredients_list` 源对象中的第一个元素发生任何变化。

```js
ingredients_list_copy[0] = "rice noodles";
console.log(ingredients_list[0]);
// noodles
console.log(JSON.stringify(ingredients_list_copy));
// ["rice noodles",{"list":["rice flour","water"]}]
console.log(JSON.stringify(ingredients_list));
// ["noodles",{"list":["rice flour","water"]}]
```

参见
--

* 深拷贝


禁止修改的响应标头 - MDN Web 文档术语表：Web 相关术语的定义

禁止修改的响应标头
=========

*禁止修改的响应标头*是一个无法通过编程方式修改的 HTTP 标头（`Set-Cookie`）。

参见
--

* Fetch specification: forbidden response-header name
* 禁止修改的标头（术语表）


Array（数组） - MDN Web 文档术语表：Web 相关术语的定义

Array（数组）
=========

数组对象是一个有序的数据（根据语言不同，数据可以是原始类型或对象类型）集合。相对于变量，数组可用于在一个变量中存储多个变量值。

数组中的每一项都有可供访问的数字索引。在 JavaScript 中，数组索引从 0 开始，并可以使用多种方法操作。

JavaScript 中的数组形式如下：

```js
let myArray = [1, 2, 3, 4];
let catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
//Javascript 数组可以包含不同类型的数据，如上所示。
```

参见
--

* 维基百科的数组词条
* MDN JavaScript `Array` 参考


SPA（单页应用） - MDN Web 文档术语表：Web 相关术语的定义

SPA（单页应用）
=========

SPA（Single-page application，单页应用）是只加载一个单独网页的 web 应用实现，当需要显示不同的内容时，它通过 JavaScript API（例如 `XMLHttpRequest` 和 Fetch）更新主体内容。

这使得用户在访问网站时无需加载新的页面，可以获得性能提升和动态的体验，但会相应地丧失诸如 SEO（搜索引擎优化）的优势，同时需要更多精力维护状态、实现导航以及做一些有意义的性能监控。

参见
--

* 单页应用（维基百科词条）
* 理解客户端 JavaScript 框架
* 术语表
    + API
    + AJAX
    + JavaScript
* 著名的单页应用框架：
    + React
    + Angular
    + Vue.JS


Viewport - MDN Web 文档术语表：Web 相关术语的定义

Viewport
========

在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。

视口当前可见的部分叫做**可视视口**（visual viewport）。可视视口可能会比**布局视口**（layout viewport）更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了。

参见
--

* Viewport 维基百科


码位（code point） - MDN Web 文档术语表：Web 相关术语的定义

码位（code point）
==============

**码位**是表示文本的系统（例如 Unicode）中用于表示抽象字符的数值。在 Unicode 中，码位以“U+1234”的形式表示，其中的“1234”是分配的数值。例如，字符“A”被分配的码位是 U+0041。

字符编码形式（例如 UTF-8 和 UTF-16）决定了如何将 Unicode 码位编码成一个字节序列。不同的编码形式可以将相同的码位编码成不同的字节序列：例如，西里尔字符“Ф”，它的码位是 U+0424，在 UTF-8 中的编码为 `0xd0a4`，在 UTF-16 中的编码为 `0x0424`。

参见
--

* Unicode 标准：码位和字符


CalDAV - MDN Web 文档术语表：Web 相关术语的定义

CalDAV
======

CalDAV（WebDAV 的日历扩展 (Calendaring extensions to WebDAV)）是一种由 IETF (en-US) 标准化的协议，用于远程访问服务器上的日历数据。

参见
--

* 维基百科上的 CalDAV
* RFC 4791: Calendaring extensions to WebDAV (CalDAV)
* RFC 6638: Scheduling Extensions to CalDAV


Information architecture - MDN Web 文档术语表：Web 相关术语的定义

Information architecture
========================

应用于 web 设计和开发的信息架构是组织一个 web 站点的信息、内容和功能的实践，信息和服务的易使用和易查找使得它能提供最好的用户体验。

参见
--

* Information architecture on Wikipedia


Class（类） - MDN Web 文档术语表：Web 相关术语的定义

Class（类）
========

在面向对象编程中（object-oriented programming）, 一个 *类* 定义了一个对象（object's）的特征。类是定义对象属性（properties）和方法（methods）的模板，是用来绘制具体对象实例的“蓝图”.

参见
--

* Class-based vs. prototype-based programming languages (like JavaScript)
* Using functions as classes in JavaScript
* Class-based programming on Wikipedia
* Object-oriented programming on Wikipedia


Cross-site scripting（跨站脚本攻击） - MDN Web 文档术语表：Web 相关术语的定义

Cross-site scripting（跨站脚本攻击）
============================

跨站脚本攻击（Cross-site scripting，XSS）是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。若受害者运行这些恶意代码，攻击者就可以突破网站的访问限制并冒充受害者。根据开放式 Web 应用安全项目（OWASP），XSS 在 2017 年被认为 7 种最常见的 Web 应用程序漏洞之一。

如果 Web 应用程序没有部署足够的安全验证，那么，这些攻击很容易成功。浏览器无法探测到这些恶意脚本是不可信的，所以，这些脚本可以任意读取 cookie，session tokens，或者其他敏感的网站信息，或者让恶意脚本重写HTML内容。

在以下 2 种情况下，容易发生 XSS 攻击：

1. 数据从一个不可靠的链接进入到一个 Web 应用程序。
2. 没有过滤掉恶意代码的动态内容被发送给 Web 用户。

恶意内容一般包括 JavaScript，但是，有时候也会包括 HTML，FLASH 或是其他浏览器可执行的代码。XSS 攻击的形式千差万别，但他们通常都会：将 cookies 或其他隐私信息发送给攻击者，将受害者重定向到由攻击者控制的网页，或是经由恶意网站在受害者的机器上进行其他恶意操作。

XSS 攻击可以分为 3 类：存储型（持久型）、反射型（非持久型）、DOM 型。

**存储型 XSS**

注入型脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器上传回并执行。

**反射型 XSS**

当用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。Web 服务器将注入脚本，比如一个错误信息，搜索结果等 返回到用户的浏览器上。由于浏览器认为这个响应来自"可信任"的服务器，所以会执行这段脚本。

**基于 DOM 的 XSS**

通过修改原始的客户端代码，受害者浏览器的 DOM 环境改变，导致有效载荷的执行。也就是说，页面本身并没有变化，但由于 DOM 环境被恶意修改，有客户端代码被包含进了页面，并且意外执行。

参见
--

* Type of Attacks: Cross-site scripting (XSS) (en-US)
* Cross-site scripting on Wikipedia
* Cross-site scripting on OWASP
* Another article about Cross-site scripting


ECMAScript - MDN Web 文档术语表：Web 相关术语的定义

ECMAScript
==========

**ECMAScript** 是 JavaScript 所基于的脚本语言。Ecma 国际组织 负责将 ECMAScript 标准化。

参见
--

* 维基百科上的 ECMAScript
* ECMAScript


算法 - MDN Web 文档术语表：Web 相关术语的定义

算法
==

算法是一个良定义的具体计算步骤的一个序列。

换句话说，一个算法就是由人或机器可重复的解决问题的方法。计算机科学家们使用算法的复杂度（又称 O 标记法）来表示算法的效率。

例如：

* 一道菜谱就是供人使用的算法
* 一种编程中常用的排序算法就是用来描述计算机如何给数据排序的

常用的算法有寻找最优路径算法，例如“旅行推销员问题”、“树的遍历算法”等。

还有很多机器学习算法例如“线性回归”、“决策树”、“随机森林”、“支持向量机”、“循环神经网络（RNN）”、“长短时记忆（LSTM）神经网络”、“卷积神经网络（CNN）”、“深度卷积神经网络”等。

参见
--

* Algorithm，维基百科
* Explanations of sorting algorithms
* Explanations of algorithmic complexity


String - MDN Web 文档术语表：Web 相关术语的定义

String
======

在任何计算机编程语言中，字符串都是用于表示文本的字符序列。

在 JavaScript 中，字符串是基本类型的其中一个，而 `String` 是 wrapper (en-US) 围绕字符串的基本形式。

参见
--

* 维基百科上的字符串
* JavaScript 数据类型和数据结构


正常模式 - MDN Web 文档术语表：Web 相关术语的定义

正常模式
====

因为翻译原因，正常模式也被翻译为——马虎模式/稀松模式/懒散模式

ECMAScript 5 以及其后续的版本可以选择性的使用一种新模式——严格模式 (strict mode)，这种严格模式在多个方面改变了 JavaScript 的语义，从而使得当出现问题时我们更好的理解到底发生了什么。

常见的，非严格模式——平时我们会称之为正常模式 (\*\*sloppy mode)，\*\*这并不是一个官方说法，但是你会经常见到如上的一些说法，其意义就是指代非严格模式，即正常模式。

参见
--

* "Strict Mode"，第七章 ("JavaScript Syntax")，《Speaking *JavaScript》*


标识符 - MDN Web 文档术语表：Web 相关术语的定义

标识符
===

**标识符**是代码中用来标识变量、函数或属性的字符序列。

在 JavaScript 中，标识符只能包含字母或数字或下划线（“\_”）或美元符号（“$”），且不能以数字开头。标识符与字符串不同之处在于字符串是数据，而标识符是代码的一部分。在 JavaScript 中，无法将标识符转换为字符串，但有时可以将字符串解析为标识符。

参见
--

* Identifier on Wikipedia


DoS 攻击 - MDN Web 文档术语表：Web 相关术语的定义

DoS 攻击
======

DoS（拒绝服务攻击，Denial of Service）是一种网络攻击手段，它通过给服务器发送大量请求来阻止对资源的合法使用。

计算机资源有限，比如算力和内存。当这些资源过载时，程序可能会发生冻结或崩溃，使程序不可用。DoS 攻击结合多种技术来消耗资源，使合法用户无法使用服务器或网络，或者至少让服务器反应迟缓。

分布式拒绝服务（Distributed Denial of Service，DDoS）攻击是一种使用大量服务器来耗尽一台被攻击电脑的资源的攻击方式。

### DoS 攻击类型

DoS 攻击更多的是一种类型而非特定的某种攻击。下面是 DoS 攻击的不完全列表：

* 带宽攻击
* 服务请求洪泛
* SYN 洪泛攻击
* ICMP 洪泛攻击
* 点对点攻击
* 永久 DoS 攻击
* 应用层洪泛攻击
参见
--

* 维基百科拒绝服务攻击词条
* OWASP 介绍的拒绝服务攻击
* DDoS


Gutters - MDN Web 文档术语表：Web 相关术语的定义

Gutters
=======

**网格间距**是网格轨道之间的间距，可以通过 `grid-column-gap` (en-US)，`grid-row-gap` (en-US) 或者 `grid-gap` (en-US) 在Grid 布局中创建。

在下面的例子中，由一个三列两行的网格。它的列轨道之间有 20px 的间距，行轨道之间有 20px 的间距。

示例
--
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #fff8f8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1.2fr);
  grid-auto-rows: 45%;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

在网格大小上，网格间距参与计算就好像规则的网格轨道一样，但是没有任何东西可以被放置到网格间距上。网格间距也像网格线一样在那个位置会增加额外的大小，因此网格项目会被放置在网格间距末的那条网格线后。

能够导致轨道被间隔开来的，除了网格间距属性，还有 margins，padding 或者使用盒模型对齐中的空间分布属性。这些方法都会导致可见间距的产生，因此网格间距属性不等价于”间距大小“，除非你没有使用这些能够产生间距的方法。

参见
--

### 属性参考

* `grid-column-gap` (en-US)
* `grid-row-gap` (en-US)
* `grid-gap` (en-US)
### 扩展阅读

* CSS Grid Layout Guide: *Basic concepts of grid layout*
* Definition of gutters in the CSS Grid Layout specification


密码学 - MDN Web 文档术语表：Web 相关术语的定义

密码学
===

**密码学**是研究如何安全地编码和传递消息的学科。密码学设计和研究用于在不安全环境中编码和解码消息，以及它们的应用。

除了**数据机密性**，密码学还涉及**身份识别**、**身份验证**、**不可否认**以及**数据完整性**。因此，它还研究在上下文中密码方法的使用，这称为**密码系统**。

参见
--

* 维基百科上的密码学
* MDN Web 文档术语
    + 分组密码工作模式
    + 密码
    + 密文
    + 密码套件
    + 密码分析 (en-US)
    + 解密
    + 加密
    + 密钥
    + 明文
    + 非对称加密 (en-US)
    + 对称密钥加密 (en-US)


CRLF - MDN Web 文档术语表：Web 相关术语的定义

CRLF
====

回车符（CR）和换行符（LF）是文本文件用于标记换行的控制字符或字节码。

* CR = **Carriage Return**，回车符号（`\r`，十六进制为 `0x0D`，十进制为 13），用于将光标移动到行首，并不前进至下一行。
* LF = **Line Feed**，换行符号（`\n`, 十六进制为 `0x0A`，十进制为 10）。

紧邻的 CR 和 LF（组成 CRLF，`\r\n`，或十六进制 `0x0D0A`）将光标移动到行首，然后再移动至下一行。

参见
--

* 维基百科上的换行符
* 维基百科上的回车符


Prototype - MDN Web 文档术语表：Web 相关术语的定义

Prototype
=========

原型是一种在开发生命周期的早期显示应用程序或产品的外观和行为的模型。

请参见 继承和原型链

参见
--

* Software Prototyping 维基百科


明文 - MDN Web 文档术语表：Web 相关术语的定义

明文
==

明文指的是作为加密算法输入的信息，或者是解密后的密文。

通常与指代任何信息（例如文本文档、图像等）的 *cleartext* 一词交互使用，此时信息还没有被加密，可不附加任何处理地供人类和计算机阅读。


SVG - MDN Web 文档术语表：Web 相关术语的定义

SVG
===

可缩放矢量图形 (**SVG**) 是一个基于 XML 语法的 2D 矢量图形格式。

W3C (en-US) 于 20 世纪 90 年代末开始着手 SVG 的工作，但是当 Internet Explorer 9 推出 SVG 支持时，SVG 才变得流行起来。现在所有主流 browsers 都支持 SVG。

基于 XML 语法，你可以使用 CSS 指定 SVG 的样式，并使用 JavaScript 进行交互。HTML5 现在允许将 SVG tags 直接嵌入到 HTML 文档中。

作为一种矢量图像格式，SVG 图形可以无限地扩展，这使其在 responsive design (en-US) 中非常有用，因为你可以创建可缩放到任意屏幕大小的界面元素和图形。SVG 还提供了一组有用的工具，例如裁剪，遮罩，过滤器和动画。

参见
--

* 维基百科上的 SVG
* W3.org's SVG Primer
* SVG documentation on MDN
* Latest SVG specification


可序列化对象 - MDN Web 文档术语表：Web 相关术语的定义

可序列化对象
======

**可序列化对象**（Serializable object）是可以在任何 JavaScript 环境（领域，realm）中序列化、反序列化的对象。例如，这允许将此类对象存储在磁盘上并在以后进行恢复，或使用 `structuredClone()` 对它们进行拷贝，又或者使用 `DedicatedWorkerGlobalScope.postMessage()` (en-US) 在 Worker 之间共享它们。

序列化可能不包括原始对象的所有属性和其他方面的内容。例如，对 `DOMException` 的序列化必须包含 `name` 和 `message` 属性，但是否包含其他属性则取决于具体实现。因此，反序列化的对象并不一定是与原始对象相同的拷贝。但是，反序列化得到的新的对象将会是一个深拷贝，因此任何从原始对象序列化并反序列化到新的对象的属性都不会和原始对象共享任何引用。

在某些情况下，当序列化和反序列化一个对象时，可能会转移一些资源而非拷贝它们。可以转移的对象被称为可转移对象。

支持的对象
-----

所有的基本类型都是可以被序列化的。但并非所有的对象都是可序列化对象。可以被序列化的对象在结构化克隆算法 > 支持的类型中列出。

**备注：** 可序列化对象在 Web IDL 文件中使用属性 `[Serializable]` 标记。


Descriptor (解释器) (CSS) - MDN Web 文档术语表：Web 相关术语的定义

Descriptor (解释器) (CSS)
======================

一个 **CSS 解释器**定义一条 `@ 规则`的属性。一条 @ 规则可以有一条或多条解释器。每一条解释器拥有：

* 一个名称
* 一个值，用于定义其名称的属性
* 一个可选的 "!important" 标识，默认不带有。


HTML - MDN Web 文档术语表：Web 相关术语的定义

HTML
====

HTML（HyperText Markup Language，超文本标记语言）是一种描述语言，用来定义网页结构。

发展历史
----

1990 年，由于对 Web 未来发展的远见，Tim Berners-Lee 提出了 超文本 的概念，并在第二年在 SGML (en-US) 的基础上将其正式定义为一个标记语言。IETF (en-US) 于 1993 年正式开始制定 HTML 规范，并在经历了几个版本的草案后于 1995 年发布了 HTML 2.0 版本。1994 年，Berners-Lee 为了 Web 发展而成立了 W3C (en-US)。1996 年，W3C 接管了 HTML 的标准化工作，并在 1 年后发布了 HTML 3.2 推荐标准。1999 年，HTML 4.0 发布，并在 2000 年成为 ISO (en-US) 标准。

自那以后，W3C 几乎放弃了 HTML 而转向 XHTML，并于 2004 年成立了另一个独立的小组 WHATWG。幸运的是，WHATWG 后来又转回来参与了 HTML5 标准的制定，两个组织（译注：即 W3C 和 WHATWG）在 2008 年发布了第一份草案，并在 2014 年发布了 HTML5 标准的最终版。

概念和语法
-----

HTML 文档是包含多个 HTML 元素 的文本文档。每个元素都用一对开始和结束 标签 包裹。每个标签以尖括号（`<>`）开始和结束。也有一部分标签中不需要包含文本，这些标签称为空标签，如 `<img>`。

你可以使用 属性 来扩展 HTML 标签。属性用来提供一些附加信息，这些信息可能会影响浏览器对元素的解析：

![Detail of the structure of an HTML element](/zh-CN/docs/Glossary/HTML/anatomy-of-an-html-element.png)

HTML 文件通常会以 `.htm` 或 `.html` 为扩展名。用户可以从 Web 服务器 中下载，并使用任一 Web 浏览器 来解析和显示。

参见
--

* 维基百科 HTML 词条
* HTML 教程
* codecademy.com 上的在线教程
* MDN HTML 文档
* HTML 规范


渐进增强 - MDN Web 文档术语表：Web 相关术语的定义

渐进增强
====

**渐进增强**（Progressive enhancement）是一种设计理念，其核心是为尽可能多的用户提供基本内容和功能，同时进一步为现代化浏览器用户提供最佳体验，运行所有需要的代码。

特性检测通常用于确定浏览器是否可以处理高级内容，而polyfill通常用于使用 JavaScript 构建缺少的功能。

另外请关注无障碍支持 — 尽可能提供备选方案。

这个技术很有用，因为它让 Web 开发者，在专注开发最强大的网站同时，和某些未知的用户代理在访问网站时发生问题，两者之间达到权衡。 优雅降级 相关而不同 — 通常被视为与渐进增强相反的方向。实际上，这两种方法都是有效的，并且通常可以相互补充。

参见
--

* 维基百科的渐进增强


分组密码工作模式 - MDN Web 文档术语表：Web 相关术语的定义

分组密码工作模式
========

分组密码工作模式（Block cipher mode of operation）通常在上下文中称为“模式”，它指定应如何使用分组密码来加密或解密长于块大小的消息。

当前使用的大多数对称密钥算法都是分组密码：这意味着它们一次加密一个块的数据。每个块的大小是固定的，并由算法确定：例如，AES 使用 16 字节的块。分组密码始终与一种模式一起使用，该模式指定了如何安全加密长度超过块大小的消息。例如，AES 是密码，而 CTR、CBC 和 GCM 都是模式。使用不合适的模式或不正确地使用模式会完全破坏基础加密算法提供的安全性。


CSRF - MDN Web 文档术语表：Web 相关术语的定义

CSRF
====

跨站请求伪造（CSRF）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。例如，这些非预期请求可能是通过在跳转链接后的 URL 中加入恶意参数来完成：

```html
<img src="https://www.example.com/index.php?action=delete&id=123" />
```

对于在 `https://www.example.com` 有权限的用户，这个 `<img>` 标签会在他们根本注意不到的情况下对 `https://www.example.com` 执行这个操作，即使这个标签根本不在 `https://www.example.com` 内亦可。

有很多预防 CSRF 的方法，比如实现 RESTful API，增加 secure token 等等。

参见
--

* 跨站请求伪造 on Wikipedia
* 防御方法


ASCII - MDN Web 文档术语表：Web 相关术语的定义

ASCII
=====

**ASCII** (*American Standard Code for Information Interchange，美国信息交换标准码*) 是计算机中最常用的编码方式，用于将字母，数字，标点符号和控制字符转换为计算机可以理解的数字形式。从 2007 年开始逐渐被UTF-8 代替。

更多：
---

### 基本知识

ASCII on Wikipedia


IndexedDB - MDN Web 文档术语表：Web 相关术语的定义

IndexedDB
=========

IndexedDB 是一个用于在浏览器中储存较大数据结构的 Web API, 并提供索引功能以实现高性能查找。像其他基于 SQL 的 关系型数据库管理系统 (RDBMS) 一样，IndexedDB 是一个事务型的数据库系统。然而，它是使用 JavaScript 对象而非列数固定的表格来储存数据的。

参见
--

* MDN 页面 IndexedDB API
* The W3C specification for IndexedDB


Parse - MDN Web 文档术语表：Web 相关术语的定义

Parse
=====

Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the JavaScript engine inside browsers.

Parsing 就是将程序解析以及转换成能够在运行环境中运行的计算机内部格式，浏览器中的JavaScript 驱动就是一个很好的解析例子。

In JavaScript, this is done during compile time or whenever the parser (en-US) is invoked, such as during a call to a method.

JavaScript 中的解析过程一般在compile time中完成，或者是在任意parser (en-US) 参与的时候完成。比如说在调用一个 JS 方法的过程中完成 parsing。

Learn more
----------

### General knowledge

* Parse on Wikipedia


UTF-8 - MDN Web 文档术语表：Web 相关术语的定义

UTF-8
=====

UTF-8 (UCS Transformation Format 8) 是万维网上最常用的字符编码。每个字符由 1 到 4 个字节表示。UTF-8 与 ASCII 向后兼容，可以表示任何标准的 Unicode 字符。

前 128 个 UTF-8 字符与前 128 个 ASCII 字符 (编号为 0-127) 精确匹配，这意味着现有的 ASCII 文本已经是有效的 UTF-8。所有其他字符都使用 2 到 4 个字节。每个字节都有一些用于编码目的的保留位。由于非 ASCII 字符需要一个以上的字节来存储，如果字节被分隔而不重组，那么它们就会有损坏的风险。

参见
--

* UTF-8 on Wikipedia
* FAQ about UTF-8 on Unicode website


IDE - MDN Web 文档术语表：Web 相关术语的定义

IDE
===

集成编程开发环境 (**I**ntegrated **D**evelopment **E**nvironment) 或交互式开发环境，是为程序员提供了软件开发所需的完善工具链的软件应用。一个 IDE 通常包含一个代码编辑器，自动编译工具和一个调试器。

### General knowledge

* IDE on Wikipedia


空值 - MDN Web 文档术语表：Web 相关术语的定义

空值
==

在 JavaScript 中，一个空值（nullish value）要么是 `null`，要么是 `undefined`。空值总是假值。


RSS - MDN Web 文档术语表：Web 相关术语的定义

RSS
===

**RSS**（简易信息聚合）指的是用于发布站点更新的数种 XML 文档格式。当你订阅一个网站的 RSS 摘要时，网站会将 RSS 信息和更新信息发送到一个称为资讯（feed）的 RSS 文档中，因此你无需手动查看所有喜爱的网站就可以获取这些网站的更新动态。

参见
--

* 维基百科上的 RSS
* 最新的 RSS 标准


First paint - MDN Web 文档术语表：Web 相关术语的定义

First paint
===========

**First Paint**，是Paint Timing API的一部分，是页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的中间时，渲染是任何与输入网页导航前的屏幕上的内容不同的内容。它回答了“发生了什么？”这个问题。

另请参看
----

* First meaningful paint (en-US)
* First contentful paint (en-US)
* Paint Timing API


Native - MDN Web 文档术语表：Web 相关术语的定义

Native
======

一个*原生*的应用程序在被编译后，可以在由指定结构组成的硬件/软件环境中运行

原生安卓应用的一个例子：在安卓工具链的支持下使用 Java 编写的手机应用

从另一方面来讲，一个在浏览器中运行的网页应用就不是原生——其必须运行在基于原生环境的浏览器中，而不是在原生环境本身。

参见
--

* 维基百科上的 Native (computing)


BigInt - MDN Web 文档术语表：Web 相关术语的定义

BigInt
======

在 JavaScript 中，**BigInt** 是一种数字数据类型，它可以表示任意精度格式的整数。而在其他编程语言中，可以存在不同的数字类型，例如：整数、浮点数、双精度浮点数或大整数（Bignum）。

参见
--

* 维基百科上的数字类型
* JavaScript 类型：`BigInt`
* JavaScript 全局对象 `BigInt`


伪代码 - MDN Web 文档术语表：Web 相关术语的定义

伪代码
===

伪代码（Pseudocode）指的是类似于代码的语法，一般用于向人类表明某些代码语法是如何工作的，或者说明某项代码结构的设计。如果你试图把它当作代码来运行，它**不会**起作用。

参见
--

* 维基百科上的伪代码词条。


码元（Code unit） - MDN Web 文档术语表：Web 相关术语的定义

码元（Code unit）
=============

**码元**是字符编码系统（例如 UTF-8 或 UTF-16）使用的基本组成部分。字符编码系统将一个 Unicode 码位编码为一个或者多个码元。

在 UTF-16（JavaScript 字符串使用的编码系统）中，码元是 16 位值。这意味着索引到字符串或者获取字符串长度等操作将在这些 16 位单元上进行。这些单元不总是一对一地映射到我们可能认为的字符上。

例如，带有附加符号（例如重音符号）的字符有时会使用两个 Unicode 码位表示：

```js
const myString = "\u006E\u0303";
console.log(myString); // ñ
console.log(myString.length); // 2
```

此外，由于并非 Unicode 定义的所有码位都适合 16 位，因此很多 Unicode 码位都编码为一对 UTF-16 码元，称为*代理对*：

```js
const face = "🥵";
console.log(face.length); // 2
```

JavaScript `String` 对象的 `codePointAt()` 方法可以让你从它的编码形式检索到 Unicode 码位：

```js
const face = "🥵";
console.log(face.codePointAt(0)); // 129397
```

参见
--

* Unicode 编码常见问题


全局对象 - MDN Web 文档术语表：Web 相关术语的定义

全局对象
====

一个全局对象是一个永远存在于 global scope (en-US) 的 object.

在 JavaScript 中，有一个永远被定义的全局对象。在一个 web 浏览器中，当脚本创建全局变量时，他们作为该全局对象的成员被创建。(在 Node.js 不是这样.) 全局对象的 interface 取决于脚本在其中运行的执行上下文。例如：

* 在 Web 浏览器中，脚本没有专门作为后台任务启动的任何代码都将`Window` 作为其全局对象。这是 Web 上绝大多数的 JavaScript 代码。
* 在 `Worker` 中运行的代码将`WorkerGlobalScope` (en-US) 对象作为其全局对象。
* 在Node.js 环境下运行的脚本具有一个称为`global` 的对象作为其全局对象。
浏览器中的 `window` 对象
-----------------

`window` 对象是浏览器中的全局对象。任何全局变量或者全局函数都可以通过 `window` 的属性来访问。

### 访问全局变量

```js
var foo = "foobar";
foo === window.foo; // Returns: true
```

在定义全局变量 `foo` 之后，我们可以通过 `window` 对象的属性来访问它。把变量名 `foo` 作为全局对象的 `window.foo` 的属性名来使用。

#### 解释：

全局变量 `foo` 存储在 `window` 对象中，像这样：

```js
foo: "foobar";
```

### 访问全局函数

```js
function greeting() {
  console.log("Hi!");
}

window.greeting(); // It is the same as the normal invoking: greeting();
```

上面解释了全局对象如果作为 `window` 对象的属性而存储的。我们创建了全局函数 `greeting` ，然后通过 `window` 对象来调用它。.

#### 解释：

全局函数 `greeting` 存储在 `window` 对象中，像这样：

```js
greeting: function greeting() {
  console.log("Hi!");
}
```

参见
--

* MDN Web Docs Glossary
    + global scope (en-US)
    + object
* `Window`
* `WorkerGlobalScope` (en-US)
* `global`


密码散列函数 - MDN Web 文档术语表：Web 相关术语的定义

密码散列函数
======

加密散列函数有时也称为*摘要函数*，其是一种密码学原语，将任意大小的信息转为固定大小的消息，称为摘要。加密散列函数通常用于授权、数字签名以及密钥散列消息认证码。

散列函数必须有以下特征才能用于密码学：

* 快速计算（因为它们需要频繁地生成）
* 不可逆（每个摘要可能来自拥有庞大数据的消息，并且仅有暴力破解才能生成产生给定摘要的消息）
* 防篡改（对消息的任何改变都会产生不同的摘要）
* 抗碰撞（应该不可能找到两个不同的消息产生相同的摘要）

像 MD5 和 SHA-1 这样的加密散列函数被认为是不安全的，因为已经发现了可以显著降低它们抗碰撞性的攻击。

参见
--

* 维基百科上的加密散列函数
* MDN Web 文档术语
    + 对称密钥加密 (en-US)


IPv6 - MDN Web 文档术语表：Web 相关术语的定义

IPv6
====

**IPv6** 是当前版本的互联网（Internet）通信协议（protocol）。IPv6 正在慢慢地取代 IPv4 (en-US)，因为 IPv6 允许使用更多不同的 IP 地址。

参见
--

* IPv6 on Wikipedia


自执行匿名函数 - MDN Web 文档术语表：Web 相关术语的定义

自执行匿名函数
=======

一个 JavaScript 函数在定义后立即执行。也被熟知为 IIFE（立即调用函数表达式）。

请浏览上面 IIFE 解释页链接获取更多信息。


NaN - MDN Web 文档术语表：Web 相关术语的定义

NaN
===

NaN(不是一个数字) 是一种数值表达形式 data type这意味一种未定义的值或者不能够被描述的值，尤其浮点型结算的结果。

举例，NaNs 能够描述无穷大，数字除 0 的结果，缺少值，或者平方根为负数（这是虚构的，而浮点数是真实的）。

实际上，如果我在JavaScript 程序中划分两个变量，结果可能是 NaN，它在 JavaScript 中被预定义为“undefined”。于是这个除法可能中断程序。现在，如果这个计算是一个大规模算法的一小部分，那么确定错误实际发生的地方真的很困难。幸运的是，由于结果将是 NaN，我知道我的除数可能会变为 0，我可以设置防止任何此类计算的测试条件，或通知我发生的位置。

参见
--

* NaN 在维基百科
* NaN in JavaScript


XQuery - MDN Web 文档术语表：Web 相关术语的定义

XQuery
======

**XQuery** 是一门用于更新、检索以及计算 XML 数据库中数据的计算机语言。

参见
--

* 官方网站
* 维基百科上的 XQuery


SDP - MDN Web 文档术语表：Web 相关术语的定义

SDP
===

**SDP** (Session Description Protocol) 是一个描述peer-to-peer (en-US) 连接的标准。SDP 包含音视频的：编解码 (codec),源地址，和时间信息。

下面是一个典型的 SDP 信息示例：
```

v=0
o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
s=
c=IN IP4 host.anywhere.com
t=0 0
m=audio 49170 RTP/AVP 0
a=rtpmap:0 PCMU/8000
m=video 51372 RTP/AVP 31
a=rtpmap:31 H261/90000
m=video 53000 RTP/AVP 32
a=rtpmap:32 MPV/90000
```

SDP 协议从不会被单独使用，而是依靠 RTP (en-US) 和RTSP (en-US)等协议.SDP 也作为WebRTC的组件之一，用于描述一个 session 会话。

参见
--

* WebRTC protocols
* Session Description Protocol on Wikipedia


类型 - MDN Web 文档术语表：Web 相关术语的定义

类型
==

**类型** (*或数据类型*) 是决定 value 可以存为哪个类型的特性 —例如在 JavaScript 中一个 `Boolean` (en-US) 只能存放 `true`或`false` , 而一个 `String` 能存放任何字符串 , 一个 `Number` 存放任何类型的数字 , 等等...

值的数据类型也影响哪个操作对该值有效。例如，一个整数可以乘以一个整数，而不是一个字符串。

参见
--

* 维基百科的 Data type
* JavaScript 的数据类型


散列 - MDN Web 文档术语表：Web 相关术语的定义

散列
==

散列（Hash）函数采用可变长度消息输入并产生固定长度的散列输出。它通常以 128 位“指纹”或“消息摘要”的形式出现。散列函数对密码学非常有用——它们确保传输数据的完整性，这也为提供消息认证的 HMAC 提供了基础。

参见
--

* 维基百科上的散列函数词条


CDN - MDN Web 文档术语表：Web 相关术语的定义

CDN
===

**CDN** (内容分发网络) 指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。CDNs 提供快速服务，较少受高流量影响。

CDNs 被广泛用于传输 stylesheets 和 JavaScript 等静态资源，像 Bootstrap，Jquery 等。对这些库文件使用 CDN 技术，有以下几点好处：

* 通过 CDN 向用户分发传输相关库的静态资源文件，可以降低我们自身服务器的请求压力。
* 大多数 CDN 在全球都有服务器，所以 CDNs 上的服务器在地理位置上可能比你自己的服务器更接近你的用户。地理距离会按比例影响延迟。
* CDNs 已经配置了恰当的缓存设置。使用 CDN 节省了在你的服务器中对静态资源文件的配置。


数字证书 - MDN Web 文档术语表：Web 相关术语的定义

数字证书
====

数字证书是一个将公开的加密密钥和一个组织绑定的数据文件。一个数字证书包含一个组织的信息，如公共名称（例如 mozilla.org），组织单元（例如 Mozilla Corporation）以及位置（例如 Mountain View）。数字证书通常由certificate authority (en-US)签署，以证明其真实性。

参见
--

* Wikipedia 上的Digital certificate


签名 - MDN Web 文档术语表：Web 相关术语的定义

签名
==

根据上下文，术语 **签名**可以有几个含义。可以参考：

Signature (functions)（函数签名）
一个**函数签名 (**或*类型*签名，或*方法*签名**)** 定义了 Function 或 Method 的输入与输出。
签名（安全）
**签名**或*数字签名*是 protocol，表明消息是真实的。
参见
--

* Signature on Wikipedia


Codec - MDN Web 文档术语表：Web 相关术语的定义

Codec
=====

编解码器（从“coder-decoder”派生的混合词）是对数据流进行编码或解码的程序、算法或设备。给定的编解码器知道如何处理特定的编码或压缩技术。

Learn more
----------

### General knowledge

* Codec on Wikipedia
### Technical reference

* Media formats supported by the HTML audio and video elements


NAT - MDN Web 文档术语表：Web 相关术语的定义

NAT
===

**NAT** (网络地址翻译) 是一个能够让多台主机共享一个 IP 地址的技术。NAT 会给局域网内每台主机分配一个唯一的地址同时调整输入和输出的网络流量，使之能够发送到正确的位置。

参见
--

* WebRTC 协议
* NAT 在 Wikipedia


浏览器扩展 - MDN Web 文档术语表：Web 相关术语的定义

浏览器扩展
=====

浏览器扩展是一种跨浏览器系统，用于开发 Firefox 的浏览器扩展。这个系统能够提供许多 API，在很大程度上能够被不同的浏览器所支持，例如 Mozilla Firefox，Google Chrome，Opera 浏览器，微软 Edge 和 Apple Safari 浏览器。

参见
--

* MDN 上的 浏览器扩展。


SSL（安全套接层） - MDN Web 文档术语表：Web 相关术语的定义

SSL（安全套接层）
==========

**SSL**（Secure Sockets Layer，安全套接层）是旧的标准安全技术，用于在服务器和客户端之间创建加密的网络链路，确保传递的所有数据都是私密且安全的。SSL 的当前版本是 Netscape 于 1996 年发布的 3.0 版本，已被 TLS 协议取代。

参见
--

* 传输层安全性协议（维基百科）
* 传输层安全协议（TLS）
* 术语表
    + HTTPS
    + TLS


缓冲区 - MDN Web 文档术语表：Web 相关术语的定义

缓冲区
===

缓冲区是物理内存中的一个存储区域，当数据进行转移时用来临时存放数据。

参见
--

* 维基百科上的缓冲器词条


万维网 - MDN Web 文档术语表：Web 相关术语的定义

万维网
===

*万维网*（World Wide Web）——一般称其为 **WWW**、**W3** 或 **the Web**——是通过互联网访问公共网页的互连系统。Web 与互联网不一样：Web 是建立在互联网之上的许多应用程序之一。

Tim Berners-Lee 提出了被称为万维网的架构。他在 1990 年在 CERN 物理研究实验室的计算机上创建了第一个 web 服务器、web 浏览器和网页。1991 年，他在 alt.hypertext 新闻组上宣布了他的创作，那一刻标志着 Web 的首次公开。

我们今天认为的“Web”系统由几个组件组成：

* **HTTP** 协议，管理服务器和客户端之间的数据传输。
* 要访问 Web 组件，客户端提供唯一的通用标识符，称为 **URL**（统一资源定位符）或 URI（统一资源标识符）（正式称为通用文档标识符（UDI））。
* **HTML**（超文本标记语言）是发布 Web 文档的最常用格式。

通过超链接连接资源是 Web 的定义概念，帮助其身份作为连接文档的集合。

Tim Berners-Lee 在发明 Web 之后不久就创建了 W3C (en-US)（万维网联盟），进一步规范和开发 Web。该联盟由核心 Web 兴趣小组组成，如网页浏览器开发人员、政府机构、研究人员和大学。其使命包括教育和外联。

参见
--

* 学习网络
* 维基百科上的万维网词条
* W3C 网站


Hypertext - MDN Web 文档术语表：Web 相关术语的定义

Hypertext
=========

Hypertext 包含了指向其他文本的链接，而不是像小说中的单一线性流。

这个术语是由 Ted Nelson 在 1965 年左右提出的。

参见
--

* 维基百科上的Hypertext


ECMA - MDN Web 文档术语表：Web 相关术语的定义

ECMA
====

**Ecma International**（正式名称是 *European Computer Manufacturers Association，欧洲计算机制造商协会*）是一个开发计算机硬件、通信和程序语言标准的非盈利组织。

在网络上该组织因维护 JavaScript 语言的核心规范 the ECMA-262 specification（即 ECMAScript）而为人所知。

参见
--

* Wikipedia 页面 Ecma International
* The Ecma International web site


节点 - MDN Web 文档术语表：Web 相关术语的定义

节点
==

术语**节点**（Node）根据不同的上下文，可以是多种不同的意思。它可能是：

节点（DOM）
在 DOM 的上下文中，节点（Node）是节点树中的单个点。包括文档本身、元素、文本以及注释都属于是节点。
节点（网络）
在网络中，**节点**是网络中的一个连接点。在物理网络中，节点通常是一个设备，如计算机或路由器。

这个词的另一个含义，我们将在 Node.js 中讨论。


Three js - MDN Web 文档术语表：Web 相关术语的定义

Three js
========

three.js，一WebGL引擎，基于JavaScript，可直接运行 GPU 驱动游戏与图形驱动应用于浏览器。其库提供大量特性与API以绘制 3D 场景于浏览器。

参见
--

* Three.js维基词条
* three.js 官网


应用层协议协商（ALPN） - MDN Web 文档术语表：Web 相关术语的定义

应用层协议协商（ALPN）
=============

**应用层协议协商**（**Application-Layer Protocol Negotiation**，简称 **ALPN**）是由 RFC 7301 定义的一个 TLS 扩展，故而应用层协议在协商加密协议的过程中，避免了额外的往返通讯开销。

| 协议 | 标识符字节序列 |
| --- | --- |
| HTTP/1.1 | `0x68 0x74 0x74 0x70 0x2F 0x31 0x2E 0x31` ("http/1.1") |
| HTTP/2 | `0x68 0x32` ("h2") |
| HTTP/2 over cleartext TCP | `0x68 0x32 0x63` ("h2c") |

参见
--

* IANA 注册的 ALPN 标识符


Truthy（真值） - MDN Web 文档术语表：Web 相关术语的定义

Truthy（真值）
==========

在 JavaScript 中，**truthy**（真值）指的是在布尔值上下文中，转换后的值为 `true` 的值。被定义为假值以外的任何值都为真值。（即所有除 `false`、`0`、`-0`、`0n`、`""`、`null`、`undefined` 和 `NaN` 以外的皆为真值）。

JavaScript 在布尔值上下文中使用强制类型转换。

JavaScript 中的*真值*示例如下（将被转换为 `true`，因此 `if` 后的代码段将被执行）：

```js
if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
```

### 逻辑与运算 &&

如果第一个对象为真值，则逻辑与运算返回第二个操作数。

```js
true && "dog"
// returns "dog"

[] && "dog"
// returns "dog"
```

参见
--

* 假值
* 强制类型转换
* 布尔值


异常 - MDN Web 文档术语表：Web 相关术语的定义

异常
==

**异常**（Exception）是指中断正常代码执行的条件。在 JavaScript 中语法错误是一个非常常见的异常来源。

参见
--

* 维基百科上的异常处理词条


Character encoding（字符编码） - MDN Web 文档术语表：Web 相关术语的定义

Character encoding（字符编码）
========================

一套编码系统定义字节与文本间的映射。一连串字节文本能让不同文本解释得以进行。我们指明一套特定编码系统时（如 UTF-8），也就指明了字节得以解释的方式。

例如，我们通常在 HTML 里声明 UTF-8 字符编码，使用如下：

```html
<meta charset="utf-8" />
```

这就确保你在 HTML 文档中可以使用几乎任何一种人类语言中的字符，并且会稳定显示。

参见
--

* Character encoding on W3C
* Character encoding on Wikipedia


Ligature - MDN Web 文档术语表：Web 相关术语的定义

Ligature
========

“连字”是指将两个字符组合后变为一个形状，像是法语中的“œ”就是“oe”的连字。

你可以在网页中使用 `font-variant-ligatures` 来实现连字

参见
--

* Ligature on Wikipedia


Mozilla Firefox 浏览器 - MDN Web 文档术语表：Web 相关术语的定义

Mozilla Firefox 浏览器
===================

**Mozilla Firefox** 是一个免费的开源浏览器，其开发工作由 Mozilla 公司负责监督。Firefox 可在 Windows、OS X、Linux 和 Android 平台下运行。

Firefox 于 2004 年 11 月首次发布，可通过主题、插件和附加组件完全定制。火狐浏览器使用 Gecko 来渲染网页，并实现了当前和未来的 Web 标准。

参见
--

* Mozilla Firefox 官方网站
* MDN 上的 Firefox 开发者文档


CORS - MDN Web 文档术语表：Web 相关术语的定义

CORS
====

**CORS**（Cross-Origin Resource Sharing，跨源资源共享）是一个系统，它由一系列传输的 HTTP 标头组成，这些 HTTP 标头决定浏览器是否阻止前端 JavaScript 代码获取跨源请求的响应。

同源安全策略默认阻止“跨源”获取资源。但是 CORS 给了 web 服务器这样的权限，即服务器可以选择，允许跨源请求访问到它们的资源。

CORS 标头
-------

`Access-Control-Allow-Origin`

指示响应的资源是否可以被给定的来源共享。

`Access-Control-Allow-Credentials`

指示当请求的凭证标记为 true 时，是否可以公开对该请求响应。

`Access-Control-Allow-Headers`

用在对预检请求的响应中，指示实际的请求中可以使用哪些 HTTP 标头。

`Access-Control-Allow-Methods`

指定对预检请求的响应中，哪些 HTTP 方法允许访问请求的资源。

`Access-Control-Expose-Headers`

通过列出标头的名称，指示哪些标头可以作为响应的一部分公开。

`Access-Control-Max-Age`

指示预检请求的结果能被缓存多久。

`Access-Control-Request-Headers`

用于发起一个预检请求，告知服务器正式请求会使用哪些 HTTP 标头。

`Access-Control-Request-Method`

用于发起一个预检请求，告知服务器正式请求会使用哪一种 HTTP 请求方法。

`Origin`

指示获取资源的请求是从什么源发起的。

参见
--

* 在 MDN 的跨源资源共享（CORS）
* 维基百科上的跨源资源共享
* Fetch 规范


Grid Cell - MDN Web 文档术语表：Web 相关术语的定义

Grid Cell
=========

在Grid 布局中，**网络单元格**是 CSS 网格中的最小单元。它是四条网格线之间的空间，概念上非常像表格单元格。

![Diagram showing an individual cell on the grid.](/zh-CN/docs/Glossary/Grid_Cell/1_grid_cell.png)

如果不使用网格布局提供的方法去放置网格容器的项目，这些项目将通过自动布局算法被放置到每个网格单元格中。将创建额外的行或列轨道以创建足够的单元格来保存所有项目。

在例子中，我们创建了一个三列轨道的网格。五个项目被放置到网格单元格中，它们沿着初始行依次被放置到三个网格单元格中，然后为剩下的两个创建了一个新行。

示例
--
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

参见
--

### 属性参考

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-rows`
* `grid-auto-columns`
### 扩展阅读

* CSS Grid Layout Guide: *Basic concepts of grid layout*
* Definition of Grid Cells in the CSS Grid Layout specification


UDP（用户数据报协议） - MDN Web 文档术语表：Web 相关术语的定义

UDP（用户数据报协议）
============

**UDP**（用户数据报协议）是一个与 IP 协议 一起使用的长期协议，用于在传输速度和效率比安全性和可靠性更重要的场合下发送数据。

UDP 使用一个简单的、具有最小协议机制的无连接通信模型。UDP 使用校验和保证数据完整性，使用端口号以区分数据发送方和接收方中不同的应用程序。它无需握手会话，即将不可靠的底层网络直接暴露给了用户的应用程序：不保证消息交付、不保证交付顺序也不保证消息不重复。如果需要网络接口层面的纠错功能，则应用程序可以使用为此目的设计的传输控制协议（TCP）或者流控制传输协议（SCTP）。

UDP 适用于不需要差错和纠错的应用程序，它的协议栈避免了处理此类问题的开销。对时间敏感的应用程序通常使用 UDP，因为丢弃数据包比等待数据包重传（可能不是实时操作系统可接受的选项）更可取。

参见
--

* 维基百科上的 用户数据报协议
* 规范


Encapsulation - MDN Web 文档术语表：Web 相关术语的定义

Encapsulation
=============

Encapsulation（封装）是指将数据与函数打包到一个组件（例如，类）中，使得外部对于该组件对象的访问如同一个“黑盒子”一样。如此一来，类的使用者只需知道它的接口（即类对外暴露的数据与方法），而无需关心其内部是如何实现的。

参见
--

* 维基百科上的 封装


回调函数 - MDN Web 文档术语表：Web 相关术语的定义

回调函数
====

被作为实参传入另一函数，并在该外部函数内被调用，用以来完成某些任务的函数，称为回调函数。

例如：

```js
function greeting(name) {
  alert("Hello " + name);
}

function processUserInput(callback) {
  var name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);
```

以上示例为同步回调，它是立即执行的。

然而需要注意的是，回调函数经常被用于在一个异步操作完成后执行代码，它们被称为异步回调。一个常见的例子是在 promise 末尾添加的 `.then` 内执行回调函数（在 promise 被兑现或拒绝时执行）。这个结构常用于许多现代的 web API，例如 `fetch()`。

参见
--

* 维基百科上的回调函数


Block - MDN Web 文档术语表：Web 相关术语的定义

Block
=====

术语 **block** 在不同的上下文中有多种含义。这些含义可能是

Block (块作用域)
在 JavaScript中，函数块是指被大括号 ("{}") 包裹住的相关联的statement的集合。例如，你可以在 `Statements/if...else`后声明一段函数块形式的代码，表明当条件判断为真时，解释程序应该运行上述函数块里的代码，或者当条件判断为假时跳过执行上述函数块里的代码。
区块（CSS）
网页上的区块（block）指的是出现在新行上的 HTML element，即在横向书写模式中位于上一个元素之下，下一个元素之上（通常称为块级元素）。例如 HTML 中的 `p` 元素默认为块级元素，而 `a` 元素为*行级元素*——你可以在 HTML 源码中将多个锚点紧靠在一起，而在渲染输出中这些锚点将在同一行内显示。


Unicode - MDN Web 文档术语表：Web 相关术语的定义

Unicode
=======

Unicode 是一种字符集标准，用于对来自世界上不同语言、文字系统和符号进行编号和字符定义。通过给每个字符分配一个编号，程序员可以创建字符编码，让计算机在同一个文件或程序中存储、处理和传输任何语言组合。

在 Unicode 定义之前，在同一数据中混合使用不同的语言是很困难的，而且容易出错。例如，一个字符集存储的是日文字符，而另一个字符集存储的是阿拉伯字母。如果没有明确标明数据的哪些部分属于哪个字符集，其他程序和计算机就会错误地显示文本，或者在处理过程中损坏文本。如果你曾经见过像 (`“”`) 被替换为胡言乱语 `Ã‚Â£`，那么你就已经看到过这个被称为 Mojibake 的问题。

网络上最常见的 Unicode 字符编码是UTF-8。还存在一些其他编码，如 UTF-16 或过时的 UCS-2，但推荐使用 UTF-8。

参见
--

* Unicode on Wikipedia
* The Unicode Standard: A Technical Introduction


HTTP - MDN Web 文档术语表：Web 相关术语的定义

HTTP
====

HTTP (The HyperText Transfer Protocol，超文本传输协议) 是用于在 Web 上传输超媒体文件的底层 协议 ，最典型场景的是在浏览器和服务器之间传递数据，以供人们浏览。现行的 HTTP 标准的版本是 HTTP/2。

`http://` 称为 `schema`，是 URI 的组成部分，一般位于网络地址的开头。以 `https://developer.mozilla.org` 为例，该地址说明请求文档时使用 HTTP 协议；这里的 https 代指 HTTP 协议的安全版本，即 SSL （或称 TLS）

HTTP 是基于文本的 (所有的通信都以纯文本的形式进行) 以及无状态的 (当前通信状态不会发现以前的通信状态)，该特性极大方便了在 www 上浏览网页的人。除此之外，HTTP 也可以用于构建服务器之间交互的 REST web 服务，以及使得网站内容更加动态化的 AJAX 请求。

补充知识
----

* 在 MDN 上的 HTTP
* 在维基百科上的 HTTP


Endianness（字节序） - MDN Web 文档术语表：Web 相关术语的定义

Endianness（字节序）
===============

字节序，或字节顺序（"Endian"、"endianness" 或 "byte-order"），描述了计算机如何组织字节，组成对应的数字。

每个内存存储位置都有一个索引或地址。每一 字节可以存储一个 8 位数字（即介于 `0x00` 和 `0xff` 之间），因此，你必须保留不止一个字节来储存一个更大的数字。现在，大部分需占用多个字节的数字排序方式是 **little-endian**（译者注：可称小字节序、低字节序，即低位字节排放在内存的低地址端，高位字节排放在内存的高地址端。与之对应的 big-endian 排列方式相反，可称大字节序、高字节序），所有的英特尔处理器都使用 little-endian。little-endian 的意思是使用低位储存更重要的信息，least-to-most-significant（最不重要的（least significant）字节取第一个位置，或者说地址最低的位置），可类比欧洲通用的日期书写方式（例如，31 December 2050。译者注：年份是最重要的，月份其次，日期最后）。

自然，**big-endian** 是相反的顺序，可类比 ISO 日期格式（例如 2050-12-31）。big-endian 通常被称作"网络字节顺序"（"network byte order"）, 因为互联网标准通常要求数据使用 big-endian 存储，从标准 Unix 套接字（socket）层开始，一直到标准化网络的二进制数据结构。此外，老式 Mac 计算机的 68000 系列 和 PowerPC（译者注：IBM 与 Apple 公司联合生产的个人台式机）微处理器曾使用 big-endian。

举个例子，用不同字节序存储数字 `0x12345678`（即十进制中的 305 419 896）：

* *little-endian*：`0x78 0x56 0x34 0x12`
* *big-endian*：`0x12 0x34 0x56 0x78`
* *mixed-endian*（文物，非常罕见）：`0x34 0x12 0x78 0x56`
参见
--

* `ArrayBuffer`
* `DataView`
* Typed Arrays
* Wikipedia 上的 Endianness
* Data structure


网格轴 - MDN Web 文档术语表：Web 相关术语的定义

网格轴
===

CSS 网格布局是一种二维布局方法，能够按*行*和*列*对内容布局。因此在任何网格中都有两个轴——*块向或列轴*（block or column axis），及*行向或行轴*（inline or row axis）。

沿着这些轴可以使用盒对齐规范中定义的属性对元素按块向轴或行向轴对齐。

在 CSS 中，*块向或列轴*用于对文本区块布局。如果你有两个段落，用的从右到左、从上到下的语言，那么在块向轴上两个段落一个排在另一个下面。

![CSS 网格布局中的块向轴图示](/zh-CN/docs/Glossary/Grid_Axis/7_block_axis.png)

*行向或行轴*沿与块向轴垂直的方向延伸，常规文本沿其方向流动。以下是我们在网格布局中的行。

![CSS 网格布局中的行向轴图示](/zh-CN/docs/Glossary/Grid_Axis/7_inline_axis.png)

这些轴的实体方向可根据文档的书写模式改变。

参见
--

* CSS 网格布局指南：*网格布局的基本概念*
* CSS 网格布局指南：*网格布局中的盒对齐*
* CSS 网格布局指南：*网格、逻辑值和书写模式*


异步 - MDN Web 文档术语表：Web 相关术语的定义

异步
==

**异步**（asynchronous）指两个或两个以上的对象或事件**不**同时存在或发生（或多个相关事物的发生无需等待其前一事物的完成）。在计算机技术中，"异步"一词被用于两大语境。

网络与通信
-----

异步通信是一种在双方或多方之间交换消息的方式。其中每个参与方各自在他们方便或可操作的情况下接收并处理消息，而不是在收到消息后立即进行处理。另外，消息的发送无需等待确认信息，前提是如果出现问题，接收方将请求更正或以其他方式处理该情况。

对人类来说，电子邮件就是一种异步通信方式；发送者发送了一封邮件，接着接收者会在方便时读取和回复该邮件，而不是马上这样做。双方可以继续随时发送和接收信息，而无需双方安排何时进行操作。

在异步软件中，发出请求（例如向服务器），并在等待响应时不会阻塞其他进程。该软件可以继续执行其他任务。例如，在基于 Promise 的 API中，会为长时间的操作创建 `Promise` 对象。在操作完成后，promise 会被处理。有了 promise，软件不必等待操作的完成。

软件设计
----

异步软件设计通过构建代码扩展了异步的概念，按照这种设计编写的代码使得程序能够要求一个任务与先前的一个（或多个）任务一起执行，而无需为了等待它们完成而停止执行。当后来的任务完成时，程序将使用约定好的机制通知先前的任务，以便让它知道任务已经完成，以及如果有结果存在的话，这个结果是可用的。

还有许多用来实现异步软件的编程技术。查看文章异步 JavaScript 来了解它们吧。

参见
--

* 从服务器获取数据(Learning Area)（学习区）
* 同步


主轴 - MDN Web 文档术语表：Web 相关术语的定义

主轴
==

弹性盒的主轴（main axis）由 `flex-direction` 属性设置的方向所定义。`flex-direction` 有四个取值，分别是：

* `row`
* `row-reverse`
* `column`
* `column-reverse`

假如选择 `row` 或者 `row-reverse`，那么主轴会沿行向延伸。

![此图中 flex-direction 为 row，由此构成主轴](/zh-CN/docs/Glossary/Main_Axis/basics1.png)

选择 `column` 或者 `column-reverse`，那么主轴会沿块向从页面上侧延伸到下侧。

![三个弹性元素占据了容器的全部宽度，按代码顺序依次从上到下显示。flex-direction 设置为 column。主轴为纵向的，即从上到下。](/zh-CN/docs/Glossary/Main_Axis/basics2.png)

元素的 `flex` 属性可将主轴上的任何可用空间加入元素自身，由此可在主轴上控制弹性元素的尺寸。或者你可以用 `justify-content` 属性控制元素之间和周围的空间。

参见
--

### 属性参考

* `flex-basis`
* `flex-direction`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `flex`
### 拓展阅读

* CSS 弹性盒指南：*弹性盒的基本概念*
* CSS 弹性盒指南：*在弹性容器中对齐元素*
* CSS 弹性盒指南：*控制弹性元素在主轴上的占比*


加密 - MDN Web 文档术语表：Web 相关术语的定义

加密
==

在密码学（cryptography）领域，**加密**是指把明文（plaintext）转换成密文（ciphertext）的过程。密文应该对非授权用户不可读。

加密是一个密码学原语：它通过一种称作 cipher 的编码技术，把纯文本信息转换为密文。现代密码的加密算法是通过特定的密码算法来工作的，称为密钥。由于算法常常是公开的，若要保证加密安全，就必须确保密钥高度保密。

![How encryption works.](/zh-CN/docs/Glossary/Encryption/encryption.png)

如果不知道密钥，其逆过程解密在数学上是很难做到的。究竟有多难做到，取决于算法的安全性，以及密码分析学 (en-US)的发展程度。


ISP - MDN Web 文档术语表：Web 相关术语的定义

ISP
===

互联网服务供应商（Internet Service Provider，简称 ISP）通过电话线上的拨号连接（这在以前比较常见），或宽带连接（如电缆调制解调器或 DSL 服务）出售互联网接入服务，有时也会提供其他服务，如电子邮件、虚拟主机和 IP 语音。

参见
--

* 互联网是如何工作的（给初学者的说明）
* 互联网服务供应商（中文维基百科）


DNS - MDN Web 文档术语表：Web 相关术语的定义

DNS
===

DNS（Domain Name System）域名系统，是一个层次化、分散化的互联网连接资源命名系统。DNS 维护着一个域名列表以及与之相关联的资源（例如 IP 地址）。

DNS 最突出的功能是将易于记忆的域名（例如 mozilla.org）翻译成为数字化的 IP 地址（例如 151.106.5.172）；这一从域名到 IP 地址的映射过程被称为**DNS 查询**（DNS lookup）。与之对应，**DNS 反向查询**（rDNS）用来找到与 IP 地址对应的域名。

参见
--

* 理解域名
* 维基百科上的域名系统


Adobe Flash - MDN Web 文档术语表：Web 相关术语的定义

Adobe Flash
===========

Flash 是一项由 Adobe 开发的技术，它用于富 Web 应用程序、矢量图形和多媒体的呈现，目前已经过时。

自从 2021 年开始，Flash 技术已不受 Adobe 或任何主流 web 浏览器的支持。

参见
--

* Adobe Flash end-of-life announcement
* Saying goodbye to Flash in Chrome
* Firefox Roadmap for Flash End-of-Life
* Microsoft Windows Flash Player removal


服务器 - MDN Web 文档术语表：Web 相关术语的定义

服务器
===

服务器是为用户（通常称为客户端）提供服务的软件或硬件。硬件而言的服务器是互联网上的共享计算机，通常性能强劲且位于数据中心。软件而言的服务器（一般是运行在硬件服务器上）是一种向客户端程序或向用户界面提供服务的程序。

我们一般在局域网或广域网（如互联网）提供服务。传统上，客户端程序和服务器程序通过 API 传递信息进行连接，这种信息使用协议编码。

举个例子：

* 连接到互联网的 Web 服务器向你的浏览器发送一个 HTML 文件，这样你就可以浏览页面。
* 用于文件、域名、邮件、打印机和传真机的局域网服务器。
* 数据中心的小型机、大型机和超算。
参见
--

* 服务器介绍
* 维基百科上的 服务器


PDF - MDN Web 文档术语表：Web 相关术语的定义

PDF
===

**PDF**（可移植文档格式）是一种能够用来在任何特定软、硬件平台或操作系统上分享文档的文件格式。PDF 提供打印文档的数字图像，并能在打印时保持相同的外观。

参见
--

* 维基百科：PDF


CSS - MDN Web 文档术语表：Web 相关术语的定义

CSS
===

**CSS** （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。一条 CSS 的样式定义包括属性和属性值，它们共同决定网页的外观。

CSS 与 HTML 和 JavaScript 并称 Web 三大核心技术。一般用它来定义 HTML 元素 的样式，但它也能用于其他标记语言，如 SVG 和 XML。

一条 CSS 规则包含一个 选择符 和一组 属性 (en-US) 定义。下面这个例子用来将页面中的所有 `<p>` 标签显示为黑色背景和黄色文本：

```css
/\* p 选择符用来选择页面中的所有 <p> 标签 \*/
p {
  /\* color 属性用来定义文本颜色，这里为黄色 \*/
  color: yellow;

  /\* background-color 属性用来定义元素的背景色，这里为黑色 \*/
  background-color: black;
}
```

CSS 中的“C”表示“层叠的”，意为多个选择符之间具有特定的优先级。这一点非常重要，因为复杂网站可能会有非常多的 CSS 规则，因此必须规定好这些规则的优先级，以免乱套。

参见
--

* CSS 教程
* 维基百科 CSS 词条
* MDN CSS 文档
* CSS 工作组的当前工作


HTTPS - MDN Web 文档术语表：Web 相关术语的定义

HTTPS
=====

**HTTPS**（***超文本传输安全协议***）是 HTTP 协议的加密版本。它使用 SSL 或 TLS 协议来加密客户端和服务器之间所有的通信。安全连接允许客户端与服务器安全地交换敏感数据，例如网上银行或者在线商城等涉及金钱的操作。

参见
--

* 维基百科上的 HTTPS 词条
* 迁移至 HTTPS：社区指南
* 安全上下文
* MDN Web 文档术语表
    + HTTP
    + SSL
    + TLS


域名 - MDN Web 文档术语表：Web 相关术语的定义

域名
==

域名是在 互联网 的网站的地址。域名被用于 URL 识别一个服务器属于哪个特定的网站。域名包含由句号点（”.“）分隔的名称（标签）的分级序列并以 扩展名 (en-US) 作为结尾。

参见
--

* 在维基百科的 域名
* 了解“域名“


Microsoft Edge 浏览器 - MDN Web 文档术语表：Web 相关术语的定义

Microsoft Edge 浏览器
==================

**Microsoft Edge** 是由微软公司在 2014 年开发的免费网络图形浏览器，捆绑于 Windows 10 操作系统中。Edge 最初被称为 Spartan，它取代了长期存在的 Internet Explorer 浏览器。

参见
--

* 官方网站
* MDN Web 文档术语表
    + Google Chrome
    + Microsoft Edge
    + Microsoft Internet Explorer
    + Mozilla Firefox
    + Netscape Navigator (en-US)
    + Opera Browser (en-US)


国际化（i18n） - MDN Web 文档术语表：Web 相关术语的定义

国际化（i18n）
=========

国际化（通常缩写为“i18n”）是让产品或服务更容易适应各种文化的最佳实践。

>
> **国际化**是指在设计和开发产品、应用或文档内容时，为不同文化、地区或语言的目标受众提供方便的本地化服务。（W3C (en-US) 定义）
>
>
>

在其他方面，i18n 仍然需要许多支持

* 字符集（通常使用 Unicode）
* 计量单位（货币、°C/°F、公里/英里等）
* 时间和日期格式
* 键盘布局
* 文字书写顺序
参见
--

* 本地化
* Unicode 联盟
* JavaScript 国际化 API


运算符 - MDN Web 文档术语表：Web 相关术语的定义

运算符
===

由标点符号或字母数字字符组成的保留**语法**，执行内置功能。例如，JavaScript 的加法运算符（“+”）可以将数字相加或者将字符串连接起来，而“非”运算符（“!”）可以对表达式取反，例如将 `true` 语句返回 `false`。

参见
--

* 维基百科上的运算符词条
* JavaScript 运算符


密码套件 - MDN Web 文档术语表：Web 相关术语的定义

密码套件
====

密码套件是密钥交换算法、认证算法、大容量数据加密加密算法和消息认证码算法的组合。

在 TLS 的密码体制中，客户端与服务端在安全通信之前，需要协商出密码套件，一个典型的密码套件类似于 ECDHE\_RSA\_WITH\_AES\_128\_GCM\_SHA256 或 ECDHE-RSA-AES128-GCM-SHA256，代表着：

* 密钥交换算法使用 ECDHE（椭圆曲线 Diffie-Hellman 密钥交换算法）
* 认证算法使用 RSA
* 加密算法使用 AES-128，使用 Galois/Counter Mode (GCM) 作为分组加密的模式
* 基于散列的消息认证码算法使用 SHA-256
参见
--

* Mozilla 推荐的 TLS 密码套件


MVC - MDN Web 文档术语表：Web 相关术语的定义

MVC
===

**MVC** (Model-View-Controller) 是一种软件设计模式。它强调分离软件的业务逻辑和显示。这种“分离”提供了更好的分工和改进的维护。一些其他的模式也是基于 MVC 来设计的，像 MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), 和 MVW (Model-View-Whatever).

对 MVC 软件设计模式的三个部分可以被描述如下：

1. Model: 模型持有所有的数据、状态和程序逻辑。
2. View: 负责界面的布局和显示。
3. Controller: 负责模型和界面之间的交互。
参见
--

* 维基百科上的 MVC 模式词条


Grid Column - MDN Web 文档术语表：Web 相关术语的定义

Grid Column
===========

**网格列**是Grid 布局中的垂直轨道，即两个垂直网格线之间的空间。它通过属性 `grid-template-columns` 或者简写属性 `grid`，`grid-template` 定义。

另外，当项目被放置到显示网格中创建的列外面时，可以在隐式网格中创建网格列。默认情况这些列自动调整大小，也可以使用 `grid-auto-columns` 属性指定其大小。

在Grid 布局中使用对齐方式时，网格列沿着纵轴运行。

参见
--

### 属性参考

* `grid-template-columns`
* `grid-auto-columns`
* `grid`
* `grid-template`
### 扩展阅读

* CSS Grid Layout Guide: *Basic concepts of grid layout*


HSTS - MDN Web 文档术语表：Web 相关术语的定义

HSTS
====

**HTTP 严格传输安全** 让网站可以通知浏览器它不应该再使用 HTTP 加载该网站，而是自动转换该网站的所有的 HTTP 链接至更安全的 HTTPS。它包含在 HTTP 的协议头 `Strict-Transport-Security` 中，在服务器返回资源时带上。

换句话说，它告诉浏览器将 URL 协议从 HTTP 更改为 HTTPS（会更安全），并要求浏览器对每个请求执行此操作。

参见
--

* `Strict-Transport-Security`
* OWASP 文章：HTTP Strict Transport Security
* 维基百科上的 HTTP 严格传输安全


分布式拒绝服务攻击 - MDN Web 文档术语表：Web 相关术语的定义

分布式拒绝服务攻击
=========

分布式拒绝服务（DDoS）是一种攻击，在这种攻击中，许多被破坏的系统被用来攻击一个目标，以淹没服务器资源并阻止合法用户。

通常情况下，许多人使用机器人攻击高知名度的 Web 服务器，如银行或信用卡支付网关。DDoS 涉及计算机网络和 CPU 资源管理。

在典型的 DDoS 攻击中，攻击者首先利用一个计算机系统的漏洞，使其成为 DDoS 主控。攻击主控者，也被称为僵尸主控者，用恶意软件识别和感染其他脆弱的系统。最终，攻击者指示被控制的机器对指定目标发起攻击。

有两种类型的 DDoS 攻击：以网络为中心的攻击（通过占用带宽使服务过载）和应用层攻击（通过应用调用使服务或数据库过载）。溢出到目标的数据导致目标机器处于饱和状态，使其对合法流量的响应非常缓慢甚至无法响应（因此被称为“拒绝服务”）。受感染计算机的所有者通常不知道他们的计算机已经被入侵，他们也会遭受服务损失。

在入侵者控制下的计算机被称为僵尸或机器人。一个由共同感染的计算机组成的网络被称为僵尸网络或僵尸军队。卡巴斯基实验室和赛门铁克都认为僵尸网络才是对互联网安全的最大威胁，而不是垃圾邮件、病毒或蠕虫。

美国计算机应急准备小组（US-CERT）将拒绝服务攻击的症状定义为：

* （打开文件或访问网站的）网络性能异常缓慢
* 某一网站无法使用
* 无法访问任何网站
* 收到的垃圾邮件数量急剧增加（这种类型的 DoS 攻击被认为是电子邮件炸弹）
* 无线或有线互联网连接中断
* 长期拒绝访问网络或任何互联网服务
参见
--

* 维基百科上的拒绝服务攻击词条


SVN - MDN Web 文档术语表：Web 相关术语的定义

SVN
===

Apache Subversion (**SVN**) 是一个开源免费的源代码控制管理（SCM (en-US)）系统。它允许开发者们保留文本和代码修改历史。虽然 SVN 可以操作二进制文件，但是我们不推荐这些文件使用 SVN。

参见
--

* 在维基百科上的 Apache Subversion
* 官方网站


Unix 时间 - MDN Web 文档术语表：Web 相关术语的定义

Unix 时间
=======

Unix 时间是一种表示时间戳的方法，通常定义为自 Unix 纪元（UTC 时间 1970 年 1 月 1 日午夜）开始以来的总秒数，不考虑闰秒。

在 web 平台上，Unix 时间用于时间戳，并以自 Unix 纪元开始以来的总毫秒数给出。

参见
--

* 维基百科上的 Unix 时间
* 维基百科上的闰秒


Navigation directive - MDN Web 文档术语表：Web 相关术语的定义

Navigation directive
====================

**CSP 浏览指令（navigation directives**）出现于 `Content-Security-Policy` 首部，支配着用户所能浏览的或者提交表单的资源位置。

浏览指令不将 `default-src` 指令作为回退机制。

以下 CSP 指令属于浏览指令：

* `form-action`
* `frame-ancestors`
* `navigation-to`
更多内容
----

* `Content-Security-Policy`
* 其他类型的指令：
    + Fetch directive
    + Navigation directive
    + Reporting directive (en-US)


Entity - MDN Web 文档术语表：Web 相关术语的定义

Entity
======

HTML 实体是一段以连字号（`&`）开头、以分号（`;`）结尾的文本（字符串）。实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）。你也可以用实体来代替其他难以用标准键盘键入的字符。

**备注：** 很多字符都有易于记忆的实体。例如版权符号 (`©`) 的实体是 `©`。对于没那么容易记住的字符，例如 `—` 或 `—`，你可以查看 参考表 或使用 解码工具。

保留字符
----

有一些特别的字符被保留用于 HTML 中，这意味着浏览器会将这些字符解析为 HTML 代码。例如，如果你使用小于号（`<`），浏览器会将其后的文本解析为一个 tag。

为了将这些字符显示为文本，需要使用相应的字符实体来代替它们，如下表所示。

| 字符 | 实体 | 说明 |
| --- | --- | --- |
| & | `&` | 解析为实体或字符引用的开头 |
| < | `<` | 解析为 tag 的开头 |
| > | `>` | 解析为 tag 的结尾 |
| " | `"` | 解析为 attribute 的值的开头和结尾 |

参见
--

* 字符实体的官方列表


Method - MDN Web 文档术语表：Web 相关术语的定义

Method
======

一个方法就是一个函数，是对象的属性之一。有两种类型的方法：*实例方法*是由对象实例执行的内置任务，另一种是*静态方法*，在对象构造函数内直接调用的任务\*。\*

**备注：** 在 JavaScript 中，函数本身也是对象，因此，在这种情况下，一个方法实际上就是指向一个函数的对象引用。

Learn more
----------

### Learn about it

* Method (computer programming) in Wikipedia
* Defining a method in JavaScript (comparison of the traditional syntax and the new shorthand)
### Technical reference

* List of JavaScript built-in methods
* MDN Web Docs Glossary
    + function
    + object
    + property
    + static method (en-US)
* Defining a method in JavaScript


有效负荷标头（Payload header） - MDN Web 文档术语表：Web 相关术语的定义

有效负荷标头（Payload header）
======================

**有效负荷标头**（payload header）是一种 HTTP 标头，其从一个或多个消息中描述与安全传输和原始资源表示形式（representation）重建的相关的有效负荷信息。这包括了像消息有效负荷的长度、此有效负荷中承载了资源的哪部分（对于多部分的消息）、应用于传输的任意的编码、消息完整性检查等等。

有效负荷标头可能存在于 HTTP 请求和响应消息中（即在任何携带有效载荷数据的消息中）。

有效负荷标头包括：`Content-Length`、`Content-Range`、`Trailer` 和 `Transfer-Encoding`。

参见
--

* 所有 HTTP 标头列表
    + `Content-Length`
    + `Content-Range`
    + `Trailer`
    + `Transfer-Encoding`
    + 表示标头
* RFC 7231, section 3.3: Payload semantics


STUN - MDN Web 文档术语表：Web 相关术语的定义

STUN
====

**STUN** (NAT 会话穿越工具) 是一个NAT (网络地址转换器) 传递数据的辅助协议。STUN 会返回一台位于 NAT 背后的已接入网络的主机的IP address(IP 地址)、port(端口号) 和连通状态。

参见
--

* STUN 在 维基百科
* WebRTC 协议
### 技术参考

* 规范


Cookie - MDN Web 文档术语表：Web 相关术语的定义

Cookie
======

Cookie 就是访问者在访问网站后留下的一个信息片段。

Cookie 用于个性化用户的体验。可能包含用户在访问网站时的参数或输入。用户可以自定义浏览器来接受，拒绝或删除 Cookie。

`Cookie 可以在服务器级别设置和修改，使用 Set-Cookie` HTTP header, 或者在 JavaScript 中用 `document.cookie`.

参见
--

* 维基百科上的 HTTP cookie


HMAC（密钥散列消息认证码） - MDN Web 文档术语表：Web 相关术语的定义

HMAC（密钥散列消息认证码）
===============

HMAC（密钥散列消息认证码）是一个被用于密码学的认证消息协议。它可以使用于任何的密码学函数。它的强度依赖底层的函数（例如 SHA1 或 MD5）以及被选中的密钥。出于这样使用上的组合，HMAC 认证算法通常是以组合名字出现，如 HMAC-SHA1。

HMAC 通常用于确保完整性和身份验证。

参见
--

* 维基百科上的 HMAC
* IETF 的 RFC 2104


GIF - MDN Web 文档术语表：Web 相关术语的定义

GIF
===

GIF（图形交换格式）是一种使用无损压缩并可用于动画的图像格式。一个 GIF 每像素使用 8 位，且在 24 位色彩空间最多使用 256 种颜色。

参见
--

* 在维基百科上的 GIF


行级内容 - MDN Web 文档术语表：Web 相关术语的定义

行级内容
====

在 CSS 中，参与行内布局的内容被称为**行级内容**（inline-level content）。默认情况下，大多数文本、替换元素以及生成的内容都是行级的。

在行内布局中，通常将文本、替换元素以及其它的行级盒分段为一堆按顺序排列的盒子来进行布局。在每个行盒中，行级盒子相互垂直或者水平对齐，具体取决于书写模式。通常，它们与文本的基线进行对齐。这可以使用 CSS 进行更改。

![行内布局](/zh-CN/docs/Glossary/Inline-level_content/inline_layout.png)

**备注：** HTML（*超文本标记语言*）元素历来被归类为“块级”元素或者“行级”元素。作为一种呈现的特性，现在这将由 CSS 来提供。

示例
--

```html
<p>
  This span is an <span class="highlight">inline-level element</span>; its
  background has been colored to display both the beginning and end of the
  element's influence. Input elements, like <input type="radio" /> and
  <input type="checkbox" />, are also inline-level content.
</p>
```

在该示例中，`<p>` 元素包含一些文本。在该文本中有一个 `<span>` 元素和两个 `<input>` 元素，它们都是行级元素。如果，`<span>` 分布在不同的行上，则会生成两个行盒。因为这些元素是行内的，该段落只会渲染为不间断文本流的单个段落：
```

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}
```

参见
--

* 块级内容
* 行内格式上下文
* `display`


Statement - MDN Web 文档术语表：Web 相关术语的定义

Statement
=========

在计算机编程语言中，**语句** 是一行任务指令的代码。每个程序都包含若干语句。

更多
--

### 一般知识

* Statement (computer science) on Wikipedia
### 技术参考

* JavaScript statements and declarations


Grid Areas - MDN Web 文档术语表：Web 相关术语的定义

Grid Areas
==========

**网格区域**是网格中由一个或者多个网格单元格组成的一个矩形区域。当你使用基于网格线位置放置一个项目或者使用命名的网格区域定义区域时，网格区域被创建。

![Image showing a highlighted grid area](/zh-CN/docs/Glossary/Grid_Areas/1_grid_area.png)

本质上，网格区域一定是矩形的。例如，不可能创建 T 形或 L 形的网格区域。

在下面的例子中，有一个网格容器包含两个网格项目，我用 `grid-area` 属性命名它们，然后用 `grid-template-areas` 把它们放在网格上。这将创建两个网格区域，一个覆盖四个网格单元格，另外一个覆盖两个。

示例
--
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
```

```html
<div class="wrapper">
  <div class="item1">Item</div>
  <div class="item2">Item</div>
</div>
```

参见
--

### 属性参考

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-rows`
* `grid-auto-columns`
* `grid-template-areas`
* `grid-area`
### 扩展阅读

* CSS Grid Layout Guide: *Basic concepts of grid layout*
* CSS Grid Layout Guide: *Grid template areas*
* Definition of Grid Areas in the CSS Grid Layout specification


HTTP/2 - MDN Web 文档术语表：Web 相关术语的定义

HTTP/2
======

**HTTP/2** 是 HTTP 网络协议的一个重要版本。HTTP / 2 的主要目标是通过启用完整的请求和响应多路复用来减少 延迟，通过有效压缩 HTTP 标头字段来最小化协议开销，并增加对请求优先级和服务器推送的支持。

HTTP/2 不会修改 HTTP 协议的语义。HTTP 1.1 中的所有核心概念（例如 HTTP 方法，状态码，URI 和 headers）都得以保留。而是修改了 HTTP/2 数据在客户端和服务器之间的格式（帧）和传输方式，这两者都管理整个过程，并在新的框架层内隐藏了应用程序的复杂性。所以，所有现有的应用程序都可以不经修改地交付。

参见
--

* 常识
    + HTTP on MDN
    + HTTP/2 on Wikipedia
* 词汇表
    + HTTP
    + Latency


Hoisting（变量提升） - MDN Web 文档术语表：Web 相关术语的定义

Hoisting（变量提升）
==============

变量提升（Hoisting）被认为是，Javascript 中执行上下文（特别是创建和执行阶段）工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的 JavaScript 文档中找不到变量提升（Hoisting）这个词。不过，需要注意的是，开始时，这个概念可能比较难理解，甚至恼人。

例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。

参见
--

### 技术范例

JavaScript 在执行任何代码段之前，将函数声明放入内存中的优点之一是，你可以在声明一个函数之前使用该函数。例如：

```js
/\*\*
 \* 正确的方式：先声明函数，再调用函数 (最佳实践)
 \*/
function catName(name) {
  console.log("我的猫名叫 " + name);
}

catName("Tigger");

/\*
以上代码的执行结果是："我的猫名叫 Tigger"
\*/
```

上面的代码片按照是你的正常思维（先声明，后调用）去书写的。现在，我们来看看当我们在写这个函数之前调用这个函数会发生什么：

```js
/\*\*
 \* 不推荐的方式：先调用函数，再声明函数
 \*/

catName("Chloe");

function catName(name) {
  console.log("我的猫名叫 " + name);
}

/\*
代码执行的结果是："我的猫名叫 Chloe"
\*/
```

即使我们在定义这个函数之前调用它，函数仍然可以工作。这是因为在 JavaScript 中**执行上下文**的工作方式造成的。

变量提升也适用于其他数据类型和变量。变量可以在声明之前进行初始化和使用。但是如果没有初始化，就不能使用它们。

译者注：函数和变量相比，会被优先提升。这意味着函数会被提升到更靠前的位置。

### 只有声明被提升

JavaScript 只会提升声明，不会提升其初始化。如果一个变量先被使用再被声明和赋值的话，使用时的值是 undefined。参见例子：

```js
console.log(num); // Returns undefined
var num;
num = 6;
```

如果你先赋值、再使用、最后声明该变量，使用时能获取到所赋的值

```js
num = 6;
console.log(num); // returns 6
var num;
```

再来看几个类似的例子：

```js
// Example 1 - only y is hoisted
var x = 1; // 声明 + 初始化 x
console.log(x + " " + y); // '1 undefined'
var y = 2; // 声明 + 初始化 y

// Example 2 - Hoists
var num1 = 3; // Declare and initialize num1
num2 = 4; // Initialize num2
console.log(num1 + " " + num2); //'3 4'
var num2; // Declare num2 for hoisting

// Example 3 - Hoists
a = "Cran"; // Initialize a
b = "berry"; // Initialize b
console.log(a + "" + b); // 'Cranberry'
var a, b; // Declare both a & b for hoisting
```

### 技术参考

* var statement - MDN
* function statement - MDN


RAIL - MDN Web 文档术语表：Web 相关术语的定义

RAIL
====

**RAIL**, 是 **Response, Animation, Idle, 和 Load 的首字母缩写**, 是一种由 Google Chrome 团队与 2015 年提出的性能模型，用于提升浏览器内的用户体验和性能。RAIL 模型的理念是 "以用户为中心；最终目标不是让你的网站在任何特定设备上都能运行很快，而是使用户满意。" RAIL 把交互分为四个阶段：页面加载，空闲，响应用户输入，滚动和动画。按首字母缩写顺序，其主要原则是：

**响应**

应该尽可能快速的响应用户，应该在 100ms 或者 100ms 以内响应用户输入。

**动画**

在展示动画的时候，每一帧应该以 16ms 进行渲染，这样可以保持动画效果的一致性，并且避免卡顿。

**空闲**

当使用 Javascript 主线程的时候，应该把任务划分到执行时间小于 50ms 的片段中去，这样可以释放线程以进行用户交互

**加载**

应该在小于 1s 的时间内加载完成你的网站，并可以进行用户交互。

See also
--------

* Recommended Web Performance Timings: How long is too long (en-US)


AJAX - MDN Web 文档术语表：Web 相关术语的定义

AJAX
====

**AJAX**（Asynchronous JavaScript And XML ）是一种使用 XMLHttpRequest 技术构建更复杂，动态的网页的编程实践。

AJAX 允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面。AJAX 还允许异步工作，这意味着当网页的一部分正试图重新加载时，你的代码可以继续运行（相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载）。

通过交互式网站和现代 Web 标准，AJAX 正在逐渐被 JavaScript 框架中的函数和官方的 `Fetch API` 标准取代。

参见
--

* `XMLHttpRequest`
* `Fetch API`
* 使用 Fetch API
* 维基百科上的 AJAX
* 同步与异步通信（2014）


源（Origin） - MDN Web 文档术语表：Web 相关术语的定义

源（Origin）
=========

Web 内容的**源**由用于访问它的 URL 的*方案*（协议）、*主机名*（域名）和*端口*定义。只有当协议、主机和端口都匹配时，两个对象才具有相同的源。

某些操作仅限于同源内容，但可以使用 CORS 解除这个限制。

示例
--

由于它们具有相同的协议（`http`）和主机名（`example.com`），以下两个地址是同源的。注意不同文件路径与是否同源无关：

* `http://example.com/app1/index.html`
* `http://example.com/app2/index.html`

服务器默认从 80 端口传送 HTTP 内容，所以以下两个地址同源：

* `http://Example.com:80`
* `http://example.com`

由于协议不同，以下两个地址不属于同源：

* `http://example.com/app1`
* `https://example.com/app2`

由于主机名不同，以下几个地址不属于同源：

* `http://example.com`
* `http://www.example.com`
* `http://myapp.example.com`

由于端口不同，以下几个地址不属于同源：

* `http://example.com`
* `http://example.com:8080`
参见
--

* 同源策略。
* Site
* HTML 规范：源


Character set - MDN Web 文档术语表：Web 相关术语的定义

Character set
=============

**字符集**是一种让计算机知道如何识别 Character 的编码系统，这些字符包括字母、数字、标点符号和空白字符。

早期，由于各国使用的语言不同而发展出各自的字符集，例如日语的 Kanji JIS(例如 Shift-JIS, EUC-JP 等)，繁体中文的 Big5 和俄罗斯的 KOI8-R。然而，Unicode 因其对通用语言的支持，逐渐成为最被接受的字符集。

如果一个字符集使用不正确 (例如，对于以 Big5 编码的文章使用 Unicode)，你可能会看到全是乱码，这被称为 Mojibake.

参见
--

* Character encoding（维基百科）
* Mojibake（维基百科）
* 术语表
    + Character
    + Unicode


可变（Mutable） - MDN Web 文档术语表：Web 相关术语的定义

可变（Mutable）
===========

*可变*指即使没有创建一个全新的值，也可以更改它。在 JavaScript 中，对象和数组默认都是可变的，但是原始值是不可变的——一旦创建原始值，它就不能被更改，尽管持有它的变量可能会再次重新分配到其它值。

参见
--

* 维基百科上的不可变对象
* 不可变


Grid Tracks - MDN Web 文档术语表：Web 相关术语的定义

Grid Tracks
===========

**网格轨道** 是两条网格线之间的空间。它们通过使用属性 `grid-template-columns` 和 `grid-template-rows` 或者简写属性 `grid` 和 `grid-template` 在显式网格中定义。网格轨道也可以在隐式网格中创建，通过将一个网格项目定位到显式网格中创建的轨道外面。

下图展示该网格中的第一个行轨道（上色部分的空间）。

![Diagram showing a grid track.](/zh-CN/docs/Glossary/Grid_Tracks/1_grid_track.png)

显式网格中的轨道大小
----------

当使用 `grid-template-columns` 和 `grid-template-rows` 定义网格轨道时，你可以使用任何长度单位，也可以使用 flex 单位 `fr` 来表示网格容器中可用空间的一部分。下面的例子演示了一个三列轨道的网格，第一列 200px，第二列 1fr，第三列 3fr。网格容器中的可用空间减去 200px 后，剩余空间被分成 4 份，1 份给第二列，3 份给第三列。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 3fr;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

隐式网格中的轨道大小
----------

隐式网格中创建的轨道默认为自动大小，但可以通过 `grid-auto-rows` 和 `grid-auto-columns` 属性来定义这些轨道的大小。

参见
--

### 属性参考

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-rows`
* `grid-auto-columns`
### 扩展阅读

* CSS Grid Layout Guide: Basic concepts of grid layout
* Definition of Grid Tracks in the CSS Grid Layout specification


用户代理 - MDN Web 文档术语表：Web 相关术语的定义

用户代理
====

用户代理是代表一个人的计算机程序，例如，一个在 Web 上的 浏览器。

除了浏览器之外，用户代理可以是抓取网页的机器人、下载管理器或可以访问 Web 的其他应用程序。随着向服务器发送的每个请求，浏览器包含一个可表明身份的 `User-Agent`HTTP 的协议头，叫作用户代理（UA，User Agent）字符串。此字符串通常标识浏览器、及其版本号及其主机操作系统。

垃圾邮件机器人、下载管理器和一些浏览器通常会发送一个假 UA 字符串来宣称自己是不同的客户端。这被称为*用户代理欺骗*。

用户代理的字符串可以被 JavaScript 在客户端中使用 `navigator.userAgent` 获取。

典型的用户代理字符串如下所示： `"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"`.

参见
--

* 在维基百科上的 User agent
* `NavigatorID.userAgent` (en-US)
* 使用用户代理检测浏览器
* RFC 2616, section 14.43：`User-Agent` 标头
* 术语表：
    + Browser
* HTTP 标头
    + `User-agent`


Percent-encoding - MDN Web 文档术语表：Web 相关术语的定义

Percent-encoding
================

**百分比编码** 是一种拥有 8 位字符编码的编码机制，这些编码在URL的上下文中具有特定的含义。它有时被称为 URL 编码。编码由英文字母替换组成：“%”后跟替换字符的 ASCII 的十六进制表示。

需要编码的特殊字符有： `':'`，`'/'`，`'?'`，`'#'`，`'['`，`']'`，`'@'`，`'!'`，`'$'`，`'&'`，`"'"`，`'('`，`')'`，`'*'`，`'+'`，`','`，`';'`，`'='`，以及，`'%'` 本身。其他的字符虽然可以进行编码但是不需要。

| 字符 | 编码 |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `':'` | `'/'` | `'?'` | `'#'` | `'['` | `']'` | `'@'` | `'!'` | `'$'` | `'&'` | `"'"` | `'('` | `')'` | `'*'` | `'+'` | `','` | `';'` | `'='` | `'%'` | `' '` |
| `%3A` | `%2F` | `%3F` | `%23` | `%5B` | `%5D` | `%40` | `%21` | `%24` | `%26` | `%27` | `%28` | `%29` | `%2A` | `%2B` | `%2C` | `%3B` | `%3D` | `%25` | `%20` 或 `+` |

根据上下文，空白符 `' '` 将会转换为 `'+'` （必须在 HTTP 的 POST 方法中使定义 `application/x-www-form-urlencoded` 传输方式），或者将会转换为 `'%20'` 的 URL。

参见
--

* 维基百科中 percent-encoding 的相关定义。
* RFC 3986, 第 2.1 节，其中定义了这种编码方式。


密钥 - MDN Web 文档术语表：Web 相关术语的定义

密钥
==

密钥是一段用于 密码算法加密和/或解密的信息。

经加密的消息需要保证即使密码体制中除了密钥外的其他部分在公开可见的情况下，依然保持安全性。

在对称密钥加密算法 (en-US)中，加密与解密过程使用同样的密钥。在公钥加密算法 (en-US)中，存在一对相互关联的*公钥*和*私钥*，公钥可以公开获取，私钥需要保密。公钥加密的消息，只有对应的私钥才能解密，反之亦然。

参见
--

* 维基百科上的柯克霍夫原则词条
* MDN 术语表
    + Block cipher mode of operation
    + 密码
    + 密文
    + 密码套件
    + 密码分析 (en-US)
    + 密码学
    + 解密
    + 加密
    + 密钥
    + 明文
    + 非对称密钥算法 (en-US)
    + 对称密钥算法 (en-US)


WebRTC - MDN Web 文档术语表：Web 相关术语的定义

WebRTC
======

**WebRTC** (*Web Real-Time Communication*) 是一个可以用在视频聊天，音频聊天或 P2P 文件分享等 Web App 中的 API。

WebRTC 主要由以下几个部分组成：

`getUserMedia`

为一个 RTC 连接获取设备的摄像头与 (或) 麦克风权限，并为此 RTC 连接接入设备的摄像头与 (或) 麦克风的信号。

`RTCPeerConnection`

用于配置音频或视频聊天。

`RTCDataChannel`

用于设置两个浏览器之间的端到端 (en-US) 数据连接。

参见
--

* WebRTC on Wikipedia
* Guide to WebRTC on MDN
* Browser support of WebRTC


IIFE（立即调用函数表达式） - MDN Web 文档术语表：Web 相关术语的定义

IIFE（立即调用函数表达式）
===============

**IIFE**（立即调用函数表达式）是一个在定义时就会立即执行的 JavaScript 函数。IIFE 这个名字是由 Ben Alman 在他的博客中提出的。

```js
(function () {
  // …
})();

(() => {
  // …
})();

(async () => {
  // …
})();
```

它是一种设计模式，也被称为自执行匿名函数，主要包含两部分：

1. 第一部分是一个具有词法作用域的匿名函数，并且用圆括号运算符 `()` 运算符闭合起来。这样不但阻止了外界访问 IIFE 中的变量，而且不会污染全局作用域。
2. 第二部分创建了一个立即执行函数表达式 `()`，通过它，JavaScript 引擎将立即执行该函数。
示例
--

### 避免污染全局命名空间

因为我们的程序可能包括很多来自不同源文件的函数和全局变量，因此限制全局变量的数量非常重要。如果我们有一些不再使用的初始化代码，我们可以使用 IIFE 模式。由于我们不会再次重用代码，因此在这种情况下使用 IIFE 会比使用函数声明或者函数表达式更好。

```js
(() => {
  // 初始化代码
  let firstVariable;
  let secondVariable;
})();

// firstVariable 和 secondVariable 变量在函数执行后会被丢弃
```

### 执行一个异步函数

`async` IIFE 允许你在比较旧的浏览器或者 JavaScript 运行环境没有顶层 await 中使用 `await` 和 `for-await`：

```js
const getFileStream = async (url) => {
  // 执行部分
};

(async () => {
  const stream = await getFileStream("https://domain.name/path/file.ext");
  for await (const chunk of stream) {
    console.log({ chunk });
  }
})();
```

### 模块模式

我们也可以使用 IIFE 来创建私有和公有变量、方法。对于模块模式的更复杂用法和 IIFE 的其他用途，你可以参考 Addy Osmani 的《Learning JavaScript Design Patterns》这本书。

```js
const makeWithdraw = (balance) => {
  ((copyBalance) => {
    let balance = copyBalance; // 这个变量是私有的
    const doBadThings = () => {
      console.log("I will do bad things with your money");
    };
    doBadThings();
    return (
      withdraw(amount) {
        if (balance >= amount) {
          balance -= amount;
          return balance;
        }
        return "Insufficient money"
      },
    );
  })(balance);

  const firstAccount = makeWithdraw(100);// "I will do bad things with your money"
  console.log(firstAccount.balance); // undefined
  console.log(firstAccount.withdraw(20)); // 80
  console.log(firstAccount.withdraw(30)); // 50
  console.log(firstAccount.doBadThings); // undefined; this method is private
  const secondAccount = makeWithdraw(20); // "I will do bad things with your money"
  console.log(secondAccount.withdraw(30)); // "Insufficient money"
  console.log(secondAccount.withdraw(20)); // 0
}
```

### ES6 之前在 For 循环中使用 var

在 **ES6** 引入 **let** 和 **const** 声明和块级作用域之前，我们可以在一些旧代码中看到 IIFE 的以下用法。通过 **var** 声明变量，只有函数作用域和全局作用域。假设我们创建两个按钮，文本按钮 0 和按钮 1，并且当我们点击它们时，想让它们 alert 0 和 1。下面的代码不能起作用：

```js
for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // 2
```

当点击时，按钮 0 和按钮 1 都会 alert 2，因为 `i` 是全局的，并且值为 2。在 ES6 之前为了解决这个问题，我们可以使用 IIFE 模式：

```js
for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = (function (copyOfI) {
    return () => {
      console.log(copyOfI);
    };
  })(i);
  document.body.appendChild(button);
}
console.log(i); // 2
```

当点击时，按钮 0 和按钮 1 会 alert 0 和 1，变量 `i` 是全局的。更简单的是使用 **let** 声明变量：

```js
for (let i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // Uncaught ReferenceError: i is not defined.
```

当我们点击按钮时，会 alert 0 和 1。

参见
--

* 立即调用函数表达式（维基百科）
* 术语表
    + 函数
    + 自执行匿名函数


TCP - MDN Web 文档术语表：Web 相关术语的定义

TCP
===

传输控制协议（TCP）是主要的网络协议之一。它使两台主机能够建立连接并交换数据流。TCP 能保证数据的交付，维持数据包的发送顺序。TCP 在 1970 年代被两位 DARPA 的科学家 Vint Cerf 和 Bob Kahn 所设计出来，他们当时被称为互联网之父。

### 深入

TCP 是互联网的基本通信语言协议。它会校验包的交付。TCP 被用于 Web 浏览器连接到互联网时以及从一个地址向另一个地址发送文件传递电子邮件。TCP 确保数据传输的可靠性，并且保证每一个字节在接收时维持它们的发送顺序。操作系统通过一个编程接口来管理 TCP。TCP 使用三次握手来建立一个连接和四次握手来中断一个连接。

### 参见

维基百科上关于 TCP 的介绍


防火墙 - MDN Web 文档术语表：Web 相关术语的定义

防火墙
===

**防火墙**（firewall）是一个过滤网络流量的系统。根据一些指定的规则，它可以让网络流量通过，也可以阻止网络流量通过。例如，它可以阻止针对某个端口的入站连接或针对某个 IP 地址的出站连接。

防火墙可以是简单的单一软件，也可以是更复杂的，比如一台专门的机器，其唯一的功能就是充当防火墙。

参见
--

* 维基百科上的防火墙词条


SQL - MDN Web 文档术语表：Web 相关术语的定义

SQL
===

\*\*SQL（结构化查询语言）\*\*是一个被设计用于基于表格的数据库进行更新、检索、计算数据等操作的描述性的计算机语言。

参见
--

* 在维基百科中的 SQL
* 在 sqlzoo.net 学习 SQL
* Tutorial Point


XHTML - MDN Web 文档术语表：Web 相关术语的定义

XHTML
=====

**XHTML**（eXtensible HyperText Markup Language，可扩展超文本标记语言）是在历史上被用来描述 HTML文档的术语，这些文档是按照 XML 语法规则编写的。

下面的例子显示了一个 HTML 文档和相应的“XHTML”文档，以及应当搭配使用的 HTTP `Content-Type` 标头。

### HTML 文档

```html
<!-- Content-Type: text/html -->

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>HTML</title>
  </head>
  <body>
    <p>我是 HTML 文档</p>
  </body>
</html>
```

### XHTML 文档

```xml
<!-- Content-Type: application/xhtml+xml -->

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
  <head>
    <title>XHTML</title>
  </head>
  <body>
    <p>我是 XHTML 文档</p>
  </body>
</html>
```

在实践中，很少有“XHTML”文档在网络上以 `Content-Type: application/xhtml+xml` 标头提供。即使这些文件是按照 XML 语法规则编写的，它们也是以 `Content-Type: text/html` 标头提供的——因此浏览器使用 HTML 解析器而不是 XML 解析器来解析这些文件。

参见
--

* HTML
* HTML5
* SVG
* MathML
* XML


Tree shaking - MDN Web 文档术语表：Web 相关术语的定义

Tree shaking
============

**Tree shaking** 是一个通常用于描述移除 JavaScript 上下文中的未引用代码 (dead-code) 行为的术语。

它依赖于 ES2015 中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

在现代 JavaScript 应用程序中，我们使用模块打包 (如webpack或Rollup) 将多个 JavaScript 文件打包为单个文件时自动删除未引用的代码。这对于准备预备发布代码的工作非常重要，这样可以使最终文件具有简洁的结构和最小化大小。

参见
--

* “打包过程中死代码消除的好处”，在 Axel Rauschmayer 的书“探索 JS：模块”中
* 用 webpack 实现 Tree shaking


代理服务器 - MDN Web 文档术语表：Web 相关术语的定义

代理服务器
=====

**代理服务器** 是用来在不同 Internet 网络之间进行导航的中继软件或者计算机。它们有助于访问万维网上的内容。代理服务器会拦截请求并提供响应；它不一定会转发所有请求（比如说在有缓存的情况），而且也许会修改请求或者响应（比如说在两个网络环境边界的时候修改请求头部信息）。

代理可以存在用户自己的电脑上，或者任何其他在用户计算机与互联网上的远程服务器之间的任何地方。一般来说有两种代理类型：

* **正向代理** 指处理到互联网的请求的代理
* **反向代理** 指处理互联网上的请求并转发到服务器的代理
参见
--

* Proxy servers and tunneling
* Proxy server on Wikipedia


Hyperlink（超链接） - MDN Web 文档术语表：Web 相关术语的定义

Hyperlink（超链接）
==============

超链接将网页或其他数据连接起来。在 HTML 中，`<a>` 标签定义了网页中的某处（例如一段文本或一张图片）到其他网页（也可能是本网页）的另一处的超链接。

深入了解
----

* Hyperlink on Wikipedia
* The Hyperlink guide on MDN
* Links in HTML Documents - W3C
* HTML a - hyperlink - W3C
* MDN 上的 `<a>`
* MDN 上的 `<link>`


开发者工具 - MDN Web 文档术语表：Web 相关术语的定义

开发者工具
=====

开发者工具 (或“开发工具”，或简称“DevTools”) 让开发者能够开发、测试和调试软件。

目前的浏览器提供集成开发者工具，可用于审查网页，还让用户审查和调试页面的HTML、CSS和JavaScript，检查网络流量，测试网页性能等等。

参见
--

* Web development tools on Wikipedia
* Firefox Developer Tools on MDN
* Firebug (former developer tool for Firefox)
* Chrome DevTools on chrome.com
* Safari 开发者工具（apple.com）
* Edge Dev Tools on microsoft.com


HTTP 标头（header） - MDN Web 文档术语表：Web 相关术语的定义

HTTP 标头（header）
===============

**HTTP 标头**是用于 HTTP 请求或响应的字段，它传递关于请求或者响应的额外上下文和元数据。例如，请求消息可以使用标头表明它首选的媒体格式，而响应可以使用标头表明返回主体的媒体格式。标头是不区分大小写，开始于行首，后面紧跟着一个 `':'` 和与之相关的值。字段值在一个换行符（CRLF）前或者整个消息的末尾结束。

HTTP 和 Fetch 规范涉及许多标头类别，包括：

* 请求标头：该标头包含要获取的资源或者客户端自身的更多信息。
* 响应标头：该标头包含有关响应的额外信息，例如它的位置或者关于服务器自身的信息（名字、版本...）。
* 表示标头：该标头包含消息主体中资源的元数据（例如，编码、媒体类型等）。
* Fetch 元数据请求标头：该标头关于消息主体中资源等元数据（例如，编码、媒体类型等）。

带有一个标头的基本请求：

```http
GET /example.html HTTP/1.1
Host: example.com
```

重定向请求中必须包含（`Location`）标头：

```http
302 Found
Location: /NewPage.html
```

一些典型的标头集合：

```http
304 Not Modified
Access-Control-Allow-Origin: \*
Age: 2318192
Cache-Control: public, max-age=315360000
Connection: keep-alive
Date: Mon, 18 Jul 2016 16:06:00 GMT
Server: Apache
Vary: Accept-Encoding
Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
X-Backend-Server: developer6.webapp.scl3.mozilla.com
X-Cache: Hit from cloudfront
X-Cache-Info: cached
```

**备注：** 规范的旧版本指的是：

* 通用标头：该标头同时适用于请求和响应，但是与在主体中传输的数据无关。
* 实体标头: 该标头含有与消息主体相关的附加信息，比如长度或者 MIME 类型（这是现在被称为表示（Representation）元数据标头的超集）。

参见
--

* HTTP 标头列表
* HTTP 规范中标头的语法
* 术语
    + HTTP 标头
    + 请求标头
    + 响应标头
    + 表示标头
    + Fetch 元数据请求标头
    + 禁止修改的标头
    + 禁止修改的响应标头
    + CORS 安全列出的请求标头的名称 (en-US)
    + CORS 安全列出的响应标头的名称 (en-US)


Guard - MDN Web 文档术语表：Web 相关术语的定义

Guard
=====

Guard 是 `Headers` 对象的新特性 (在 `Fetch spec` 中定义）, 限制了像 `set()` 和 `append()` 方法操作 header 的内容。举个例子，`immutable` guard 意味着 headers 不能被改变。阅读 Fetch basic concepts: guard，以了解更多信息。


URL - MDN Web 文档术语表：Web 相关术语的定义

URL
===

统一资源定位器（**URL**）是指定在 Internet 上可以找到资源的位置的文本字符串。

在 HTTP 的上下文中，URL 被叫做”网络地址“或“链接”。你的浏览器在其地址栏显示 URL，例如 `https://developer.mozilla.org`

URL 也可用于文件传输（FTP） ，电子邮件（SMTP）和其他应用。

参见
--

* 理解 URL 及其结构
* URL 的语法，在 URL 动态标准中定义。
* 在维基百科的 URL


表示标头（Representation header） - MDN Web 文档术语表：Web 相关术语的定义

表示标头（Representation header）
===========================

**表示标头**（representation header）是一种 HTTP 标头，用于描述 HTTP 消息主体中发送资源的特定的*表示*形式。

所谓表示（representation）就是特定的资源不同的表示形式。例如，相同的数据，其可能被格式化为例如 XML 或 JSON 等特定媒体类别的格式，被本地化为特定的书面语言或者地理区域，或者通过压缩或者其他方式编码以进行传输。底层资源在每种情况下都是一样的，但是它的表示形式是不同的。

客户端指定它们希望在内容协商期间发送的格式（使用 `Accept-*` 标头），并且表示标头将实际收到的*选定的表示形式*传达给客户端。

表示标头可能同时出现在 HTTP 请求和响应消息中。如果它们是作为 `HEAD` 请求的响应发送的，它们会描述如果实际请求资源时，*将*选择的主体内容。

表示标头包括：`Content-Type`、`Content-Encoding`、`Content-Language` 和 `Content-Location`。

参见
--

* RFC 9110, section 3.2: Representations
* 所有 HTTP 标头列表
* 有效负荷标头（Payload header）
* 实体标头（Entity header）
* `Digest`/ `Want-Digest` (en-US)


交叉轴 - MDN Web 文档术语表：Web 相关术语的定义

交叉轴
===

弹性容器 flexbox 的交叉轴和主轴 main axis 垂直，因此如果弹性方向是 `flex-direction` 行 `row` 或者反向行 `row-reverse` ，那么交叉轴就是从上至下地垂直走向的。

![The cross axis runs down the column](/zh-CN/docs/Glossary/Cross_Axis/basics3.png)

如果你的主轴是列 `column` 或者反向列 `column-reverse` ，那么交叉轴就是水平走向的。

![The cross axis runs along the row.](/zh-CN/docs/Glossary/Cross_Axis/basics4.png)

要在交叉轴上对齐，是通过弹性容器的 `align-items` 属性来控制的，或者通过弹性元素的 `align-self` 属性来单独决定的对齐方式。在多行弹性容器中，交叉轴上有多余控件的话，你还可以用 `align-content` 来控制行的间距。

参见
--

### 属性参考

* `align-content`
* `align-items`
* `align-self`
* `flex-wrap`
* `flex-direction`
* `flex`
### 拓展阅读

* CSS 弹性容器指南：*Basic Concepts of Flexbox*
* CSS 弹性容器指南：*Aligning items in a flex container*
* CSS 弹性容器指南：*Mastering wrapping of flex items*
* MDN Web Docs Glossary
    + Cross Axis
    + Flex
    + Flex Container
    + Flex Item
    + Grid
* 相关 CSS 属性
    + `align-content`
    + `align-items`
    + `align-self`
    + `flex`
    + `flex-basis`
    + `flex-direction`
    + `flex-flow`
    + `flex-grow`
    + `flex-shrink`
    + `flex-wrap`
    + `justify-content`
    + `order`


Brotli - MDN Web 文档术语表：Web 相关术语的定义

Brotli
======

**Brotli** 是一种通用的无损压缩算法。

它结合使用 LZ77 算法的一个现代变体、霍夫曼编码编码和二阶上下文建模来压缩数据，提供与目前可用的最佳通用压缩算法相当的压缩率。Brotli 提供比 gzip 更好（小）的压缩率，并具有与 deflate 相当的压缩速度。但 brotli 压缩速度比 Gzip 压缩慢，因此 gzip 可能更适合于压缩不可缓存的内容。

Brotli 与大多数现代浏览器兼容，但同时仍需考虑回落机制。

参见
--

* brotli.org
* Brotli 的 Github 仓库
* 维基百科上的 Brotli
* Brotli on Caniuse


Argument - MDN Web 文档术语表：Web 相关术语的定义

Argument
========

**argument** 是一个作为函数输入的值（原始数据或对象）。

参见
--

* Parameter 和 Argument 之间的差异 - 维基百科
* JavaScript 中的 `arguments` 对象


请求标头（Request header） - MDN Web 文档术语表：Web 相关术语的定义

请求标头（Request header）
====================

**请求标头**是一种 HTTP 标头，它可在 HTTP 请求中使用，其提供有关请求上下文的信息，以便服务器可以定制响应。例如，`Accept-*` 标头表示响应允许的条件和首选的格式。其他标头可以提供身份验证凭据（例如 `Authorization`），控制缓存，或者获取有关用户代理（user agent）或 referrer 的信息等。

根据规范，并非所有可以出现在请求中的标头都称为请求标头。例如，`Content-Type` 标头被成为表示标头。

此外，跨源资源共享（CORS）定义了一个叫做 simple header 的集合，它是请求头集合的一个子集。如果某次请求是只包含 简单标头 的话，则被认为是简单请求，不会触发预检请求。

以下展示了 HTTP 消息在 `GET` 请求之后的请求标头：

```http
GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,\*/\*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0
```

参见
--

* 所有 HTTP 标头列表
* RFC 9110, section 6.3: Header Fields


安全（HTTP 方法） - MDN Web 文档术语表：Web 相关术语的定义

安全（HTTP 方法）
===========

如果说一个 HTTP 方法是`安全`的，是指这是个不会修改服务器的数据的方法。也就是说，这是一个对服务器只读操作的方法。这些方法是安全的：`GET`，`HEAD` 和 `OPTIONS`。所有安全的方法都是幂等的，但并非所有幂等方法都是安全的，例如，`PUT` 和 `DELETE` 都是幂等的，但不是安全的。

就算方法具有只读的语义，服务器也能更改它自己的数据，比如：记录这次请求的日志或者数据分析。安不安全的定义是这个方法需不需要服务器修改数据。客户端不需要服务端修改数据，也就不会给服务端造成不必要的负担。浏览器调用安全的方法不用考虑会给服务端造成什么危害，这样，服务端就能允许客户端预加载资源。网络爬虫也是依赖于安全的 HTTP 方法。

安全的方法并不意味着只是对服务端的静态文件的请求，服务端可以在请求的时候即时生成资源返回，只要生成资源的脚本保证是安全的即可：也就是说生成资源的时候没有额外的影响。就像在一个电商网站添加删除购物车里的物品一样。

服务端有正确响应安全请求动作的义务，但是像 Apache、nginx 和 IIS，并没有关于此项的强制规定。再次强调，任何应用都不应让 `GET` 请求修改服务端的状态（数据）。

安全的请求，不会改变服务端的状态（数据）：

```http
GET /pageX.html HTTP/1.1
```

非安全的请求方式，可能会引起服务端状态的改变：

```http
POST /pageX.html HTTP/1.1
```

一个幂等（idempotent）但是不安全的方法：

```http
DELETE /idX/delete HTTP/1.1
```

参见
--

* HTTP 规范中的安全定义。
* 安全方法的详细解释：`GET`、`HEAD`、`OPTIONS`
* 非安全方法的详细解释：`PUT`、`DELETE`、`POST`


区块（CSS） - MDN Web 文档术语表：Web 相关术语的定义

区块（CSS）
=======

网页上的区块（block）指的是出现在新行上的 HTML 元素，即在横向书写模式中位于上一个元素之下，下一个元素之上（通常称为块级元素）。例如 HTML 中的 `<p>` 元素默认为块级元素，而 `<a>` 元素为*行级元素*——你可以在 HTML 源码中将多个锚点紧靠在一起，而在渲染输出中这些锚点将在同一行内显示。

使用 `display` 属性可以将元素改为在行内显示或者显示为区块（还有许多其他选项）；**区块**也受到定位方案和使用 `position` 属性的影响。

参见
--

* 视觉格式化模型


Block (块作用域) - MDN Web 文档术语表：Web 相关术语的定义

Block (块作用域)
============

在 JavaScript中，函数块是指被大括号 ("{}") 包裹住的相关联的statements的集合。例如，你可以在 `if (condition)`后声明一段函数块形式的代码，表明当条件判断为真时，解释程序应该运行上述函数块里的代码，或者当条件判断为假时跳过执行上述函数块里的代码。

参见
--

* JavaScript 函数块声明


签名（安全） - MDN Web 文档术语表：Web 相关术语的定义

签名（安全）
======

**签名**或*数字签名*是 协议，表明消息是真实的。

从给定消息的hash，**签名过程**首先使用实体的私有key生成链接到签名实体的数字签名。

收到消息后的**验证过程**

* *验证发件人* *-* 使用发件人的公钥来解码签名并恢复只能用发件人的私钥创建的哈希
* *检查消息完整性 -* 将哈希与接收到的文档中新计算的哈希进行比较（如果文档被篡改，两个哈希将不同）

如果私钥被泄密或收件人被欺骗地给出错误的公钥，系统就会失败。

参见
--

* Digital signature on Wikipedia
* See digest, encryption


Signature (functions)（函数签名） - MDN Web 文档术语表：Web 相关术语的定义

Signature (functions)（函数签名）
===========================

一个**函数签名 (**或*类型*签名，或*方法*签名**)** 定义了 函数 或 方法 的输入与输出。

一个签名可以包括：

* 参数 (en-US) 及参数的 类型
* 一个返回值及其类型
* 可能会抛出或传回的 异常
* 有关 面向对象 程序中方法可用性的信息 (例如关键字 `public`、`static` 或 `prototype)`。
深入
--

### JavaScript 中的签名

JavaScript 是一种*松散类型* 或 *动态*语言。这意味着你不必提前声明变量的类型。处理程序时，将自动确定类型。JavaScript 中的签名仍然可以为你提供有关该方法的一些信息：

```js
MyObject.prototype.myFunction(value);
```

* 该方法是安装在一个名为 `MyObject` 的 对象上。
* 该方法安装在 `MyObject` 的原型上 (因此它是一个实例方法 (en-US))，而不是一个 静态方法/类方法 (en-US) 。
* 该方法的名称是 `myFunction`。
* 该方法接受一个叫 `value` 的参数，且没有进一步定义。
### Java 中的签名

在 Java 中，签名用于识别虚拟机代码级别的方法和类。你必须在代码中声明变量的类型才能运行 Java 代码。Java 是*严格类型* 的，将在编译时检查所有参数是否正确。

```java
public static void main(String[] args)
```

* `public` 关键字是一个访问修饰符，指示任何对象都可以调用此方法。
* `static` 关键字指示此方法是一个类方法，而不是一个实例方法。
* `void` 关键字表指示此方法没有返回值。
* 该方法的名称为 `main`。
* 该方法接受一个类型为 String Array 的参数。它的名是 `args`。
参见
--

* Java 内部类型签名 在维基百科上


属性（CSS） - MDN Web 文档术语表：Web 相关术语的定义

属性（CSS）
=======

**CSS 属性**是一种特征（如颜色），其相关值定义了浏览器应如何显示该元素的一个方面。

以下是 CSS 规则的示例：

```css
/\* “div”选择器意味着文档中所有 div 元素会以该规则进行样式化 \*/
div {
  /\* 值为“black”的“color”属性值意味着文字会是黑色的 \*/
  color: black;

  /\* 值为“white”的“background-color”属性值意味着元素的背景颜色会是白色的 \*/
  background-color: white;
}
```

参见
--

* CSS 学习
* MDN 上的 CSS 参考
* CSS 工作组目前的工作


属性（JavaScript） - MDN Web 文档术语表：Web 相关术语的定义

属性（JavaScript）
==============

**JavaScript 属性**是一个对象的成员，它将键与值联系起来。JavaScript 对象是一种数据结构，它存储了属性的集合。

属性包含以下组成部分：

* 一个*名称*（也叫做*键*），它可能是字符串或符号值。
* 一个*值*，它可以是任何 JavaScript 值。具有函数值的属性也可以称为方法。
* 一些*特性*，它们指定了属性的读取和写入方式。属性可能具有 `configurable`、`enumerable` 和 `writable` 特性。

访问器属性没有实际的“值”。值是通过一对函数间接表示的，其中一个（getter）在读取值时调用，另一个（setter）在设置值时调用。但是，访问器属性在表面上表现得像常规数据属性，因为 getter 和 setter 函数会自动调用，并且通常对 JavaScript 代码是透明的。

属性的值（包括 getter 和 setter）及其特性被存储在一个叫做*属性描述符*的数据记录中。许多方法，例如 `Object.getOwnPropertyDescriptor()` 和 `Object.defineProperty()`，都与属性描述符一起工作。

*属性*一词本身与任何 JavaScript 值无关——它是一个抽象的概念。例如，在以下代码中：

```js
const obj = {
  a: 1,
  b() {},
};
```

对象 `obj` 含有两个属性。第一个属性以 `"a"` 为键，`1` 为值。第二个属性以 `"b"` 为键，一个函数为值，且使用了方法语法。`"a"`—`1` 和 `"b"`—`function` 之间的联系是对象的属性。

在类的概念中，属性可以分为*实例属性*和*静态属性*，前者由每个实例拥有，后者由类拥有，持有所有实例共有的数据。在继承的概念下，属性也可以分为*自有属性*和*继承属性*，前者由对象本身拥有，后者由对象的原型链中的对象拥有。

关于读写属性的更多信息，请参见使用对象。

参见
--

* 维基百科上的属性（计算机科学）词条
* JavaScript 面向对象编程介绍
* 对象属性
* 属性的可枚举性和所有权


节点（DOM） - MDN Web 文档术语表：Web 相关术语的定义

节点（DOM）
=======

在 DOM 的上下文中，节点（Node）是节点树中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

参见
--

* WHATWG 规范 node tree
* Node 对象


节点（网络） - MDN Web 文档术语表：Web 相关术语的定义

节点（网络）
======

在网络中，**节点**是网络中的一个连接点。在物理网络中，节点通常是一个设备，如计算机或路由器。

参见
--

* 维基百科上的节点


基线（排版） - MDN Web 文档术语表：Web 相关术语的定义

基线（排版）
======

**基线**（baseline）是指欧洲和西亚文字排版中，用于在上面放置字符的一条假想的基准线。

参见
--

* 维基百科上的基线词条
* MDN 上的 CSS 盒子对齐文档


基线（兼容性） - MDN Web 文档术语表：Web 相关术语的定义

基线（兼容性）
=======

**基线**（baseline）标识可跨浏览器使用的 web 平台特性。基线可帮助你决定何时使用某项特性，告诉你该特性何时不太可能给网站访客带来兼容性问题。

基线特性（如 API、CSS 属性集或 JavaScript 语法）可在 Chrome、Edge、Firefox 和 Safari 等多款知名且广泛使用的桌面和移动浏览器上一致运行。

基线特性被描述为当前稳定浏览器中新提供的，或随着时间的推移可持续支持且广泛可用的特性。

图标
--

![带对号标记的绿色小部件：基准线，广泛可用。四个浏览器徽标，均带有对号标记。](/zh-CN/docs/Glossary/Baseline/Compatibility/high.png)

如果你看到的是**广泛可用**（widely available）的基线图标，那么就可以相信该特性在每个基线浏览器中都有稳定的支持历史。广泛可用的特性已在多个浏览器中存在了多年。它适用于多种浏览器和设备，甚至是尚未更新到最新版本的浏览器和设备。

![带对号标记的蓝色小部件：基线 2022，最近可用。四个浏览器徽标，均带有对号标记。](/zh-CN/docs/Glossary/Baseline/Compatibility/limited.png)

如果你看到的是**最近可用**（newly available）的基线图标，那么就可以相信该特性至少能在每个基准浏览器的最新稳定版本上运行，而且通常更多。最新可用特性可在最新浏览器中使用，但可能无法在旧版浏览器和设备上使用。在使用新特性之前，请仔细考虑网站的受众。

![带叉号的灰色小部件：有限可用。四个浏览器徽标，两个带对号，两个带叉号。](/zh-CN/docs/Glossary/Baseline/Compatibility/low.png)

如果你看到的是**有限可用**（limited availability）的基线图标，那么其*不*属于基线特性。在依赖该特性之前，请对网站的用户进行更多的调查和测试，或者等待其成为基线特性。

浏览器系列
-----

基线跟踪以下浏览器的可用性：

* Apple Safari（iOS）
* Apple Safari（macOS）
* Google Chrome（Android）
* Google Chrome（桌面版）
* Microsoft Edge（桌面版）
* Mozilla Firefox（Android）
* Mozilla Firefox（桌面版）
额外考虑
----

基准是一个支持概要指南，并不涵盖所有情况。如果你的网站需要兼容较旧的设备或浏览器版本，或者基准状态未涵盖的浏览器，那么你可能需要自行调查或测试。如果基线未涵盖你的情况，请考虑在使用某项特性之前阅读 MDN 上的浏览器兼容性表或访问 caniuse.com。

贡献
--

基线（Baseline）是 W3C WebDX 社区小组的一项社区工作，依赖于 MDN 的开源浏览器兼容性数据。如果你有问题、反馈，或希望帮助更新和扩展基线状态报告所涵盖的特性，请访问 web-platform-dx/web-features 以便参与其中。

参见
--

* 跨浏览器测试
* web-platform-dx/web-features 仓库
* W3C WebDX 社区小组
* mdn/browser-compat-data 仓库


Web 性能 - 学习 Web 开发

Web 性能
======

构建一个网站需要 HTML、CSS 和 JavaScript。为了构建人们需要的、能吸引和留住用户的网站和应用，你需要创建一个良好的用户体验。良好用户体验的一部分是确保内容能够快速加载并响应用户交互。这就是所谓的 **web 性能**，在这个模块中，你将会学到构建性能良好的网站所需要的知识。

我们的初学者学习材料的其余部分尽量坚持网络最佳实践，如性能和无障碍，然而，专门关注此类主题也是不错的，并确保你熟悉它们。

学习途径
----

虽然了解 HTML、CSS 和 Javascript 是实现许多网页性能提升建议的必要条件，但了解如何构建应用却不是理解和衡量网页性能的必要先决条件。然而，我们建议你在学习本模块之前，至少通过学习我们的 web 入门模块，获得一个网络开发的基本概念。

更深入进行以下主题也很有必要，这些模块包括：

* HTML 入门
* CSS 初步
* JavaScript 初步

一旦你完成了这个模块的学习，你可能会对深入研究网络性能感到兴奋——你可以在我们的 MDN 网络主要性能部分找到很多进一步的教学内容，包括性能 API 的概述、测试和分析工具，以及性能瓶颈问题。

指南
--

本专题包含以下指南。以下是建议的学习顺序；你肯定应该从第一个开始。

为什么要提升 web 性能

本文讨论了为什么网络性能对无障碍、用户体验和你的商业目标很重要。

什么是 web 性能？

你知道网络性能很重要，但什么构成了网络性能？本文介绍了性能的组成部分，从网页的加载和渲染，包括你的内容如何进入用户的浏览器被浏览，到我们在考虑性能时需要考虑哪些群体的问题。

用户如何感知性能？

比你的网站有多快（以毫秒为单位）更重要的是你的用户认为你的网站有多快。这些感知受到实际页面加载时间、空闲、对用户互动的响应能力、滚动和其他动画的流畅度的影响。在这篇文章中，我们将讨论各种加载指标、动画和响应性指标，以及改善用户感知的最佳做法，如果不是实际时间的话。

性能的衡量

现在你已经了解了一些性能指标，我们将深入了解性能工具、指标和 API，以及我们如何使性能成为 Web 开发工作流程的一部分。

多媒体：图片

最容易提升网络性能的方式往往是媒体优化。根据每个用户代理的能力、尺寸和像素密度来提供不同的媒体文件是可能的。在这篇文章中，我们讨论了图像对性能的影响，以及减少每张图像发送字节数的方法。

多媒体：视频

最容易提升网络性能的方式往往是媒体优化。在这篇文章中，我们讨论了视频内容对性能的影响，并涵盖了从背景视频中删除音轨等技巧，可以提高性能。

JavaScript 性能最佳实践

如果使用得当，JavaScript 可以实现交互式和沉浸式的网络体验——反之则可能显著增加下载时间、渲染时间并损害应用性能、电池寿命和用户体验。本文概述了一些应该考虑的 JavaScript 最佳实践，以确保即使是复杂的内容也能尽可能地执行。

HTML 性能特性

一些属性和你的标记的源顺序会影响你的网站的性能。通过尽量减少 DOM 节点的数量，确保使用最佳的顺序和属性来包括样式、脚本、媒体和第三方脚本等内容，你可以大幅提高用户体验。这篇文章详细研究了如何使用 HTML 来确保最大的性能。

CSS 性能特性

在提高性能方面，CSS 可能是一个不太重要的优化重点，但有一些 CSS 特性对性能的影响比其他的更大。在这篇文章中，我们看看一些影响性能的 CSS 属性，以及处理样式的建议方法，以确保性能不受负面影响。

字体与性能

看看你是否需要引入外部字体，如果需要，如何以对网站性能影响最小的方式引入你的设计所需的字体。

移动端性能

随着移动设备上的网络访问普及，所有的移动平台都有成熟的网络浏览器，但可能存在带宽、CPU 和电池寿命受限等问题，因此必须考虑在这些平台上提供的 Web 内容的性能。本文探讨了针对移动设备的性能考虑。

web 性能的商业案例

开发人员可以采取许多措施来提高系统的性能，但是什么样的速度才算快？如何说服管理层重视这些努力？一旦优化完成，如何确保系统不会再次出现性能问题？本文将探讨如何说服管理层、如何培养性能文化和制定性能预算，并介绍确保系统不会出现性能回退的方法。

参见
--

Web 性能资源

除了 HTML、CSS、JavaScript 和媒体文件等前端组件外，还有一些可以使应用程序变慢的功能和可以使应用程序在主观和客观上变快的功能。有许多与网络性能有关的 API、开发者工具、最佳实践和不良实践。在这里，我们将介绍许多这些功能的基本水平，并提供更深入的链接，以提高每个主题的性能。

响应式图片

在这篇文章中，我们将了解响应式图像的概念，并看看 HTML 提供了哪些工具来帮助实现它们。响应式图像是在屏幕尺寸、分辨率和其他类似特征差别很大的设备上能很好地工作的图像。这有助于提高不同设备的性能。响应式图像只是响应式设计的一部分，这是你未来要学习的一个 CSS 主题。

MDN 上主要的 web 性能页面

我们主要的网络性能部分。在这里你会发现更多关于网络性能的细节，包括性能 API 的概述，测试和分析工具，以及性能瓶颈的问题。


JavaScript - 学习 Web 开发

JavaScript
==========

JavaScript 编程语言允许你在 Web 页面上实现复杂的功能。如果你看到一个网页不仅仅显示静态的信息，而是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等——你基本可以确定，这需要 JavaScript 的参与。

学习路线
----

很多人认为，与相关技术如 HTML 和 CSS 相比，学习 JavaScript 更为困难。在尝试学习 JavaScript 之前，我们强烈建议你首先至少熟悉上述这两种技术，一些其他知识可能也会有帮助。你可以从以下模块开始学习之旅：

* 开始了解 Web
* HTML 入门
* CSS 入门

拥有其他编程语言的经验也许会有帮助。

熟悉 JavaScript 的基本概念之后，你将具备学习更多高级主题的能力，比如这些：

* 深入理解 JavaScript，如 JavaScript 指南中的内容
* Web APIs
模块
--

本主题包含以下模块，我们建议你按照下列顺序阅读。

JavaScript 第一步

作为 JavaScript 学习的第一个模块，在开始编写第一段代码之前，我们首先回答一些基础的问题，比如“JavaScript 是什么？”、“它的代码长什么样？”、以及“它能做什么？”。之后我们会详细讨论一些 JavaScript 的关键功能，比如变量、字符串、数字、数组等。

构建 JavaScript 代码块

在这个模块中，我们继续介绍 JavaScript 的关键的基础功能，并逐渐将注意力转移到常见类型的代码块，比如条件语句、循环、函数、以及事件等。你应该已经遇到过这些概念，而这里我们将正式学习。

JavaScript 对象初识

在 JavaScript 中，绝大多数东西都是对象；从作为 JavaScript 核心功能的字符串和数组，到建立在 JavaScript 之上的浏览器 API，无一不是对象。你甚至可以自己创建对象，将相关的函数和变量封装打包。想要进一步学习 JavaScript 语言知识、写出高效的代码的话，理解这种面向对象的特性是必不可少的。这个模块将帮助你了解“对象”，我们将详细介绍对象的设计思想和语法、如何创建对象，并解释 JSON 数据是什么、如何使用。

异步 JavaScript

这个模块介绍异步 JavaScript：为什么重要，如何用它来处理 可能引起阻塞的操作（比如从服务器获取资源）

客户端 Web API

为网站或应用编写客户端 JavaScript 脚本时，你很难不用到 Web API 接口。这些接口允许你一定程度上操纵网页所运行在的浏览器和操作系统、甚至来自其他网站和服务的数据。在这个模块中，我们将了解有哪些 API，并学习使用开发过程中最常见的 API。

解决常见的 JavaScript 问题
-------------------

解决常见的 JavaScript 问题 提供一些链接，解释如何使用 JavaScript 来解决创建网页时非常常见的问题。

参见
--

Coding math

由 Keith Peters 制作的一个优秀的视频教程系列，向你传授高效编程所需的必备技能。


web 入门 - 学习 Web 开发

web 入门
======

*web 入门*是一个简要的系列，向你介绍 web 开发的实用性。你将配置你需要的工具来构建一个简单的网页，并发布一份属于你自己的代码。

你的第一个网站
-------

创建一个专业的网站需要大量的工作，所以如果你是 web 开发的新手，我们鼓励你从小事做起。你不可能立马再建一个 Facebook，但做一个自己的简单网站并不难，我们将由此开始。

通过阅读下面列出的文章，你将从零开始获得你的第一个在线网页。让我们开始吧！

安装基本软件

说到建设网站的工具，有很多可供选择的。如果你初入门径，你可能会被外面的一系列代码编辑器、框架和测试工具所迷惑。在这篇文章中，我们将逐步向你展示如何安装你需要的软件，以开始基本的 web 开发。

你的网站会是什么样子？

在你开始为你的网站写代码之前，你应该先计划一下。需要展示什么信息？使用什么字体和颜色？我们概述了一个简单的方法，你可以按照这个方法来规划网站的内容和设计。

文件处理

一个网站由许多文件组成：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要将这些文件组合成一个合理的结构，并确保它们能够相互交流。这篇文章解释了如何为你的网站建立一个合理的文件结构以及你应该注意的问题。

HTML 基础知识

超文本标记语言（HTML）是你用来组织你的网络内容，并赋予它意义和目的的代码。例如，我的内容是一组段落还是一个要点列表？我的页面上是否插入了图片？我有一个数据表吗？在你的接受能力之内，这篇文章提供了足够的信息，使你熟悉 HTML。

CSS 基础知识

层叠样式表（CSS）是你用来为你的网站设置样式的代码。例如，你希望文本是黑色还是红色？内容应该画在屏幕的什么地方？应该用什么背景图片和颜色来装饰你的网站？在这篇文章中，我们将带你了解你所需要的东西，以便开始使用。

JavaScript 基础知识

JavaScript 是一种编程语言，你用它来给你的网站添加交互功能。例如游戏、当按钮被按下或数据被输入表格时发生的事情、动态造型效果、动画等。这篇文章将让你了解这种令人兴奋的语言的潜力，以及如何开始使用。

发布你的网站

一旦你完成了编写代码并组织构成你的网站的文件时，你需要把它们全部放在网上，以便人们能够找到它。这篇文章描述了如何以最简便的方式将你的简单示例上线至网络。

万维网是如何工作的

当你访问你最喜欢的网站时，你可能不知道正有很多复杂的事情在后台发生。这篇文章概述了当你在电脑上浏览网页时发生的事情。

参见
--

* web 解密: 一系列解释 web 基础原理的精彩视频，针对 web 开发的完全初学者。由 Jérémie Patonnier 创建。
* web 及 web 标准: 这篇文章提供了一些关于 web 的背景故事——它是如何诞生的，什么是 web 标准，它们是如何一起工作的，为什么“web 开发者”是一个很好的职业选择，以及你将通过该课程了解什么样的最佳实践。


CSS - 学习 Web 开发

CSS
===

层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，你可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

学习路径
----

在尝试学习 CSS 之前，你应该了解 HTML 的基础知识。建议你先学习 HTML 简介模块 — 这一模块主要介绍了以下内容：

* CSS，从 CSS 模块简介开始
* 更高级的HTML 模块
* JavaScript，如何使用 Javascript 给网页加上动态功能

我们建议你同时学习 HTML 和 CSS，在这两个主题之间来回切换。因为有着 CSS 的 HTML 更加有趣，并且不了解 HTML 就不能真正掌握 CSS。

在学习本章节之前，你应该会使用计算机，熟练的使用网页操作（哪怕只是盯着屏幕看）。你应该配置好一个基本的操作环境（见安装基本软件），知道如何创建和管理文件（见处理文件）—这两个都是 Web 入门 的初学者模块的一部分。

我们建议你在学习本章内容前，先完成 Web 入门，尽管这不是必须的；CSS 基础文章中涵盖的大部分内容在 CSS 模块简介中也有，而且 CSS 模块涵盖了更多的细节。

模块
--

本主题包含以下模块，建议按顺序阅读这些模块。你应该从第一个模块开始。

CSS 初步

这个模块介绍了使用 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将 CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CSS 的调试。

构建 CSS 块

本模块承接CSS 初步，进行进一步的学习——既然你已经熟悉了 CSS 的语言和语法，有了一些使用 CSS 的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。这样做的目的是，在继续深入到更加具体的规则，例如样式化文本和CSS 布局前，为你提供一个用于编写堪用的 CSS 的工具箱，帮你理解所有必要的理论。

样式化文本

这个模块介绍基础的文本样式，包括字体属性的设置，粗体和斜体，行和字母间距，阴影和其他文本功能。我们通过在网页上设置特定的字体，指定列表和链接的样式来完成这一模块。

CSS 布局

到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内和其他框旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性、使用新的布局工具如弹性盒（flexbox），CSS 网格和定位、以及你仍想知道的一些传统技术，来深入学习 CSS 布局。

解决常见的 CSS 问题
------------

使用 CSS 解决常见问题解释了怎样使用 CSS 解决创建一个网页时常遇到的问题。

从这里开始，你大致就能在 HTML 元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。不过一旦你牢固掌握了即便是 CSS 最基础的部分，也没有很多做不到的事情。学习 CSS 最棒的一件事情就是，一旦你知道了基本的原理，即使你实际上不知道怎么做，你通常还是会很清楚什么能做到而什么不能做到！

参阅
--

CSS on MDN

MDN 上 css 文档的主要入口，包括详细的参考到高级的教程一系列内容。


工具和测试 - 学习 Web 开发

工具和测试
=====

一旦你开始使用 web 的核心技术（如 HTML,CSS 和 Javascript）进行编程，并且开始获得更多的体验，读更多的资料，学习更多的提示和技巧，你就会遇到各种工具，从优化的 CSS 和 Javascript 到测试和自动化应用，再到其他更多的领域。当你的 web 项目变得更大更复杂，如果你希望利用一些工具为你的代码做出可靠的测试计划。本节教程旨在帮助你开始并做出明智的选择。

web 行业是个让人兴奋的地方，但它也有并发症。现在我们用来构建网站的核心技术是相当稳定的，但是新的特性一直不断地加进来，还有建立在这些技术之上的能够方便我们工作的新的工具，都在不断出现。在此之前，我们仍然需要保持前台的跨浏览器支持，并且保证我们的代码遵循最佳实践以允许我们的项目可以工作在不同的浏览器和设备上，让我们的用户能够正常浏览我们的网页，还要保证对残障人士可用。

找出你应该用什么样的工具是个困难的过程，所以我们这系列文章来告诉你哪些工具是可用的，它们能为你做什么，和如何利用行业的热门工具。

**备注：** 因为一直以来都是新的工具出现伴随着旧的工具过时，所以我们有意将材料写得尽可能地中立—我们想优先关注那些能够帮你完成通用类型任务的工具，而不是一些特殊工具。我们显然需要展示某些工具的用途来演示特殊的技术，但是要清楚我们并不是把它们作为最好的或者唯一的工具进行推荐—大多数情况下有很多其他的方式可以备选，我们只是想提供给你一个清晰的可用的方法。

学习途径
----

尝试详细地使用这些工具之前，你首先应该学习 HTML, CSS，和 JavaScript 的基础知识。比如，在你开始调试复杂 web 代码之前，你需要知道这些语言的基础知识，或者能有效地使用 Javascript 库，或者能够使用测试工具为你的代码编写和运行测试等等。

首先你需要一个扎实的基础。

模块
--

真实世界 web 开发工具 (TBD)

在这个模块中，我们探索各种可用的 web 开发工具。这包括审查你不得不解决的最基本的任务，如何让它们在一个工作流中协调配合以及目前能够完成这些任务的最好的工具。

跨浏览器测试

这个模块在测试 web 项目跨不同浏览器的领域看起来很特别。我们要识别你的目标受众（比如，你最担心的是哪些用户、浏览器和设备？），如何做测试，主要的问题是你将面临不同类型的代码和如何修复它们，有什么有用的工具能够帮助你测试和修复问题，如何通过自动化来增加测试效率。


Web 前端开发者 - 学习 Web 开发

Web 前端开发者
=========

欢迎阅读我们的 Web 前端开发者学习路线图！

该路线图提供一个结构化的课程，教会你成为一名 Web 前端开发所需要了解的一切。通过学习每个章节，获得新技能（或者提升原有的技能）。每个章节都包括练习和评估，让你能够继续之前测试你对章节内容的理解。

涵盖的主题
-----

该路线图涵盖的主题大致范围如下：

* 基础准备以及如何学习
* Web 标准和最佳实践 (例如辅助功能和跨浏览器兼容)
* HTML，一门赋予网站内容结构和意义的语言
* CSS，一门美化网站页面的语言
* JavaScript，用来为网站创建动态功能的脚本语言
* 一些有助于现代化客户端 Web 开发的工具

这些章节是按照学习顺序而进行设计的，但每个章节又自成一体。例如，如果你已经对 HTML 非常熟悉了，你大可放心地跳过这个章节直接学习 CSS 部分。

预备知识
----

你并不需要任何预备知识以开始这一章节，你仅需要一台可以运行现代浏览器并且联网的电脑和一颗好学之心。

如果你不确定 Web 前端是否适合自己，或是想在开始一个更长、更完整的课程之前先对其有一个更通识的了解，可以先阅读 Web 入门章节。

获得帮助
----

我们尽量让 Web 前端开发学习尽可能的轻松，但是你仍可能因为一些难以理解的点、或某段无法像预期中的那样工作的代码等原因而止步不前。

无论是新手还是富有经验的开发者都经常遇到困难，但是不要慌。“如何学习”章节提供了一些实用的有关如何查找信息和自行解决问题的提示，如果仍然上述提示仍然无法解决你的问题，大胆的在讨论区提出你的问题。

让我们开始吧，祝你好运！

学习路线图
-----

### 起步

学习用时：1–2 小时

#### 预备知识

仅需基础的计算机知识。

#### 我怎么知道自己是否可以继续往下学习了？

本章节没有评估测试，但是请不要跳过它 — 这对于帮你准备好应对后面的练习和学习非常重要。

#### 核心提示

* 安装基础软件 (15 分钟) (15 分钟)
* Web 和 Web 标准的背景介绍 (45 分钟)
* 学习和获得帮助 (45 分钟)
### HTML 语义和结构

学习用时：35–50 小时

#### 预备知识

基础的计算机知识和基本的 Web 开发环境。

#### 我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

#### 核心模块

* HTML 介绍 (15–20 小时阅读/练习)
* 多媒体与嵌入 (15–20 小时阅读/练习)
* HTML 表格 (5–10 小时阅读/练习)
### 使用 CSS 布局和美化

学习用时：90–120 小时

#### 预备知识

学习 CSS 前需要有基础的 HTML 知识，请至少学习完 HTML 介绍再开始。

#### 我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

#### 核心模块

* 学习 CSS 的第一步 (10–15 小时阅读/练习)
* 编写 CSS (35–45 小时阅读/练习)
* 添加文本样式 (15–20 小时阅读/练习)
* CSS 布局 (30–40 小时阅读/练习)

#### 额外资源

* CSS 布局 cookbook
### 使用 JavaScript 开发交互

学习用时：135–185 小时

#### 预备知识

学习 JavaScript 前需要有基础的 HTML 知识，请至少学习完 HTML 介绍再开始。

#### 我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

#### 核心模块

* JavaScript 第一步 (30–40 小时阅读/练习)
* 编写 JavaScript (25–35 小时阅读/练习)
* 客户端 Web API (30–40 小时阅读/练习)
* JavaScript 对象入门 (25–35 小时阅读/练习)
* 异步 JavaScript (25–35 小时阅读/练习)
### Web 表单 — 处理用户数据

学习用时：40–50 小时

#### 预备知识

高效使用 Web 表单需要 HTML、CSS 和 JavaScript 知识。鉴于与表单打交道的复杂性，这一节被独立了出来。

#### 我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

#### 核心模块

* Web 表单 (40–50 小时)
### 让所有人都能使用 Web

学习用时：45-55 小时

#### 预备知识

学习本章前最好对 HTML、CSS 和 JavaScript 都有一定了解— 本章很多技术和最佳实践都需要用到它们。

#### 我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

#### 核心模块

* 跨浏览器测试 (25–30 小时阅读/练习)
* 无障碍（辅助功能） (20–25 小时阅读/练习)
### 现代工具

学习用时：55–90 小时

#### 预备知识

学习本章前最好对 HTML、CSS 和 JavaScript 都有一定了解— 本章很多技术和最佳实践都需要用到它们。

#### 我怎么知道自己是否可以继续往下学习了？

本章节各模块均没有评估测试，但是第 2 章和第 3 章的学习教程应该能够让你很好的掌握现代工具的要义。

#### 核心模块

* Git 和 GitHub (5 hour read)
* 客户端 Web 开发工具入门 (20–25 hour read)
* 客户端 JavaScript 开发框架入门 (30-60 hour read/exercises)


常见问题 - 学习 Web 开发

常见问题
====

学习区域的这一部分旨在为可能出现的常见问题提供答案，这些问题不一定是结构化的核心学习途径的一部分（例如：HTML 或 CSS 的学习文章），这些文章专注于它们自己的内容。

* 使用 HTML 解决常见问题
* 使用 CSS 解决常见问题
* 使用 JavaScript 解决常见问题
* Web 机制
* 工具和安装
* 设计与无障碍