recursal/MDN huggingface dataset:
Brotli
======

**Brotli** 是一种通用的无损压缩算法。

它结合使用 LZ77 算法的一个现代变体、霍夫曼编码编码和二阶上下文建模来压缩数据，提供与目前可用的最佳通用压缩算法相当的压缩率。Brotli 提供比 gzip 更好（小）的压缩率，并具有与 deflate 相当的压缩速度。但 brotli 压缩速度比 Gzip 压缩慢，因此 gzip 可能更适合于压缩不可缓存的内容。

Brotli 与大多数现代浏览器兼容，但同时仍需考虑回落机制。

参见
--

* brotli.org
* Brotli 的 Github 仓库
* 维基百科上的 Brotli
* Brotli on Caniuse
Argument
========

**argument** 是一个作为函数输入的值（原始数据或对象）。

参见
--

* Parameter 和 Argument 之间的差异 - 维基百科
* JavaScript 中的 `arguments` 对象
请求标头（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 方法）
===========

如果说一个 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）
=======

网页上的区块（block）指的是出现在新行上的 HTML 元素，即在横向书写模式中位于上一个元素之下，下一个元素之上（通常称为块级元素）。例如 HTML 中的 `<p>` 元素默认为块级元素，而 `<a>` 元素为*行级元素*——你可以在 HTML 源码中将多个锚点紧靠在一起，而在渲染输出中这些锚点将在同一行内显示。

使用 `display` 属性可以将元素改为在行内显示或者显示为区块（还有许多其他选项）；**区块**也受到定位方案和使用 `position` 属性的影响。

参见
--

* 视觉格式化模型
Block (块作用域)
============

在 JavaScript中，函数块是指被大括号 ("{}") 包裹住的相关联的statements的集合。例如，你可以在 `if (condition)`后声明一段函数块形式的代码，表明当条件判断为真时，解释程序应该运行上述函数块里的代码，或者当条件判断为假时跳过执行上述函数块里的代码。

参见
--

* JavaScript 函数块声明
签名（安全）
======

**签名**或*数字签名*是 协议，表明消息是真实的。

从给定消息的hash，**签名过程**首先使用实体的私有key生成链接到签名实体的数字签名。

收到消息后的**验证过程**

* *验证发件人* *-* 使用发件人的公钥来解码签名并恢复只能用发件人的私钥创建的哈希
* *检查消息完整性 -* 将哈希与接收到的文档中新计算的哈希进行比较（如果文档被篡改，两个哈希将不同）

如果私钥被泄密或收件人被欺骗地给出错误的公钥，系统就会失败。

参见
--

* Digital signature on Wikipedia
* See digest, encryption
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）
=======

**CSS 属性**是一种特征（如颜色），其相关值定义了浏览器应如何显示该元素的一个方面。

以下是 CSS 规则的示例：


```css
/\* “div”选择器意味着文档中所有 div 元素会以该规则进行样式化 \*/
div {
  /\* 值为“black”的“color”属性值意味着文字会是黑色的 \*/
  color: black;

  /\* 值为“white”的“background-color”属性值意味着元素的背景颜色会是白色的 \*/
  background-color: white;
}
```

参见
--

* CSS 学习
* MDN 上的 CSS 参考
* CSS 工作组目前的工作
属性（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）
=======

在 DOM 的上下文中，节点（Node）是节点树中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

参见
--

* WHATWG 规范 node tree
* Node 对象
节点（网络）
======

在网络中，**节点**是网络中的一个连接点。在物理网络中，节点通常是一个设备，如计算机或路由器。

参见
--

* 维基百科上的节点
基线（排版）
======

**基线**（baseline）是指欧洲和西亚文字排版中，用于在上面放置字符的一条假想的基准线。

参见
--

* 维基百科上的基线词条
* MDN 上的 CSS 盒子对齐文档
基线（兼容性）
=======

**基线**（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 性能
======

构建一个网站需要 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
==========

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 开发的新手，我们鼓励你从小事做起。你不可能立马再建一个 Facebook，但做一个自己的简单网站并不难，我们将由此开始。

通过阅读下面列出的文章，你将从零开始获得你的第一个在线网页。让我们开始吧！

安装基本软件

