recursal/MDN huggingface dataset:
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
服务器
===

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

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

举个例子：

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

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

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

参见
--

* 维基百科：PDF
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
=====

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

参见
--

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

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

参见
--

* 在维基百科的 域名
* 了解“域名“
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）
=========

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

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

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

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

* 本地化
* Unicode 联盟
* JavaScript 国际化 API
运算符
===

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

参见
--

* 维基百科上的运算符词条
* JavaScript 运算符
密码套件
====

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

在 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
===

**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
===========

**网格列**是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
====

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

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

参见
--

* `Strict-Transport-Security`
* OWASP 文章：HTTP Strict Transport Security
* 维基百科上的 HTTP 严格传输安全
分布式拒绝服务攻击
=========

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

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

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

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

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

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

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

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

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

参见
--

* 在维基百科上的 Apache Subversion
* 官方网站
Unix 时间
=======

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

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

参见
--

* 维基百科上的 Unix 时间
* 维基百科上的闰秒
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
======

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

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

保留字符
----

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

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

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

参见
--

* 字符实体的官方列表
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）
======================

**有效负荷标头**（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
====

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

参见
--

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

* 规范
Cookie
======

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

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

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

参见
--

* 维基百科上的 HTTP cookie
HMAC（密钥散列消息认证码）
===============

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

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

参见
--

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

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

参见
--

* 在维基百科上的 GIF
行级内容
====

在 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
=========

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

更多
--

### 一般知识

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

* JavaScript statements and declarations
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
======

**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（变量提升）
==============

变量提升（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
====

**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
====

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

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

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

参见
--

* `XMLHttpRequest`
* `Fetch API`
* 使用 Fetch API
* 维基百科上的 AJAX
* 同步与异步通信（2014）
源（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
=============

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

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

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

参见
--

* Character encoding（维基百科）
* Mojibake（维基百科）
* 术语表
    + Character
    + Unicode
可变（Mutable）
===========

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

参见
--

* 维基百科上的不可变对象
* 不可变
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
用户代理
====

用户代理是代表一个人的计算机程序，例如，一个在 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
================

**百分比编码** 是一种拥有 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 节，其中定义了这种编码方式。
密钥
==

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

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

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

参见
--

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

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

### 深入

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

### 参见

维基百科上关于 TCP 的介绍
防火墙
===

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

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

参见
--

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

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

参见
--

* 在维基百科中的 SQL
* 在 sqlzoo.net 学习 SQL
* Tutorial Point
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
============

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

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

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

参见
--

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

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

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

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

* Proxy servers and tunneling
* Proxy server on Wikipedia
Hyperlink（超链接）
==============

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

深入了解
----

* Hyperlink on Wikipedia
* The Hyperlink guide on MDN
* Links in HTML Documents - W3C
* HTML a - hyperlink - W3C
* MDN 上的 `<a>`
* MDN 上的 `<link>`
开发者工具
=====

开发者工具 (或“开发工具”，或简称“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）
===============

**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
=====

Guard 是 `Headers` 对象的新特性 (在 `Fetch spec` 中定义）, 限制了像 `set()` 和 `append()` 方法操作 header 的内容。举个例子，`immutable` guard 意味着 headers 不能被改变。阅读 Fetch basic concepts: guard，以了解更多信息。
URL
===

统一资源定位器（**URL**）是指定在 Internet 上可以找到资源的位置的文本字符串。

在 HTTP 的上下文中，URL 被叫做”网络地址“或“链接”。你的浏览器在其地址栏显示 URL，例如 `https://developer.mozilla.org`

URL 也可用于文件传输（FTP） ，电子邮件（SMTP）和其他应用。

参见
--

* 理解 URL 及其结构
* URL 的语法，在 URL 动态标准中定义。
* 在维基百科的 URL
表示标头（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)
交叉轴
===

弹性容器 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`