recursal/MDN huggingface dataset:
CSS 选择器
=======

**CSS 选择器**是 CSS 规则的一部分，用于匹配文档中的元素。匹配的元素将会应用规则指定的样式。

示例
--

看下面的 CSS：


```css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}
```


选择器例如：`"p"`（文档中的 `<p>` 元素都会应用绿色字体的样式）、`"div.warning"`（文档中所有 class 包含 `"warning"` 的 `<div>` 元素都会有一个看起来像警告框的样式）和 `"#customized"`（id 为 `"customized"` 的元素中的文本为 16px 高，字体是 Lucida Grande 和一些用作回落的字体）。

我们可以把上面的 CSS 应用到 HTML 中，如下：


```html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>
```


页面的内容将会呈现如下样式：

参见
--

* 查看我们的关于选择器的介绍 CSS 选择器
* 基础选择器
    + 标签选择器 `elementname`
    + 类选择器 `.classname`
    + ID 选择器 `#idname`
    + 通配选择器 `* ns|* *|*`
    + 属性选择器 `[attr=value]`
    + 状态选择器 `a:active, a:visited`
* 组选择器
    + 选择器列表 `A, B`
* 关系选择器
    + 接续兄弟选择器 `A + B`
    + 后续兄弟选择器 `A ~ B`
    + 直接子元素选择器 `A > B`
    + 后代元素选择器 `A B`
* 伪选择器（Pseudo）
    + 伪类 `:`
    + 伪元素 `::`
Fetch 元数据请求标头
=============

**fetch 元数据请求标头**是一个 HTTP 请求标头，其提供有关来自请求上下文的额外信息。这允许服务器根据请求的来源和将要使用的方式，决定是否允许该请求。

有了这些信息，服务器可以实现资源隔离策略，允许额外的站点仅请求用于共享的资源并且适当的使用资源。这些方法可以帮助缓解常见的跨站点网络漏洞，例如 CSRF、跨站点脚本攻击（“XSSI”）、定时攻击和跨源消息攻击。

这些标头有 `Sec-` 前缀，因此有禁止修改的标头。因此，它们不能通过 JavaScript 进行修改。

fetch 元数据请求标头：

* `Sec-Fetch-Site`
* `Sec-Fetch-Mode`
* `Sec-Fetch-User`
* `Sec-Fetch-Dest`
参见
--

* 使用 Fetch 元数据保护你的资源免受网路攻击（web.dev）
* Fetch 元数据请求标头的 playground（secmetadata.appspot.com）
* 所有 HTTP 标头列表
* 所有 HTTP 标头列表 > Fetch 元数据请求标头
* 术语
    + 表示标头
    + HTTP 标头
    + 响应标头
    + 请求标头
块级内容
====

在 CSS 中，参与块级布局的内容被称为**块级内容**（block-level content）。

在块级布局中，从包含块的顶部开始，盒子总是一个接着一个地垂直放置。每个盒子的左外边缘触及包含块的左边缘。块级元素总是开始在新的行/列上。在水平书写模式中，像英语或者阿拉伯语，它占据父元素（容器）的整个水平空间和等于其内容高度的垂直空间，从而创建一个“区块”。

**备注：** 如果包含块的 `writing-mode` 被设置为默认值之外的值，上述的块布局行为将发生改变。

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

示例
--

在这个示例中，两个段落（`<p>`）元素被放置在 `<div>` 中。


```html
<div>
  <p>这是第一段。这些段落的背景颜色已着色，以将其与其父元素区分开。</p>
  <p>这是第二段。</p>
</div>
```


段落（`<p>`）元素默认是块级的。这是它们显示在块布局中的原因：
```

p {
  background-color: #8abb55;
}
```

参见
--

* 行级内容
* 块格式化上下文
* `display`
* `writing-mode`
URN
===

URN（统一资源名称）是标准格式的 URI，指的是资源而不指定其位置或是否存在。这个例子来自RFC3986: `urn:oasis:names:specification:docbook:dtd:xml:4.1.2`

参见
--

* URN on Wikipedia
摘要
==

**摘要**是由散列函数从完整消息生成的更小值。理想情况下，摘要是可快速计算、不可逆且不可预测的，因此可用于表明是否有人篡改了给定的消息。

摘要可用于执行多种任务：

* 非加密类应用（例如：哈希表的索引、用于检测重复数据或唯一标识文件的指纹）
* 验证消息完整性（被篡改的消息具有不同的散列值）
* 生成伪随机数
* 生成密钥

为应用选择合适的散列函数以避免冲突和可预测至关重要。

参见
--

* 密码散列函数
* 维基百科上的密码散列函数
代码分割
====

\*\*代码分割（Code splitting）\*\*是将代码划分为可以按需/同时加载的多个 bundles 或组件。

随着应用程序日趋复杂，或仅是对其进行简单的维护，CSS 和 JavaScripts 文件以及 bundles 的大小都会随之增加，尤其是所包含的第三方库的数量和大小的增长。为了避免下载巨大的文件，可以将脚本拆分为多个较小的文件。当前页面所需的代码能够立即加载，而另外的脚本可以在与页面或应用交互后懒加载（lazy loaded (en-US)），页面性能因此提升。虽然代码的总量仍然相同（甚至可能大了几个字节），但是初次加载所需的代码数量减少了。

代码分割是由 Webpack 和 Browserify 等打包工具所支持的一项功能，这些打包工具能够创建在运行时动态加载的多个 bundles。

另请参见
----