说到建设网站的工具，有很多可供选择的。如果你初入门径，你可能会被外面的一系列代码编辑器、框架和测试工具所迷惑。在这篇文章中，我们将逐步向你展示如何安装你需要的软件，以开始基本的 web 开发。

你的网站会是什么样子？

在你开始为你的网站写代码之前，你应该先计划一下。需要展示什么信息？使用什么字体和颜色？我们概述了一个简单的方法，你可以按照这个方法来规划网站的内容和设计。

文件处理

一个网站由许多文件组成：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要将这些文件组合成一个合理的结构，并确保它们能够相互交流。这篇文章解释了如何为你的网站建立一个合理的文件结构以及你应该注意的问题。

HTML 基础知识

超文本标记语言（HTML）是你用来组织你的网络内容，并赋予它意义和目的的代码。例如，我的内容是一组段落还是一个要点列表？我的页面上是否插入了图片？我有一个数据表吗？在你的接受能力之内，这篇文章提供了足够的信息，使你熟悉 HTML。

CSS 基础知识

层叠样式表（CSS）是你用来为你的网站设置样式的代码。例如，你希望文本是黑色还是红色？内容应该画在屏幕的什么地方？应该用什么背景图片和颜色来装饰你的网站？在这篇文章中，我们将带你了解你所需要的东西，以便开始使用。

JavaScript 基础知识

JavaScript 是一种编程语言，你用它来给你的网站添加交互功能。例如游戏、当按钮被按下或数据被输入表格时发生的事情、动态造型效果、动画等。这篇文章将让你了解这种令人兴奋的语言的潜力，以及如何开始使用。

发布你的网站

一旦你完成了编写代码并组织构成你的网站的文件时，你需要把它们全部放在网上，以便人们能够找到它。这篇文章描述了如何以最简便的方式将你的简单示例上线至网络。

万维网是如何工作的

当你访问你最喜欢的网站时，你可能不知道正有很多复杂的事情在后台发生。这篇文章概述了当你在电脑上浏览网页时发生的事情。

参见
--

* web 解密: 一系列解释 web 基础原理的精彩视频，针对 web 开发的完全初学者。由 Jérémie Patonnier 创建。
* web 及 web 标准: 这篇文章提供了一些关于 web 的背景故事——它是如何诞生的，什么是 web 标准，它们是如何一起工作的，为什么“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 的核心技术（如 HTML,CSS 和 Javascript）进行编程，并且开始获得更多的体验，读更多的资料，学习更多的提示和技巧，你就会遇到各种工具，从优化的 CSS 和 Javascript 到测试和自动化应用，再到其他更多的领域。当你的 web 项目变得更大更复杂，如果你希望利用一些工具为你的代码做出可靠的测试计划。本节教程旨在帮助你开始并做出明智的选择。

web 行业是个让人兴奋的地方，但它也有并发症。现在我们用来构建网站的核心技术是相当稳定的，但是新的特性一直不断地加进来，还有建立在这些技术之上的能够方便我们工作的新的工具，都在不断出现。在此之前，我们仍然需要保持前台的跨浏览器支持，并且保证我们的代码遵循最佳实践以允许我们的项目可以工作在不同的浏览器和设备上，让我们的用户能够正常浏览我们的网页，还要保证对残障人士可用。

找出你应该用什么样的工具是个困难的过程，所以我们这系列文章来告诉你哪些工具是可用的，它们能为你做什么，和如何利用行业的热门工具。

**备注：** 因为一直以来都是新的工具出现伴随着旧的工具过时，所以我们有意将材料写得尽可能地中立—我们想优先关注那些能够帮你完成通用类型任务的工具，而不是一些特殊工具。我们显然需要展示某些工具的用途来演示特殊的技术，但是要清楚我们并不是把它们作为最好的或者唯一的工具进行推荐—大多数情况下有很多其他的方式可以备选，我们只是想提供给你一个清晰的可用的方法。

学习途径
----

尝试详细地使用这些工具之前，你首先应该学习 HTML, CSS，和 JavaScript 的基础知识。比如，在你开始调试复杂 web 代码之前，你需要知道这些语言的基础知识，或者能有效地使用 Javascript 库，或者能够使用测试工具为你的代码编写和运行测试等等。

首先你需要一个扎实的基础。

模块
--

真实世界 web 开发工具 (TBD)

在这个模块中，我们探索各种可用的 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)
常见问题
====

学习区域的这一部分旨在为可能出现的常见问题提供答案，这些问题不一定是结构化的核心学习途径的一部分（例如：HTML 或 CSS 的学习文章），这些文章专注于它们自己的内容。

* 使用 HTML 解决常见问题
* 使用 CSS 解决常见问题
* 使用 JavaScript 解决常见问题
* Web 机制
* 工具和安装
* 设计与无障碍
Web 表单指南
========

这个模块提供了一系列帮助你掌握 web 表单的文章。web 表单是与用户交互的强大工具，它们经常用于收集用户的数据，或允许他们控制用户界面。然而，由于历史和技术上的原因，如何充分发挥它们的潜力并不总是显而易见的。在下方列出的文章中，我们将介绍 Web 表单的各个方面：HTML 结构、样式、验证表单数据，以及提交数据到服务器。

#### 想成为一名前端网页开发者？

我们整理了一个课程，其中包含你实现目标所需的所有基本内容。

**开始使用**

前提
--

在开始这个模块之前，你至少应该熟悉对 HTML 的介绍系列。此时此刻，你应该会发现基本指南很容易理解，并且能够使用我们的原生表单控件指南。

然而，掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些特定的技术来设置表单控件的样式，并且需要一些编码知识来处理诸如验证和创建自定义表单控件之类的事情。因此，在你查看下面列出的其他部分之前，我们建议你先离开，并学习一些 CSS 和 JavaScript。

以上内容明确地说明了为什么我们将 web 表单独立放在一个模块中，而不是将其与 HTML、CSS 和 JavaScript 这些模块放在一起——表单元素比绝大多数其他的 HTML 元素都要复杂，并且它们还需要与相关的 CSS 和 JavaScript 技术紧密集合才能充分利用它们。

**备注：** 如果你正在使用一个无法创建自己的文件的计算机、平板电脑或其他设备，那么你可以尝试（大多数）在线编码程序中的代码示例，例如 JSBin 或 Glitch。

基本指南
----

你的第一个表单

本系列的第一篇文章提供了第一次创建 HTML 表单的经验，包括设计一个简单表单、使用正确的 HTML 元素实现它、通过 CSS 添加一些非常简单的样式，以及如何将数据发送到服务器。

如何构造 HTML 表单

有了基础知识，我们现在更详细地了解了用于为表单的不同部分提供结构和意义的元素。

不同的表单控件
-------

原生表单控件

我们从详细了解原始 HTML `<input>` 元素的类型开始，同时学习在收集不同类型数据时可用的选择。

HTML5 input 的类型

在这里，我们深入挖掘 `<input>` 元素，了解 HTML5 发布时提供的其他 input 类型，以及它们提供的各种 UI 弓箭和数据收集增强功能。此外，我们可以了解 `<output>` 元素。

其他表单控件

接下来，我们学习所有非 `<input>` 表单控件，以及相关的工具，如：`<select>`、`<textarea>`、`<meter>` 和 `<progress>`。

表单样式指南
------

HTML 表单样式

本文介绍了如何使用 CSS 为表单赋予样式，包括可能需要了解的基本样式任务的所有基础知识。

高级表单样式

在这里，我们将看到一些更高级的表单样式技术，这些技术需要在处理一些更难以设置样式的元素时使用。

UI 伪类

这是一篇对 UI 伪类的介绍，使 HTML 表单控件能够根据当前状态进行定位。

验证和提交表单数据
---------

客户端表单验证

仅仅发送数据还不够——我们还需要确保用户填写表单的数据格式是正确的，以在后续流程中正确处理它，而且它不会破坏我们的应用程序。我们还希望帮助用户正确填写表单，让他们在使用应用程序时不会感到困扰。表单验证可以帮助我们实现这些目标，本文将告诉你需要了解的内容。

发送表单数据

本文讨论当用户提交一个表单时，会发生什么情况——表单数据的去向，以及当表单数据到达指定位置时我们如何处理？我们还研究了与发送表单数据相关的一些安全问题。

高级指南
----

以下文章对于学习路径来说没那么重要，但是当你掌握了上述技术并向了解更多内容时，它们会变得有趣且实用。