* Bundling
* Lazy loading
* HTTP/2
* Tree shaking
Same-origin policy
==================

同源策略是一种重要的安全机制，用来限制来自某个域的文档或脚本与另一个域的资源的交互行为，能够隔离潜在的恶意文件，减少受攻击的可能性。
Certified
=========

**已认证标识**意味着一个程序、一项内容或一次数据传输已经成功经过了相关领域专家的认证，因此该项目被认为是完整的、安全的、可信的。

关于密码学中证书的细节，请参考数字认证证书。

参见
--

* 维基百科中的证书
First-class Function（头等函数）
==========================

当一门编程语言的函数可以被当作变量一样用时，则称这门语言拥有**头等函数**。例如，在这门语言中，函数可以被当作参数传递给其他函数，可以作为另一个函数的返回值，还可以被赋值给一个变量。

示例 | 把函数赋值给变量
-------------

### JavaScript


```js
const foo = function () {
  console.log("foobar");
};
// 用变量来调用它
foo();
```


这里我们把一个匿名函数赋值给一个变量，然后我们在这个变量后面加上一对圆括号 `()` 来调用这个函数。

**备注：** 即使你的函数有自己的函数名称，你仍然可以用这个变量名去调用它。给函数命名只会方便你调试，但不会影响我们调用它。

示例 | 传递一个函数作为参数
---------------

### JavaScript


```js
function sayHello() {
  return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// 传递 `sayHello` 作为 `greeting` 函数的参数
greeting(sayHello, "JavaScript!"); // Hello, JavaScript!
```


这里我们传递 `sayHello()` 函数作为 `greeting()` 函数的参数，这就印证了头等函数定义所说的——我们把函数当作**值**或者说是**变量**来对待。

**备注：** 回调函数：我们把一个函数作为参数传递给另外一个函数，那么我们就称这个函数为回调函数。`sayHello()` 函数就是一个回调函数。

示例 | 返回一个函数
-----------

### JavaScript


```js
function sayHello() {
  return function () {
    console.log("Hello!");
  };
}
```


在这个例子中，我们需要从另外一个函数中返回一个函数，*之所以可以返回一个函数，是因为在 Javascript 中，函数可被作为**值**来对待。*

**备注：** 高阶函数（Higher-Order Function）：一个返回另外一个函数的函数被称为高阶函数。

我们再来看看上面的例子：假如我们需要调用 `sayHello` 这个函数，然后让它返回一个**匿名函数**，我们有两种方法：

### 1- 用一个变量


```js
const sayHello = function () {
  return function () {
    console.log("Hello!");
  };
};
const myFunc = sayHello();
myFunc(); // Hello!
```


用这种方法，它返回一个 `Hello!` 的消息。

**备注：** 你要用另外一个变量来调用它。如果你直接用 `sayHello` 来调用这个函数，它会返回这个函数自身，而不会调用它里面被返回的函数。

### 2- 使用双括号


```js
function sayHello() {
  return function () {
    console.log("Hello!");
  };
}
sayHello()();
```


我们使用双括号 `()()` 来调用 `sayHello()` 返回的函数。

参见
--

* First-class functions 在维基百科
SEO
===

**SEO**（搜索引擎优化）是一种让网站在搜索引擎结果中更加清晰，也帮助我们将搜索结果更靠前

搜索引擎抓取网页，跟随页面之间的链接，并索引找到的内容。搜索时，搜索引擎会显示索引内容。爬行者遵守规则。如果你在为网站进行搜索引擎优化时密切关注这些规则，则会为网站提供最好的机会，以便在首批结果中显示，增加流量和可能的收入（用于电子商务和广告）。

搜索引擎为 SEO 提供了一些指导，但大型搜索引擎将结果排名保持为商业秘密。SEO 结合了官方搜索引擎指南，经验知识和科学论文或专利的理论知识。

SEO 方法分为三大类：

技术

使用语义标记内容HTML. 浏览网站时，抓取工具应该只找到你要编入索引的内容。

撰稿

使用访问者的词汇编写内容。使用文本和图像，以便抓取工具可以理解主题。

声望

当其他已建立的站点链接到你的站点时，你获得最多流量。

参见
--

* SEO on 维基百科
* Google Webmaster Central
ARIA
====

**ARIA** (*Accessible Rich Internet Applications*) 是向HTML 中添加语义和其他元数据的W3C (en-US) 规范，以满足用户的辅助技术的需要。

例如，你可以将 `role="alert"`添加到`<p>` tag以通知视力有问题的用户该信息是重要的（否则你可能通过文字颜色传达）。

参见
--

* ARIA
解密
==

在密码学（cryptography）领域，**解密**是指把密文（ciphertext）转换成明文（Plaintext）的过程。

解密是一个密码学原语：它通过一种称作cipher的编码技术，把加密信息转换成纯文本。正如加密一样，解密在当代密码学领域也是通过特有的算法，结合称作key的密钥来工作。由于算法通常是公开的，若要保证加密安全，就必须确保密钥高度保密。

![The decryption primitive.](/zh-CN/docs/Glossary/Decryption/decryption.png)

解密是加密的逆过程，如果密钥高度保密，在没有特定密钥的前提下从数学计算的角度来看，解密是很难做到的。这就取决于算法有多坚固，以及密码分析学 (en-US)发展到了什么程度。

参见
--

* 加密与解密
WebGL
=====

**WebGL** (*Web 图形库*) 是一个用于绘制交互式 2D/3D 图形的 JavaScript API ，基于 OpenGL ES 2.0。