如何构建自定义表单控件

在某些情况下，可能出于样式或功能的原因，原生表单部件无法提供你所需要的东西。在这种情况下，你可能需要使用原生 HTML 构建自己的表单小部件。本文将讲述一个实例，说明你将如何做到这一点，以及在实际操作时需要注意的事项。

通过 JavaScript 发送表单

本文将讨论如何使用表单来构建 HTTP 请求，并通过定制的 JavaScript 发送它，而不是标准的表单提交。它还说明了为什么要这么做，以及这样做的意义。（请参阅使用 FormData 对象。）

表单控件的 CSS 属性兼容性表

最后一篇文章提供了一个方便的参考，以确定 CSS 属性与表单元素的兼容性关系。

参见
--

* HTML 表单元素
* HTML <input> 元素
* HTML 属性
无障碍
===

如果你想成为一个 web 开发者，学习一些 HTML、CSS 和 JavaScript 是很有用的，但是仅仅使用这些技术是不够的，重要的是要学会如何**负责任**地使用这些技术，以便所有读者都可能在网上使用你的创作。为了达到这个目的，要遵循一般最佳实践（这些最佳实践已经被 HTML、CSS 和 JavaScript 相关的主题所证明）进行跨浏览器测试，并且从项目最初阶段就把无障碍性考虑在内。在这个模块中我们将会详细讨论后者。

概述
--

当有人将一个网站描述为“无障碍”时，他们的意思是，任何用户都可以使用其所有的功能和内容，无论用户是如何访问网络的——甚至特别是有身体或精神障碍的用户。

* 键盘、鼠标和触摸屏用户，以及用户访问网络的任何其他方式，包括像 Alexa 和 Google Home 这样的屏幕阅读器等语音助手，都应该能够访问网站。
* 无论人们的听觉、视觉、身体或认知能力如何，应用程序都应该是可以理解和使用的。
* 网站也不应该造成伤害：像动画（motion）这样的 web 特性会导致偏头痛或癫痫发作。

**默认情况下，HTML 在使用正确的时候是可以实现无障碍的**。Web 无障碍涉及确保内容保持无障碍，无论访问 web 的人员或方式。

Firefox 浏览器无障碍检查器是一个非常有用的工具，用于检查网页的无障碍问题。下面的视频对它做了很好的介绍：

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

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

**从这里开始**

前提
--

为了充分理解这个模块，你至少需要读过 HTML、CSS 和 JavaScript 各个主题的前两个模块，或者有可能的话，在你学习相关联的技术话题时也把无障碍相关的内容学习了，这样会更好。

**备注：** 如果在你所使用的设备上不能建立自己的文件，你可以使用在线编码平台运行大多数样例代码，比如 JSBin 或者 Glitch。

指南
--

什么是无障碍？

这篇文章开头很好地阐述了到底什么是无障碍——这包括我们要考虑哪一群人，为什么要考虑这些人，不同用户使用什么工具与网页交互，以及我们如何在 web 开发工作流中构建无障碍部分。

HTML: 无障碍的良好基础

只要确保恰当的 HTML 元素被用于适当的目的，大量的网页内容即可具有无障碍，这篇文章详细地讲述了 HTML 的用法，以确保网页有最大的无障碍性。

CSS 与 JavaScript 无障碍最佳实践

当正确使用 CSS 与 JavaScript 的时候，也能够使得网页具有很好的无障碍，但是如果错误地使用它们将极大地破坏无障碍。这篇文章罗列了一些应该被考虑的 CSS 和 JavaScript 的最佳实践，确保再复杂的内容都可以有尽可能好的无障碍。

WAI-ARIA 基础

继上一篇文章之后，有时候制作复杂的 UI 控件会涉及到非语义的 HTML 和动态的 JavaScript 更新内容会很难。WAI-ARIA 是一种可以帮助解决这些问题的技术，通过增加浏览器和辅助技术可以识别和使用的进一步语义来让用户知道正在发生的事情。在这里，我们将展示如何在基本级别上使用它来提高无障碍。

多媒体无障碍

可以提高无障碍的另一类内容是多媒体——视频，音频和图像内容需要提供适当的文本替代方案，以便辅助技术和相应的用户能够理解。这篇文章展示了如何这样做。