Khronos Group 负责 WebGL 的维护。

你可以在 HTML `<canvas>` 元素中调用 WebGL。

目前所有主流 浏览器 都支持 WebGL，即便如此，WebGL 是否可用还是取决于硬件设备等其他因素（比如 GPU 是否支持 WebGL）。

参见
--

* 维基百科上的 WebGL
* 检查你的设备是否支持 WebGL
* MDN 上的 WebGL 参考资料
* WebGL 支持列表
Copyleft（著佐权）
=============

Copyleft 是一个术语，通常指许可证，用于表示此类许可要求所述作品的再分发需遵循与原始许可相同的许可。Copyleft 许可证的示例是 GNU GPL (en-US)（用于软件）和 Creative Commons SA（Share Alike）许可证（用于艺术品）。

参见
--

* 维基百科上的 Copyleft 词条
CSS Object Model (CSSOM)
========================

**CSS 对象模型** **(CSSOM)** 是树形形式的所有 CSS 选择器和每个选择器的相关属性的映射，具有树的根节点，同级，后代，子级和其他关系。CSSOM 与 文档对象模型 (DOM) 非常相似。两者都是**关键渲染路径**的一部分，也是正确渲染一个网站必须采取的一系列步骤。

CSSOM 与 DOM 一起构建**渲染树**，浏览器依次使用渲染树来布局和绘制网页。

### CSSOM API

CSS 对象模型也是一组 API，允许从 JavaScript 操纵 CSS。它非常类似于 DOM，但应用于 CSS 而不是 HTML。它允许用户动态读取和修改 CSS 样式。

查看更多
----

* 填充页面：浏览器如何工作
Engine
======

JavaScript引擎是一个可以解析并执行 JavaScript 程序的解释器

参见
--

* 维基百科上的JavaScript engine
主线程
===

**主线程**用于浏览器处理用户事件和页面绘制等。默认情况下，浏览器在一个线程中运行一个页面中的所有 JavaScript 脚本，以及呈现布局，回流，和垃圾回收。这意味着一个长时间运行的 JavaScript 会阻塞线程，导致页面无法响应，造成不佳的用户体验。

除非故意使用 web worker，比如 service worker，不然 JavaScript 只在线程中运行，所以脚本的运行时，很容易导致事件处理流程或绘制的延迟。主线程中运行的工作越少，就有越多的余地来处理用户事件，页面绘制和对用户保持响应。

参见
--

* 另可参考
    + 异步 JavaScript
    + Web worker API
    + Service worker API
* 词汇表
    + Thread
幂等
==

一个 HTTP 方法是**幂等**的，指的是同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。换句话说就是，幂等方法不应该具有副作用（统计用途除外）。在正确实现的条件下， `GET` ， `HEAD` ， `PUT` 和 `DELETE` 等方法都是**幂等**的，而 `POST` 方法不是。所有的 safe 方法也都是幂等的。

幂等性只与后端服务器的实际状态有关，而每一次请求接收到的状态码不一定相同。例如，第一次调用 `DELETE` 方法有可能返回 `200` ，但是后续的请求可能会返回 `404` 。 `DELETE` 的言外之意是，开发者不应该使用 `DELETE` 法实现具有删除最后条目功能的 RESTful API。

需要注意的是，服务器不一定会确保请求方法的幂等性，有些应用可能会错误地打破幂等性约束。

`GET /pageX HTTP/1.1` 幂等的。连续调用多次，客户端接收到的结果都是一样的：
```

GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
```


`POST /add_row HTTP/1.1` 不是幂等的。如果调用多次，就会增加多行记录：
```

POST /add_row HTTP/1.1
POST /add_row HTTP/1.1   -> Adds a 2nd row
POST /add_row HTTP/1.1   -> Adds a 3rd row
```


`DELETE /idX/delete HTTP/1.1` 是幂等的，即便是不同请求之间接收到的状态码不一样：
```

DELETE /idX/delete HTTP/1.1   -> Returns 200 if idX exists
DELETE /idX/delete HTTP/1.1   -> Returns 404 as it just got deleted
DELETE /idX/delete HTTP/1.1   -> Returns 404
```

参见
--

* 在 HTTP 协议中幂等的定义。
* 常见的幂等方法：`GET`、`HEAD`、`PUT`、`DELETE`、`OPTIONS`、`TRACE`
* 常见的非幂等方法：`POST`、`PATCH`、`CONNECT`
BiDi
====

**BiDi** (BiDirectional) 是指一篇文档中同时包含了从左至右和从右至左阅读的文本。即使在同一段落中同时出现这两种类型，也必须保证每种语言文本都以正确的方式呈现。

参见
--

* 维基百科的Bi-directional text
Element（元素）
===========

**元素**是网页的一部分，在 XML 和 HTML 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。

 ![Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.](/zh-CN/docs/Glossary/Element/anatomy-of-an-html-element.png)

元素和标签不是同一种概念。源代码中的标签用来标识元素的开始或结束，而元素是文档对象模型（DOM）中的一部分，文档对象模型会被浏览器渲染、展示为页面。

相关信息
----

* 开始学习 HTML
* 自定义元素（Custom element）
* `Element` 接口，在 DOM 中表示一个元素
滚动容器
====

**滚动容器**为一种元素盒。无论滚动条是否存在，滚动容器中的内容均可滚动。当 CSS 属性 `overflow` 设置为 `scroll`，或者 `overflow` 设置为 `auto` *且*内容溢出滚动容器时，用户代理将为元素盒添加滚动条，使其成为滚动容器。

当元素盒的内容溢出其包围盒时，用户可使用滚动条滚动经过被裁减的内容，而这些内容本将在视野中被隐藏。

滚动容器含有滚动口和滚动条。

滚动口
---

滚动口为滚动容器的可见部分，与滚动容器的内边距盒重合。滚动条用于将内容移入或移出滚动口，由此使内容可见。
Object
======

对象 指包含数据和用于处理数据的指令的数据结构。对象有时也指现实世界中的一些事，例如在赛车游戏当中一辆车或者一幅地图都可以是一个对象。JavaScript, Java, C++, Python, 还有 Ruby 这些例子都是面向对象的程序设计 语言。

参见
--

* `Object` in the JavaScript reference
* Object data structures in JavaScript
质询—响应认证
=======

在安全协议中，*质询*（challenge）是服务器将某些数据发送到客户端，以便每次生成不同的响应。质询—响应认证协议是防御重放攻击的一种方法。在重放攻击中，攻击者侦听先前的消息，并在以后的时间重新发送它们，以获取与原始消息相同的凭据。

HTTP 认证协议是基于质询—响应认证协议的，尽管“Basic”协议未使用实际的质询（realm 始终相同）。

参见
--

* 维基百科上的质询—响应认证词条。
Node.js
=======

Node.js 是一个跨平台 JavaScript 运行环境，使开发者可以搭建服务器端的 JavaScript 应用程序。

参见
--

* Node.js 的维基
* Node.js 官网
* API 参考文档
* 教程
* npm 文档
Continuous Media
================

CSS 可以被使用在多种不同的上下文环境（包括打印页面和一些 CSS 容器），尤其是被用来设置根据所处的上下文的不同而具有不同的布局行为。

因此，连续媒体（Continuous Media）用来定义那些内容没有间断的上下文环境，即其流动性是连续的。屏幕上显示的网页内容就是连续媒体，语音内容也是如此。
Preflight request
=================

一个 CORS 预检请求是用于检查服务器是否支持 CORS 即跨域资源共享。

它一般是用了以下几个 HTTP 请求首部的 `OPTIONS` 请求：`Access-Control-Request-Method` 和 `Access-Control-Request-Headers`，以及一个 `Origin` 首部。

当有必要的时候，浏览器会自动发出一个预检请求；所以在正常情况下，前端开发者不需要自己去发这样的请求。

举个例子，一个客户端可能会在实际发送一个 `DELETE` 请求之前，先向服务器发起一个预检请求，用于询问是否可以向服务器发起一个 `DELETE` 请求：
```

OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org
```


如果服务器允许，那么服务器就会响应这个预检请求。并且其响应首部 `Access-Control-Allow-Methods` 会将 `DELETE` 包含在其中：
```

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
```

参见
--

* CORS
* `OPTIONS`
undefined
=========

一个声明未定义的变量的初始值，或没有实际参数的形式参数。

示例
--


```js
let x; //创建一个变量，但并没有赋值

console.log("X 的值是", x); //返回 X 的值是 undefined
```

参见
--

* Undefined value on Wikipedia
* JavaScript data types and data structures
Tag
===

在 HTML 中，tag 用来创建一个 element。HTML 元素的**名称**是在尖括号中使用的名称，例如 <p> 用于段落（paragraph）。注意，结束标记的名称前面有一个斜杠字符"</p>"。在空元素中，结束标记既不需要也不允许。在任何情况下，如果没有提及 attributes ，那么将使用默认值。

参见
--

* 维基百科上的 HTML 元素
* 在 WHATWG 的 HTML 元素语法
* HTML 简介
MathML
======

**MathML**（XML 的应用之一）是一种在网页中表示数学表达式的开放标准。在 1998 年 W3C 首次推荐使用 MathML 以在浏览器中表示数学表达式。MathML 的其他应用包括科学内容和语音合成。

参见
--

* 维基百科上的 MathML
* MathML
* 编写 MathML
* 什么是 MathML
Expando
=======

可扩展对象的动态属性 (Expando properties) 是JavaScript 添加到DOM 节点的属性 , 可以直接从 DOM 元素中访问。这些属性不是对象 的 DOM 规范的一部分：


```js
window.document.foo = 5; // foo 是一个自定义属性
```


该术语也可以应用于添加到对象的属性，而不遵守对象的原始意图，例如非数字命名的属性添加到一个数组里。

**注：**
 expando 可能是 expandable object 的缩写，表示可扩展的对象。expando property 表示可扩展对象的动态属性，可以在运行时动态添加到对象中的属性。
 “JavaScript 中的所有对象均支持 expando 属性和方法，这些属性和方法可在运行时动态添加和移除。”（来源：MSDN）

### 例子：二维数组的创建


```js
var n = 5;
var i, j;

var arr = new Array(n); //创建第一维的数组
for (i = 0; i < n; i++) {
  arr[i] = new Array(n);
  for (
    j = 0;
    j < n;
    j++ // 内循环创建第二维数组
  ) {
    arr[i][j] = i \* j; // 数组赋值
  }
}
console.log(arr);
```
Python
======

**Python** 是一个高级通用编程语言。它使用多范式方法。这意味着它支持程序化、面向对象和一些功能性编程结构。