移动端无障碍

随着移动设备上网页访问的流行，以及主流平台（如 iOS 和 Android）具备了完善的辅助功能工具，考虑在这些平台上 Web 内容的无障碍也是非常重要的。本文讨论针对移动设备的无障碍注意事项。

评估
--

无障碍诊断

在这个模块的评估部分中，我们向你展示了一个简单的网站，它有几个无障碍问题，需要你进行诊断和修复。

参见
--

* 现在开始构建无障碍的 web 应用——来自 Marcy Sutton 的一系列优质的视频教程。
* Deque University 资源——包含代码示例，屏幕阅读参考和其他有用的资源。
* WebAIM 资源——包含指引、清单、工具和其他资源。
* Web 无障碍性评估工具列表——包含一系列 web 无障碍评估工具。
使用 MathML 编写数学公式
================

数学标记语言（Mathematical Markup Language）或 MathML 是用于在网页中编写数学公式的标记语言，其支持分数、上下标、根号、矩阵、积分、级数等。尽管它最初被设计为独立的 XML 语言，但 MathML 通常嵌入在 HTML 文档中，并可视为 HTML 的扩展。

**警告：** 实际上，MathML 内容是由轻量级标记语言（例如 LaTeX）或图形用户界面生成的。如果你只需要在网页中集成数学公式，可以参考编写 MathML 页面上的提示。

#### 想成为前端开发人员吗？

我们提供了一门课程，包含了你实现这个目标所需的所有基本信息。

**开始学习**

前提
--

在尝试学习 MathML 之前，我们假设你已经具备一些基本的 HTML 和 CSS 知识。因此，强烈建议你首先熟悉这两种技术。请从以下模块开始：

* Web 入门
* HTML 简介
* CSS 入门

尽管所需的概念将根据需要进行解释，但对数学符号和 TeX 渲染规则有一定的了解可能会对你有帮助。

模块
--

MathML 入门

MathML 是用于在网页中编写数学公式的标记语言。该模块将以比较轻松的方式开始你的 MathML 掌握之旅，介绍其工作原理、语法以及如何在 HTML 中开始使用它。

参见
--

MDN 上的 MathML

MathML 文档在 MDN 上的主要入口，你可以在此找到 MathML 语言所有特性的详细参考文档。想知道某个属性可以使用哪些值？这是一个很好的参考资料。
服务器端网页编程
========

***动态网页——服务器端编程***这主题是一系列的模块来演示如何创建动态的网页；可以交付自定义的信息来回应 HTTP 请求的网页。这些模块为服务器端编程提供了一个通用的介绍，以及如何使用 Django (Python) 和 Express (Node.js/JavaScript) 去创建基础应用的具体的入门指导。

大多数的主流网页使用一类服务器端的技术去动态地显示所要求的不同数据。举个例子，想象一下 Amazon 上有多少可购买的产品，以及 FaceBook 上有多少帖子？用完全不同的静态页面去显示所有的这些内容会彻底地低效，所以取而代之的是这些网站展示的是静态的模板（用 HTML, CSS, 和 JavaScript 构建），然后在有需要时动态地在这些模板中更新数据展示，比如说当你想要在 Amazon 上浏览一个不同的产品。

在现代的网页开发世界里，学习服务器端开发是高度推荐的。

学习路径
----

开始服务器端编程通常比客户端编程要简单，因为动态的页面倾向于执行非常类似的操作（从数据库中获取数据然后显示到一个页面中，确认用户输入的数据以及保存到一个数据库中，检查用户的权限和登陆用户，以及更多），并且它是用能使这些和其他的常见网页服务端操作变简单的网页框架来构建的。

知道一些关于编程概念（或者关于一个特定的编程语言）的基础知识会很实用，但不是必要的。类似的，精通客户端编程也不是必修的，但一些基本知识会帮助你和创建你的客户端的“前端”开发者更融洽地工作。

你会需要去理解“网页是如何工作的”。我们推荐你先去阅读以下主题：

* 什么是一个网页服务器 [What is a web server]
* 我需要什么软件去构建一个网页？ [What software do I need to build a website?]
* 你怎样上传文件到一个网页服务器？ [How do you upload files to a web server?]