它是由 *Guido van Rossum* 创建的，作为 1985 年至 1990 年间的另一种语言（称为 ABC）的继任者。目前 Python 被用于大量的领域，如 Web 开发，作为其他应用程序的脚本语言和构建实际应用程序。

Python 是根据 OSI 批准的开源许可证开发的，使其免费使用和分发，即使是商业用途也是如此。Python 的许可证是由 Python 软件基金会 管理的。

参见
--

* 在维基百科上的 Python
* python 的入门教程
Gzip 压缩
=======

Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法，可将文件（译者注：快速地、流式地）压缩地更小，从而实现更快的网络传输。Web 服务器与现代浏览器普遍地支持 Gzip，这意味着服务器可以在发送文件之前自动使用 Gzip 压缩文件，而浏览器可以在接收文件时自行解压缩文件。

参见
--

* 如何启用 GZip 压缩
* Gzip on Wikipedia
* 中文维基百科上的 Gzip
WHATWG
======

WHATWG（*Web Hypertext Application Technology Working Group*Web 超文本应用程序技术工作组）是一个负责维护与开发 Web 标准的社区，他们的工作成果包括 DOM、Fetch API，和 HTML。一些来自 Apple、Mozilla，和 Opera 的员工在 2004 年建立了 WHATWG。

参见
--

* Wikipedia 上的 WHATWG
* WHATWG 的网站
数据库
===

**数据库**是一种用于收集已组织好的数据以便于搜索、结构化和扩充的存储系统。

网站开发中，大多数数据库采用关系型数据库管理系统 (RDBMS) 来组织数据，通过 SQL语言来编程。但有些数据库没有遵循上述的组织数据的机制，这类被称作 NoSQL 数据库。

被广泛使用的服务端关系型数据库有 *MySQL*（或者源于它的 *MariaDB*）、*SQL Server* 和 *Oracle Database* 等。另一边，出名的 NoSQL 数据库有 *MongoDB*、*Cassandra* 和 *Redis* 等。

浏览器也有他们特有的数据库系统，被称作 IndexedDB。

参见
--

* 维基百科上的词条 Database
    + IndexedDB
    + SQL
Recursion（递归）
=============

一种函数调用自身的操作。递归被用于处理包含有更小的子问题的一类问题。一个递归函数可以接受两个输入参数：一个最终状态（终止递归）或一个递归状态（继续递归）。

参见
--

* Wikipedia 页面：Recursion (computer science)
* 更多关于 JavaScript 中递归的细节
Boolean
=======

在计算机科学中，**布尔值**是一种取值仅能为 *真* 或 *假* 的数据类型，它赋予了编程语言在逻辑上表达*真* 或 *假* 的能力。如果没有这种能力，很多功能将无法被实现。举个例子，JavaScript 中的 *if 语句* 需要一些判断条件来决定接下来的代码会否被执行，而这些条件，本质上会被解释成一个布尔值。又如 JavaScript 中的 *for 循环*，如果没有一个能够解释成布尔值的判断条件，循环将无法知道自己什么时候该结束。

***JavaScript if 语句***


```js
if(boolean conditional) {
  //代码
}

if(true) {
  console.log("布尔值判断条件被解释为 真");
} else {
  console.log("布尔值判断条件被解释为 假");
}
```


***JavaScript for 循环***


```js
for(control variable; boolean conditional; counter) {
  //代码
}

for(var i=0; i<4; i++) {
  console.log("只有当布尔值判断条件为 真 的时候才，这段文字才会被打印");
}
```

参见
--

* 维基百科上的布尔值 Boolean
数据结构
====

**数据结构** 是让数据更好地被使用的一种数据组织方式。

参见
--

* 维基百科上的 Data structure
弹性容器
====

在父元素的 `display` 属性上使用 `flex` 或 `inline-flex` 值可定义弹性盒布局。此元素由此变为**弹性容器**（flex container），其任意子元素变为弹性元素（flex item）。

`flex` 值导致元素变为块级弹性容器，而 `inline-flex` 为行级弹性容器。这些值为元素创建了与区块格式化上下文相似的**弹性格式化上下文**（flex formatting context），浮动体将不会侵入容器，且容器的外边距将不会与元素的外边距发生折叠。

参见
--

### 属性参考

* `align-content`
* `align-items`
* `flex`
* `flex-direction`
* `flex-flow`
* `flex-wrap`
* `justify-content`
### 拓展阅读

* CSS 弹性盒指南：*弹性盒的基本概念*
* CSS 弹性盒指南：*在弹性容器中对齐元素*
* CSS 弹性盒指南：*掌握弹性元素的折行*
DOM
===

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。

DOM 是万维网上使用最为广泛的 API 之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

DOM 并不是天生就被规范好了的，它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在，WHATWG 维护 DOM 现存标准。

参见
--

* The Document Object Model 在维基百科上的解释
* MDN DOM 文档
* W3C 上的多种 DOM 规范
CSS 像素
======

术语 **CSS 像素**与 CSS 绝对长度单位 *px* 同义——标准定义为 1 CSS 英寸（*in*）的 1/96。

参见
--

* MDN Hacks Blog 上的 CSS 长度解释
PHP
===

PHP（PHP: Hypertext Preprocessor 的递归缩写）是一个开源服务器端脚本语言，可嵌入在 HTML 中，以构建网络应用程序和动态网站。

示例
--

### 基本语法


```php
// PHP 代码的开始
<?php
 // 在这里写 PHP 代码
?>
// PHP 代码的结束
```

### 在屏幕上打印数据


```php
<?php
 echo "Hello World!";
?>
```

### PHP 变量


```php
<?php
 // 变量
 $nome='Danilo';
 $sobrenome='Santos';
 $pais='Brasil';
 $email='danilocarsan@gmail.com';

 // 打印变量
 echo $nome;
 echo $sobrenome;
 echo $pais;
 echo $email;
?>
```

参见
--

* 官方网站
* 维基百科上的 PHP
* 维基教科书上的 PHP
* MDN Web 文档术语表
    + Java
    + JavaScript
    + Python
    + Ruby (en-US)
第一字节时间
======

**第一字节时间**（TTFB）是指从浏览器请求页面到从浏览器接收来自服务器发送的信息的第一个字节的时间。这一次包括 DNS 查找和使用（三次）TCP握手和SSL握手建立连接（如果请求是通过https发出的）。

TTFB 是从请求开始到响应开始之间所用的时间，以毫秒为单位：
```

TTFB = responseStart - requestStart
```

See Also
--------

* A typical HTTP session
* PerformanceResourceTiming
* PerformanceTiming
Null
====

在计算机学科，**`null`** 值一直是一个被讨论点，通常来说，表示一个不存在或者无效object或者地址引用。语言实现中空引用的含义各不相同。

在 JavaScript，null 是原始值之一

参见
--

* JavaScript 数据类型和数据结构
* JavaScript 全局对象：`null`
* 维基百科空指针
* **MDN 术语表**
    + JavaScript
    + string
    + number
    + bigint
    + boolean
    + null
    + undefined
    + `Symbol`
MIME type
=========

**MIME type** （现在称为“媒体类型 (media type)”，但有时也是“内容类型 (content type)”）是指示文件类型的字符串，与文件一起发送（例如，一个声音文件可能被标记为 `audio/ogg` ，一个图像文件可能是 `image/png` ）。它与传统 Windows 上的文件扩展名有相同目的。

参见
--

* Internet media type on Wikipedia
* MIME types 列表
* 正确配置服务器 MIME Types
* 有关在 Web 环境中使用 MIME Types 的详细信息。
Internet
========

互联网是由全世界众多网络连接而成的网络，使用了互联网协议族（也根据它两个最重要的 协议 称之为 TCP/IP）。

参见
--

* 互联网是如何工作的（给初学者的介绍）
Scope（作用域）
==========

**作用域**是当前的执行上下文，值和表达式在其中“可见”或可被访问。如果一个变量或表达式不在当前的作用域中，那么它是不可用的。作用域也可以堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。

JavaScript 的作用域分以下三种：

* 全局作用域：脚本模式运行所有代码的默认作用域
* 模块作用域：模块模式中运行代码的作用域
* 函数作用域：由函数创建的作用域

此外，用 `let` 或 `const` 声明的变量属于额外的作用域：

* 块级作用域：用一对花括号（一个代码块）创建出来的作用域

由于函数会创建作用域，因而在函数中定义的变量无法从该函数外部访问，也无法从其他函数内部访问，例如，下面的代码是无效的：


```js
function exampleFunction() {
  const x = "declared inside function"; // x 只能在 exampleFunction 函数中使用
  console.log("Inside function");
  console.log(x);
}

console.log(x); // 报错
```


但是，下面的代码是有效的，因为变量在函数外被声明，为全局变量：


```js
const x = "declared outside function";

exampleFunction();

function exampleFunction() {
  console.log("Inside function");
  console.log(x);
}

console.log("Outside function");
console.log(x);
```


块级作用域只对 `let` 和 `const` 声明有效，对 `var` 声明无效。


```js
{
  var x = 1;
}
console.log(x); // 1
```



```js
{
  const x = 1;
}
console.log(x); // ReferenceError: x is not defined
```

参见
--

* 维基百科词条：作用域
Chrome
======

在浏览器中，chrome 指除了网页本身以外任何可视的部分（例如：UI、工具栏、菜单栏、标签）。不要将这个概念与 Google Chrome 浏览器混淆。

参见
--

* 浏览器和 GUI Chrome
Gecko
=====

**Gecko** 是 Mozilla 项目开发的布局引擎，在许多应用程序/设备中使用，包括Firefox 和 Firefox OS (en-US)。

Web 浏览器 需要一个被称为布局引擎的软件来解释 HTML, CSS, JavaScript和嵌入式内容（如：图片），并将所有内容绘制到屏幕上。除此之外，Gecko 确保相关的 APIs 在 Gecko 支持的每一个操作系统上都能很好的工作，并且适当的 API 只暴露给相关的支持目标。这意味着 Gecko 包括网络栈、图形栈、布局引擎、Javascript 虚拟机和移植层等。

由于所有的 Firefox OS 应用都是 Web 应用程序，所以 Firefox OS 会使用 Gecko 当其应用处于运行时。

参见
--

* Gecko on Wikipedia
Safe（安全）
========

**安全**一词根据上下文的不同会具有不同的含义。它可以指：

安全（HTTP 方法）
如果说一个 HTTP 方法是`安全`的，是指这是个不会修改服务器的数据的方法。也就是说，这是一个对服务器只读操作的方法。这些方法是安全的：`GET`，`HEAD` 和 `OPTIONS`。所有安全的方法都是idempotent的，但并非所有幂等方法都是安全的，例如，`PUT` 和 `DELETE` 都是幂等的，但不是安全的。
JSON
====

*JavaScript Object Notation* (**JSON**) 是一种数据交换格式。尽管不是严格意义上的子集，JSON 非常接近 JavaScript 语法的子集。