拥有这些基础理解，你会做好完成在这节中的模块的准备。

模块
--

这个主题包含了以下的模块。你应该从第一个模块开始，然后接着到后面的任一模块，后面的模块演示了如何使用两个应用了合适的网页框架的非常流行的服务器端语言。

服务器端编程的第一步 [Server-side website programming first steps]

这个模块提供了关于服务器端网页编程的服务器技术无关的信息 [server-technology-agnostic information]，包括了关于服务器端编程的根本问题的答案——”它是什么“，”它跟客户端编程的区别“，和”为什么它很实用“——以及关于一些流行的服务器端框架的概述和如何为你的网站选择最合适的框架的指南。最后我们提供了一个关于网页服务器安全的介绍性部分。

Django 网页框架 [Django Web Framework (Python)]

Django 是一个非常流行以及功能齐全的服务器端网页框架，它是用 Python 编写的。这个模块讲解了为什么 Django 是一个这么好的网页服务器框架，如何设立一个开发环境以及如何使用它来执行常见的任务。

Express 网页框架 [Express Web Framework (Node.js/JavaScript)]

Express 是用 JavaScript 编写并在 node.js 运行时环境中托管的一个流行的网页框架。这个模块讲解了这个框架的一些主要优点，如何设立你的开发环境以及如何执行常见的网页开发和部署的任务。
使用 HTML 组织网站内容
==============

为了创建一个网站，你需要了解 HTML——一项用于定义网页结构的基本技术。HTML 用于标识你的网页内容是应该被解析为段落、列表、头部、链接、图像、多媒体播放器、表单或是其他众多可用的元素之一，亦或是你定义的新元素。

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

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

**从这儿开始**

须知
--

在开始这个主题的学习之前，你至少要基本熟悉使用电脑和被动地使用网络（即单纯地查看内容）。你应该设置好一个基础的工作环境，详细参照安装基础软件，并且理解如何新建和管理文件，详细参照文件处理——这两者都在 web 入门的零基础模块里。

在尝试学习这个主题之前，建议先完成 web 入门主题，不过这并不是必要的。HTML 基础里大多数的文章在 HTML 介绍中也有涉及，不过要详细得多。

在学习了 HTML 之后，你就可以继续学习其他进阶主题了，例如：

* CSS，以及如何用它装饰 HTML (例如：更改你的文本字号和字体，添加边框和阴影，将你的页面设计成多栏布局，添加动画和其他视觉效果。)
* JavaScript，以及如何用它为网页添加动态功能（例如：找到并在地图上绘制出你的地址，触发按钮时让 UI 元素显示或消失，将用户的数据本地储存在他们的电脑里等等。）
模块
--

这个主题由包含以下模块，建议从第一个开始，按顺序进行学习。

HTML 介绍

这一模块将为你铺路，帮你习惯一些重要的概念和语法，着眼于如何对文本应用 HTML，创造超链接，以及使用 HTML 构造一个网页。

多媒体和嵌入

这个模块带你探索如何使用 HTML 在你的网页里如何包含多媒体信息，例如用各种方法包含图片，以及嵌入视频、音频，甚至是嵌入其他完整的网页。

HTML 表格

在网页上用易于理解和无障碍的方式来表示表格数据是一项挑战。这个模块包括了基本的表格标记及更多复杂的特性，例如实现标题和总结。

解决常见的 HTML 问题
-------------

使用 HTML 解决常见问题提供了一系列在创建网页过程中可能遇到的常见问题的解决方案：处理标题，添加图片或视频，强调内容，创建一个基础表单等等。

参见
--

web 表单

本模块提供了一系列文章以助你掌握 web 表单的要领。web 表单是一种非常强大的用户交互工具--其最常见的应用是收集用户的数据，或允许他们控制用户界面。然而，由于历史和技术原因，想要充分发挥他们的潜能并不是一件易事。本模块将介绍 web 表单的所有基本要素，包括标记其 HTML 结构、表单控件的样式、验证表单数据以及向服务器提交数据。

MDN 上的 HTML（超文本标记语言）

MDN 上 HTML 相关参考文档的主入口，涵盖了详细的元素和属性参考——比如说如果你想知道一个元素有什么属性或者一个属性有什么值，此页面是一个查询它们的好地方。