许多编程语言都支持 JSON，尤其是 JavaScript，它在网站和浏览器扩展应用广泛。

JSON 可以表示数字、布尔值、字符串、`null`、数组（有序序列），以及由这些值组成的对象（字符串与值的映射）。JSON 不支持复杂的数据类型（函数、正则表达式、日期等）。日期对象默认会转化为 ISO 格式的字符串，因此信息不会完全丢失。

如果你需要使用 JSON 来表示复杂的数据类型，请在它们转化为字符串值。

与 XML 非常相似，JSON 能存储 CSV 格式，同时保留它的分级信息。有许多工具能帮助你进行格式转换（例如 JSON to CSV Converter 或JSON to CSV Converter）。

参见
--

* JSON（维基百科）
* JSON（MDN）
Arpanet
=======

**ARPAnet** （高级研究计划署网络）是早期的一个计算机网络，于 1969 年建立，作为一个传送敏感军事数据和连接全美领先研究组的稳健媒介。ARPAnet 原先运行于 NCP（网络控制协议）之上，后来运行于第一个版本的互联网协议或 TCP/IP 协议族，使 ARPAnet 成为初期 互联网 中显著的一部分。ARPAnet 于 1990 年初关闭。

参见
--

* 维基百科上的 Arpanet
CSS 预处理器
========

**CSS 预处理器**是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多 CSS 预处理器可供选择，且绝大多数 CSS 预处理器会增加一些原生 CSS 不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让 CSS 的结构更加具有可读性且易于维护。

要使用 CSS 预处理器，你必须在 web 服务中服务器安装 CSS 编译工具。

参见
--

这里是一些最流行的 CSS 预处理器：

* Sass
* LESS
* Stylus
* PostCSS
简单头部
====

以下的 HTTP headers都可以被认为是简单头部：

* `Accept`,
* `Accept-Language`,
* `Content-Language`,
* `Content-Type`并且值是 `application/x-www-form-urlencoded`, `multipart/form-data`, 或者 `text/plain之一的（忽略参数）`.

或者以下客户端头部之一的也可以被认为是简单头部：

* `DPR`
* `Downlink` (en-US)
* `Save-Data`
* `Viewport-Width` (en-US)
* `Width` (en-US)

当只包含简单头部时，一个请求则被视为简单请求并且在CORS中不需要发送preflight request。

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

* HTTP 头部
* Simple response header
* Forbidden header name
* Request header
域名分片 (Domain sharding)
======================

由于浏览器限制了每个域（domain）的活动连接数。为了可以同时下载超过该限制数的资源，**域名分片**（**domain sharding**）会将内容拆分到多个子域中。当使用多个域来处理多个资源时，浏览器能够同时下载更多资源，从而缩短了页面加载时间并改善了用户体验。

就性能而言，域名分片的问题在于每个域都需要额外的 DNS 查找成本以及建立每个 TCP 连接的开销。

来自 HTTP 请求的初始响应通常是 HTML 文件，其中列出了其他资源，例如 JavaScript，CSS，图像和其他需要下载的媒体文件。由于浏览器限制每个域的活动连接数，因此从一个域提供所有必需的资源可能会变慢，因为需要按顺序下载资源。使用域名分片后，所需的下载可以来自多个域，从而使浏览器可以同时下载所需的资源。但是，由于 DNS 查找会减慢初始加载时间，因此多个域是一种反模式。

由于 HTTP/2 没有限制并发请求（unlimited concurrent requests），因此启用 HTTP/2 后，就没必要再使用域名分片来解决并发限制了。

See Also
--------

* Transport Layer Security (TLS)
* DNS
* HTTP/2
中间人攻击（MitM）
===========

中间人攻击（**Man-in-the-middle attack**，MitM）会在消息发出方和接收方之间拦截双方通讯。举例来说，Wi-Fi 路由器就可以被破解用来进行中间人攻击。

用日常生活中的写信来类比的话：你给朋友写了一封信，邮递员可以把每一份你寄出去的信都拆开看，甚至把信的内容改掉，然后重新封起来，再寄出去给你的朋友。朋友收到信之后给你回信，邮递员又可以拆开看，看完随便改，改完封好再送到你手上。你全程都不知道自己寄出去的信和收到的信都经过邮递员这个“中间人”转手和处理——换句话说，对于你和你朋友来讲，邮递员这个“中间人”角色是不可见的。

对于实际生活中的信件沟通和线上的信息交流来说，中间人攻击都是很难防范的，这里有一些小建议：

* 不要忽视浏览器弹出的证书警告！你可能访问的是钓鱼网站或者假冒的服务器；
* 公共网络环境下（例如公共 WiFi），没有 HTTPS 加密的敏感网站不要随便登录，一般不可信；
* 在任何网站上登录自己的账号前确保网址为 HTTPS 加密协议；
参见
--

* OWASP 文章：Man-in-the-middle attack
* PortSwigger：最新的中间人攻击新闻
* 维基百科：中间人攻击
Graceful degradation（优雅降级）
==========================

**优雅降级**（Graceful degradation）是一种设计理念，其核心是尝试构建可在最新浏览器中运行的现代网站/应用程序，而作为降级体验，在低版本浏览器中仍然提供必要的内容和功能。

Polyfill可用于使用 JavaScript 构建缺少的功能，但应尽可能提供样式和布局等功能的可接受替代方案，例如使用 CSS 级联或 HTML 回退行为。在处理常见的 HTML 和 CSS 问题中可以找到一些很好的例子。

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

参见
--

* 维基百科的优雅降级
* 处理常见的 HTML 和 CSS 问题
* 实现特性检测
* MDN Web 文档词汇表
    + Graceful degradation
    + Polyfill
    + 渐进增强
空白字符
====

**空白字符**（whitespace）指用于在其他字符之间提供水平或垂直空间的字符。在 HTML、CSS、JavaScript 和其他计算机语言中，空白通常用于分隔标记符。

空白字符及其用法因语言而异。

在 HTML 中
--------

Infra 动态标准将五个字符定义为“ASCII 空白字符”：U+0009 TAB、U+000A LF、U+000C FF、U+000D CR 和 U+0020 SPACE。

在 JavaScript 中
--------------

ECMAScript 语言规范将这几个 Unicode 码点定义为“空白字符”：U+0009 CHARCHTER TABULATION（<TAB>）、U+000B LINE TABULATION（<VT>）、U+000C FORM FEED（<FF>）、U+0020 SPACE（<SP>）、U+00A0 NO-BREAK SPACE（<NBSP>）、U+FEFF ZERO WIDTH NO-BREAK SPACE（<ZWNBSP>），以及任何其他 Unicode“Space\_Separator”码位（<USP>）。

参见
--

* 维基百科的空白字符词条
* HTML、CSS、DOM 中如何处理空白字符
* `white-space`
* 规范
    + ASCII 空白字符规范
    + ECMAScript 语言规范
* 术语表
    1. 字符
Latency
=======

**延迟**是请求的资源到达其目的地所花费的网络时间。低延迟是好的，这意味着几乎没有延迟。高延迟是不好的，这意味着所请求的资源要花很长时间才能到达目的地。

延迟可能是任何类型的数据流中的一个因素，但是最常见的讨论方式是网络延迟（数据包从源传输到目标所花费的时间）和媒体编解码器延迟（传输数据包所需的时间）。源数据进行编码或解码，并到达结果数据的使用者）。

更多
--

* 理解延迟
Quality values
==============

**质量价值**（Quality values）亦称作 q 值，其与 q 因子以逗号分隔的方式来描述值的优先级顺序，是 HTTP 消息头以及 HTML 中的特殊语法。值的重要性以一种后缀表示：`';q='`。该后缀紧接`0`到`1`间的值 (值可达小数点后三位)，最高值表明最高优先级。无此后缀时，默认值为`1`。

示例
--

以下语法
```

text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
```


表明优先级先后顺序：

| Value 值 | Priority 优先级 |
| --- | --- |
| `text/html` and `application/xhtml+xml` | `1.0` |
| `application/xml` | `0.9` |
| `*/*` | `0.8` |

如果前面这两个值未定义优先级，值的顺序并不重要。然而，q 值相同时，值越具体，其优先级越高。
```

text/html;q=0.8,text/*;q=0.8,*/*;q=0.8
```


| Value 值 | Priority 优先级 |
| --- | --- |
| `text/html` | `0.8` (but totally specified) |
| `text/*` | `0.8` (partially specified) |
| `*/*` | `0.8` (not specified) |

像 Accept 消息头的语法可以有额外的标记，比如`text/html;level=1`。这使值更具体，不过该用法不常见。

浏览器信息
-----

### 火狐

从 Firefox 18 开始，质量因子的值可达小数点后二位（之前的版本只能达小数点后一位）。（Firefox bug 672448）

更多
--

* 使用 q 值的 HTTP 消息头：`Accept`、`Accept-Charset`、`Accept-Language`、`Accept-Encoding`和`TE`。
编译
==

编译是将相同的程序从一种计算机程序语言转换到另一种语言计算机语言的过程。编译器是运行上述任务的软件。有时候，任务也被称为“汇编”或“构建”，这通常表示不仅仅编译完成，例如，用二进制格式进行打包。

通常，编译器转换一个人类理解的高级语言例如 c 或者 java 到机器语言，例如 cpu 理解的汇编语言。一些编译器转化同级别语言的被称为转换器或者交叉编译器，例如从 TypeScript 到 JavaScript 的编译。这些通常被理解为效率工具。

绝大多数编译器以预先编译（AOT）或实时编译（JIT）形式工作。作为一个开发者，你通常使用命令行或者集成开发环境（IDE）调用预先编译（AOT）的编译器。最出名的就是 gcc 编译器了。

实时编译器通常是用来提高性能的，令你没有感知的。例如在浏览器中，Firefox 的 SpiderMonkey 的 JavaScript 引擎又一个内置的实时编译器会在你浏览时将网页中的 JavaScript 代码编译为机器码，从而提供运行效率。类似 WebAssembly 的项目正在使这些工作做的更好。

参见
--

* Compiling from C/C++ to WebAssembly
* Compiling from Rust to WebAssembly
* Compiler on Wikipedia
Flex Item
=========

Flex Container(弹性容器) 的一级子元素 (设置`display: flex` 或 `display: inline-flex`的子元素) 将成为弹性元素。

弹性容器内的连续文本，也将成为弹性元素。

参见
--

### 属性参考

* `align-self`
* `flex-basis`
* `flex-grow`
* `flex-shrink`
* `order`
### 延伸阅读

* CSS 弹性布局指南：*Basic Concepts of Flexbox*
* CSS 弹性布局指南：*Ordering flex items*
* CSS 弹性布局指南：*Controlling Ratios of flex items along the main axis*