recursal/MDN huggingface dataset:
我需要什么软件来构建一个网站
==============

在这篇文章我们会展示当你编辑，上传或者浏览一个网站时所需要的软件成分。

|  |  |
| --- | --- |
| 先决条件： | 你应当已经知道网页、网站、网络服务器，以及搜索引擎间的区别 (en-US)。 |
| 目标： | 学习当你想要编辑、上传，或者浏览一个网站时所需要的软件成分。 |

概要
--

你可以免费下载大部分网络开发所需要的程序。我们会在此文章中提供一些链接。你会需要工具去 1) 创建和编辑网页，2) 上传文件到你的网络服务器，和 3) 浏览你的网站。

几乎所有的操作系统内置了一个文本编辑器和网站阅读器（被称作 浏览器）。所以通常你只需要获得用来传输文件到你的网络服务器的软件。

自主学习
----

*现在还没有自主学习活动。请考虑投稿*。

深度探索
----

### 创建和编辑网页

要创建和编辑一个网站，你需要一个文本编辑器。文本编辑器创建并修改无格式的文本文件。（其他格式，像是 **RTF (en-US)**，允许你去添加格式，像是加粗或者下划线。这些格式并不适用于编写网页。）你应当明智地选择一个文本编辑器，因为当你建立网站时，你会广泛地使用到它。

所有的桌面操作系统内置了一个基本的文本编辑器。这些编辑器是很直白的，但是缺乏了网页编码所需的特殊功能。如果你想要一些更花俏的东西，这里有很多可用的第三方工具。第三方编辑器通常包含了额外的功能，包括句法填色 [syntax coloring]，代码补全 [auto-completion]，可折叠区间 [collapsible sections]，以及代码搜索 [code search]。这里有一个短的编辑器列表：

| 操作系统 | 内置编辑器 | 第三方编辑器 |
| --- | --- | --- |
| Windows | * 记事本
 | * Notepad++
* Visual Studio Code
* Web Storm
* Brackets
* ShiftEdit
* Sublime Text
 |
| Mac OS | * 文字编辑
 | * TextWrangler
* Visual Studio Code
* Brackets
* ShiftEdit
* Sublime Text
 |
| Linux | * Vi（所有 UNIX
 操作系统）
* GEdit（Gnome）
* Kate（KDE）
* LeafPad（Xfce）
 | * Emacs
* Vim
* Visual Studio Code
* Brackets
* ShiftEdit
* Sublime Text
 |
| ChromeOS |  | * ShiftEdit
 |

这里是一个高级文本编辑器的截图：

![Screenshot of Notepad++.](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need/notepadplusplus.png)

### 上传文件到网络

当你的网站已经为公众浏览做好准备，你会需要上传你的网页到你的网络服务器。你可以从不同的供应者（查看 在网络上做某些东西要花费多少 [How much does it cost to do something on the web? (en-US)]）处购买服务器的空间。一旦你选择好供应者，供应者会通过电子邮件给你发送 FTP（文件传输协议 [file transfer protocol]）访问信息。上传文件到一个网络服务器是创建一个网站的重要一环，所以我们会在一篇独立的文章 [a separate article (en-US)] 中介绍它。就目前而言，这里有一小列免费的基本 FTP 客户端：

| 操作系统 | FTP 软件 |
| --- | --- |
| Windows | WinSCP
Moba Xterm | FileZilla (All OS) |
| Linux | Nautilus (Gnome)Konqueror
 (KDE)
  |
| Mac OS | Cyberduck |

### 浏览页面

正如你所知，你需要一个网页浏览器去查看网页。这里有一系列的 [dozens] 可选浏览器供你个人实用，不过当你在开发一个网页时，你应当至少用以下的主流浏览器测试它，以保证你的网站可供大部分人浏览：

* Mozilla Firefox
* Google Chrome
* Microsoft Internet Explorer
* Apple Safari

如果你正以特定的群体（比如说技术平台或者国家）为目标，你或许需要用额外的浏览器，像是 Opera、Dolphin 来测试它。

但是因为某些浏览器只会在特定的操作系统上运行，测试会变得复杂。Apple Safari 在 iOS 和 Mac OS 上运行，而 Internet Explorer 则只在 Windows 上运行。这时候最好利用像是 Browsershots 或者 Browserstack 之类的服务。Browsershots 提供你的网站的截图，就如同它会在不同浏览器中所看到那样。Browserstack 实际上给予你完全远程访问虚拟机的权限，所以你可以在最普遍的环境中测试你的网站。或者，你可以设置你自己的虚拟机，不过这需要一些专业知识。（如果你选择了这样做，微软在上为开发者提供了随时可用的虚拟机。）

务必在一个真实设备上运行一些测试，尤其是在真实的移动设备上。移动设备模拟是一个崭新的，进化中的技术，而且它并不及桌面模拟可靠。当然，移动设备耗费金钱，所以我们推荐你查看一下 Open Device Lab initiative。你同时也可以分享设备，如果你想要不花费太多地在多平台上测试的话。

下一步
---

* 这里的一些软件是免费的，但不是所有都是。探寻在网络上做一些事情需要花费多少。
* 如果你想要了解更多关于文本编辑器的知识，阅读我们关于如何选择并安装一个文件浏览器的文章。
* 如果你寻思如何在网络上发布你的网站，查阅“如何上传文件到一个网络服务器”。
应该如何使用 Github Pages?
====================

GitHub是一个“公共编码”网站。它允许你上传代码存储库并存储在 Git 版本控制系统上。然后，你可以在代码项目上进行协作，默认情况下系统是开源的，这意味着世界上任何人都可以找到你的 GitHub 代码，使用它，从中学习，并改进它。同样的，对于其他人的代码你也可以这么做！本文提供了一个基本的指南，即使用 Github 的 gh-pages 功能发布内容。

发布内容
----

GitHub 是一个非常重要和有用的社区，值得参与其中，Git / GitHub 也是一个非常受欢迎的版本控制系统 - 现在大多数科技公司在其工作流程中使用它。GitHub 有一个非常有用的功能，称为GitHub Pages，它允许你在 Web 上实时发布网站代码。

### 基本 Github 设置

1. 首先，在你的机器上安装 Git。这是 GitHub 工作的底层版本控制系统软件。
2. 接下来，注册一个 GitHub 帐户。这很简单易操作。
3. 注册后，用你的用户名和密码登录github.com。
### 准备上传代码

你可以将任何你喜欢的代码存储在 Github 资源库中，但要使用 GitHub Pages 功能实现全面效果，你的代码应该被构造为典型的网站，例如主入口点是一个名为 index.html 的 HTML 文件。

第一步，你需要做的另一件事是将你的代码目录初始化为 Git 存储库。按照下述步骤：

1. 将命令行指向你的 test-site 目录（或者任何一个你能调用的包含有你的网站的目录）。为此，请使用 cd 命令（即“更改目录”）。如果你已经将你的网站放到了位于桌面上的 test-site 目录中，则可以输入以下内容：

```bash
cd Desktop/test-site
```

2. 当命令行指向你的网站所在目录时，键入以下命令，该命令告诉 git 工具将目录转换为 git 仓库：

```bash
git init
```


#### 命令行界面

将代码上传到 Github 的最佳方法是通过命令行 - 这是一个窗口，你可以在其中输入命令来执行诸如创建文件和运行程序等操作，而不是在用户界面内单击。它看起来像这样：

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/command-line.png)

**备注：** 你也可以考虑使用Git 图形用户界面来执行相同的工作，如果你不熟悉命令行。

每个操作系统都附带有一个命令行工具：

* **Windows**: 可以通过按 Windows 键，键入**命令提示符**，并从出现的列表中选择命令提示符。请注意，Windows 具有与 Linux 和 OS X 不同的命令约定，因此以下命令可能因你的机器而异。
* **OS X**: **终端**可以在应用程序>实用程序中找到。
* **Linux**: 通常你可以用 Ctrl + Alt + T 启动一个终端。如果不行，请在应用程序栏或菜单中查找**Terminal**。

起初这可能看起来有点吓人，但不要担心 - 你很快就会得到基本的窍门。你可以通过键入命令并按 Enter 键来告诉计算机在终端中执行某些操作，如上所示。

### 为你的代码创建一个仓库

1. 接下来，你需要为你的文件创建一个新的仓库。单击 GitHub 主页右上角的加号（+），然后选择“*New Repository*”。
2. 在此页面的“*Repository name*”框中，为你的代码库起一个名字，例如：*my-repository*。
3. 还要填写一个描述来说明你的存储库将包含哪些内容。你的屏幕应该是这样的

 ![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/create-new-repo.png)
4. 单击*Create repository*;你将会看到如下页面：

 ![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/github-repo.png)
### 将你的文件上传到 GitHub

1. 在当前页面上，你可能对本节的这部分感兴趣“***…or push an existing repository from the command line***（或者从命令行推送一个现有存储库）”。你应该看到本节中列出的两行代码。复制整个第一行，将其粘贴到命令行中，然后按 Enter 键。命令应该看起来像是这样的：

```bash
git remote add origin https://github.com/chrisdavidmills/my-repository.git
```

2. 接下来，键入以下两个命令，每个命令之后按 Enter。这些指令将会把代码上传到 GitHub，并要求 Git 管理这些文件。

```bash
git add --all
git commit -m 'adding my files to my repository'
```

3. 最后，将代码推送到 GitHub，通过你正在访问的 GitHub 网页，然后输入我们看到的两个命令中的第二个命令“ **…or push an existing repository from the command line**（或从命令行部分推入现有存储库）部分”：

```bash
git push -u origin master
```

4. 现在你需要为你的仓库开启 GitHub pages 分支。为此，其在仓库的主页中选择 *Settings*，然后从左侧的侧边栏中选择 *Pages*。在 *Source* 下选择“main”分支。页面应该会自动刷新。
5. 重新回到 *GitHub Pages* 部分，你应该会看到形式为“Your site is ready to be published at `https://xxxxxx`.”的一行内容。
6. 如果你点击这个 URL，你应该会跳转到你的示例的实时演示版本，提供的主页名为 `index.html`——这是默认的入口点。如果你的网站的入口点不是这个，例如 `myPage.html`，你需要访问 `https://xxxxxx/myPage.html`。
### 更多的 GitHub 知识

如果你想对 test-site 进行更多更改并将其上传到 GitHub，那么你只需像以前一样对文件进行更改。然后，你需要输入以下命令（在每个之后按 Enter 键）将这些更改推送到 GitHub：


```bash
git add --all
git commit -m 'another commit'
git push
```


你可以使用更合适的消息替换上一次的提交信息，以描述你刚刚做出的更改。

我们仅仅提供了 Git 的浅显基本的信息。要了解更多信息，请先从 GitHub 帮助站点开始。
什么是超链接？
=======

通过这篇文章，我们将了解什么是超链接以及超链接的重要性。

|  |  |
| --- | --- |
| 前提： | 
 你该知道
 互联网是怎样工作的 ，并且熟悉
 网页，网站，网络服务器和搜索引擎间的区别 |
| 目标： | 了解 Web 上的超链接概念以及超链接的重要性。 |  |

概述
--

超链接（Hyperlink），通常简称为链接（link），是网络背后的核心概念。为了解释什么是链接，我们需要回到网络架构的底层。

早在 1989 年，网络发明人蒂姆·伯纳斯 - 李（Tim Berners-Lee）就提出了网站的三大支柱：

1. URL, 跟踪 Web 文档的地址系统
2. HTTP, 一个传输协议，以便在给定 URL 时查找文档
3. HTML, 允许嵌入超链接的文档格式

正如你在三大支柱中所看到的，网络上的一切都围绕着文档以及如何访问它们。Web 的最初目的是提供一种简单的方式来访问，阅读和浏览文本文档。从那时起，网络已经发展到提供图像，视频和二进制数据的访问，但是这些改进几乎没有改变三大支柱。

在 Web 之前，很难访问文档并从一个文档跳转到另一个文档。人类可以理解的 URL 已经使得文档容易被访问，但是你很难通过输入一个长 URL 来访问一个文档。超链接改变了这一切。链接可以将任何文本与 URL 相关联，因此用户只要激活链接就可以到达目标文档。

默认情况下，链接是一段具有下划线的蓝色文本，在视觉上与周围的文字明显不同。用手指触击或用鼠标点击一个链接会激活链接；你如果使用键盘，那么按 Tab 键直到链接处于焦点，然后按 Enter 键或空格键来激活链接。

![Example of a basic display and effect of a link in a web page](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-1.png)

链接是一个突破，它使得网络变得非常有用和成功。在本文的其余部分，我们讨论各种类型的链接及链接在现代网页设计中的重要性。

深入探索
----

正如我们所说的，链接是一段链接到 URL 的文本，我们使用链接来跳转到另一个文档。关于链接，有一些细节值得考虑：

### 链接的类型

内链

内链是你的网页之间的链接。没有内部链接，就没有网站（当然，除非是只有一页的网站）。

外链

外链是从你的网页链接到其他人的网页的链接。没有外部链接，就没有 web，因为 web 是网页的网络。使用外部链接提供除你自己维护的内容之外的信息。

传入链接

传入链接是从其他人的网页链接到你的网页的链接。这只是从被链接者的角度看到的外部链接。请注意，当有人链接到你的网站时，你不必链接回去。

当你建立一个网站时，集中精力处理内部链接，因为这些使你的网站可用。权衡链接的数量，既不要太多也不要太少。我们将在另一篇文章中讨论网站导航的设计问题，但是一般情况下，无论何时添加一个新网页，都要确保至少有一个其他网页链接到新网页。另一方面，如果你的网站的页面多于十个，那么每个页面都需要链接到其他页面。

当你刚开始的时候，你不必担心外部链接和传入链接，但是如果你想让搜索引擎找到你的网站，这些链接就非常重要。（请参阅下面的更多细节。）

### 锚

**大多数链接将两个网页相连。而锚将一个网页中的两个段落相连。** 当你点击指向锚点的链接时，浏览器跳转到当前文档的另一部分，而不是加载新文档。但是，你可以像使用其他链接一样制作和使用锚点。

![Example of a basic display and effect of an anchor in a web page](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-2.png)

### 链接和搜索引擎

链接对你的用户和搜索引擎都很重要。每次搜索引擎抓取一个网页时，他们都会按照网页上提供的链接对网站进行索引。搜索引擎不仅可以通过链接来发现网站的各种页面，还可以使用链接的可见文本来确定哪些搜索查询适合到达目标网页。

所以链接会影响搜索引擎链接到你的网站的方式。麻烦的是，很难衡量搜索引擎的活动。公司自然希望他们的网站在搜索结果中排名很高，所有研究结果至少可以说明一些事情：

* 链接的可见文本会影响哪些搜索查询会找到给定的网址。
* 一个网页所拥有的链接越多，它在搜索结果中排名越高。
* 外部链接影响源和目标网页的搜索排名，但有多少不明确。

SEO (search engine optimization) 是如何使网站在搜索结果中排名高的研究。改善网站的链接使用是一种有用的搜索引擎优化技术。

下一步
---

所以现在当然你想要建立一些链接的网页！

* 为了获得更多的理论背景，了解 URL 以及其结构，因为每个链接都指向一个 URL。
* 想要一些更实际的东西？我们的 HTML 介绍 模块中的创建超链接 解释了如何实现详细的超链接
什么是 web 服务器？
============

在这篇文章中我们会重温什么是 web 服务器，它们如何工作，以及为什么它们很重要。

|  |  |
| --- | --- |
| 前提： | 你应该已经知道互联网是怎么工作的，并且了解网页、网站、web 服务器和搜索引擎的区别是什么。 |
| 目标： | 了解 web 服务器，明白它大概的工作原理 |

概述
--

*web 服务器*一词可以代指硬件或软件，或者是它们协同工作的整体。

1. 硬件部分，web 服务器是一台存储了 web 服务器软件以及网站的组成文件（比如，HTML 文档、图片、CSS 样式表和 JavaScript 文件）的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。
2. 软件部分，web 服务器包括控制网络用户如何访问托管文件的几个部分，至少是一台 *HTTP 服务器*。一台 HTTP 服务器是一种能够理解 URL（网络地址）和 HTTP（浏览器用来查看网页的协议）的软件。一个 HTTP 服务器可以通过它所存储的网站域名进行访问，并将这些托管网站的内容传递给最终用户的设备。

基本上，当浏览器需要一个托管在网络服务器上的文件的时候，浏览器通过 HTTP 请求这个文件。当这个请求到达正确的 web 服务器（硬件）时，*HTTP 服务器*（软件）收到这个请求，找到这个被请求的文档（如果这个文档不存在，那么将返回一个 404 响应），并把这个文档通过 HTTP 发送给浏览器。

![通过 HTTP 的客户/服务器连接的基本表示方法](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/web-server.svg)

要发布一个网站，你需要一个静态或动态的服务器。

**静态 web 服务器**（static web server）由一个计算机（硬件）和一个 HTTP 服务器（软件）组成。我们称它为“静态”是因为这个服务器把它托管文件的“保持原样”地传送到你的浏览器。

**动态 web 服务器**（dynamic web server）由一个静态的网络服务器加上额外的软件组成，最普遍的是一个*应用服务器*和一个*数据库*。我们称它为“动态”是因为这个应用服务器会在通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新。

举个例子，要生成你在浏览器中看到的最终网页，应用服务器或许会用一个数据库中的内容填充一个 HTML 模板。像 MDN 或维基百科这样的网站有成千上万的网页。通常情况下，这类网站只由几个 HTML 模板和一个巨大的数据库组成，而不是成千上万的静态 HTML 文档。这种设置使得维护和提供内容更加容易。

深入探索
----

回顾一下：要获取一个网页，你的浏览器会向网络服务器发送一个请求，服务器会在自己的存储空间中搜索所请求的文件。找到文件后，服务器读取文件，根据需要进行处理，并将其发送给浏览器。让我们更详细地了解一下这些步骤。

### 托管文件

一个网络服务器首先需要存储这个网站的文件，也就是说所有的 HTML 文档和它们的相关资源，包括图片、CSS 样式表、JavaScript 文件、字体以及视频。

严格来说，你可以在你自己的计算机上托管所有的这些文件，但是在一个专用的 web 服务器上存储它们会方便得多，因为它

* 专用 web 服务器可用性更强（会一直启动和运行）
* 除去停机时间和系统故障，专用 web 服务器总是连接到互联网。
* 专用 web 服务器可以一直拥有一样的 IP 地址，这也称为*专有 IP 地址*（不是所有的 ISP 都会为家庭线提供一个固定的 IP 地址）
* 专用 web 服务器往往由第三方提供者维护

因为所有的这些原因，寻找一个优秀的托管提供者是建立你的网站的一个重要部分。比较不同公司提供的服务并选择一个适合你的需求和预算的服务（服务的价格从免费到每月上万美金不等）。你可以在这篇文章中找到更多的细节。

一旦你设置好一个网络托管解决方案，你必须上传你的文件到你的 web 服务器。

### 通过 HTTP 交流

其次，web 服务器提供了 HTTP（**H**yper**t**ext **T**ransfer **P**rotocol，超文本传输协议）支持。正如它的名字暗示，HTTP 明确提出了如何在两台计算机间传输超文本（链接的 web 文档）。

协议是一套为了在两台计算机间交流而制定的规则。HTTP 是一个文本化的（textual），无状态的（stateless）协议。

文本化

所有的命令都是纯文本（plain-text）且人类可读（human-readable）的。

无状态

无论是服务器还是客户都不会记住之前的交流。举个例子，仅依靠 HTTP，服务器不能记住你输入的密码或者你正处于业务中的哪一步。你需要一个应用服务器来进行这样的工作。（我们会在其他文章中涵盖这类的技术。）

HTTP 为客户和服务器间的如何沟通提供清晰的规则。我们会在日后的一篇技术文章中覆盖 HTTP 本身。就目前而言，只需要知道这几点：

* 通常只有*客户端*可以发送 HTTP 请求，只会发送到*服务器*。服务器通常只能*响应客户端*的 HTTP 请求。服务器也可以通过一种叫做服务器推送的机制，在客户请求之前，将数据填充到客户的缓存中。
* 当通过 HTTP 请求一个文件时，客户端必须提供这个文件的 URL。
* 网络服务器*必须应答*每一个 HTTP 请求，至少也要回复一个错误信息。

在 web 服务器上，HTTP 服务器负责处理和响应传入的请求。

1. 当收到一个请求时，HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配。
2. 如果是，网络服务器会传送文件内容回到浏览器。如果不是，服务器会检查是否应该动态生成请求所需的文件（参见静态和动态内容）。
3. 如果两种处理都不可能，网络服务器会返回一个错误信息到浏览器，最常见的是 `404 Not Found`。404 错误太常见以至于很多网页设计者花费许多时间去设计 404 错误页面。
 ![MDN 404 页面示例](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/mdn-404.jpg)
### 静态和动态内容

粗略地说，一个服务器可以提供静态或者动态的内容。*静态*意味着“保持原样地提供”。静态的网站是最容易建立的，所以我们建议你制作一个静态的网站作为你的第一个网站。

“动态”意味着服务器会处理内容甚至实时地从一个数据库中产生它。这个方法提供了更多的灵活性，但技术栈更加复杂，使得建立一个网站的挑战大大增加。

有这么多的应用服务器技术，以至于很难推荐一种特定的技术。一些应用服务器迎合了特定的网站类别，如博客、维基或电子商务；另一些则更为通用。如果你要建立一个动态网站，请花时间选择适合你需要的技术。除非你想学习 web 服务器编程（这本身就是一个令人兴奋的领域！），否则你不需要创建自己的应用服务器。那只是重新发明轮子。

下一步
---

现在你已经熟悉了什么是 web 服务器，你可以：

* 钻研在 web 上做某些事情要花费多少
* 学习关于创建一个网页所需要的各种软件
* 移步到某些实用的东西，像是如何上传文件到一个 web 服务器。
网页，网站，网络服务器和搜索引擎的区别是什么？
=======================

在本文中我们描述了各种与网络相关的概念：网页，网站，网络服务器，以及搜索引擎。这些概念常被网络新手混淆，或被误用。让我们看看它们到底代指的是什么吧！

|  |  |
| --- | --- |
| 前提： | 
 了解
 互联网是怎么工作的 |
| 目标： | 了解网页，网站，网络服务器和搜索引擎间的区别 |

概述
--

正如任何领域的知识一样，网络也有很多的术语。别担心，我们不会把你淹没在这些术语里的（但如果你感兴趣的话，我们也弄了一个术语表）然而，一开始你还是需要了解一些基本概念，因为当你读下去的时候，这些词汇会一再出现。有时候这些概念容易被混淆，因为他们指的是相关但不同的功能。事实上，有时你会见到这些概念在新闻中或者其他地方被误用，所以把他们弄混了也是情有可原的！

随着进一步地探讨，我们将会涵盖这些概念和技术的方方面面，但以下的这些简单定义可以帮助你快速开始：

网页（webpage）

一份能够显示在网络浏览器（如 Firefox,，Google Chrome，Microsoft Internet Explorer 或 Edge，Apple 的 Safari）上的文档。网页也常被称作"web pages"（网页）或者就叫"pages"（页面）。

网站（website）

一个由许多网页组合在一起，并常常以各种方式相互连接的网页组成的集合。网站常被称作"web site"（网站）或简称"site"（站点）。

网络服务器（web server）

一个在互联网上托管网站的计算机。

搜索引擎（search engine）

帮助你寻找其他网页的网站，比如 Google，Bing，或 Yahoo。

自主学习
----

*还没有可用的资料，请考虑贡献一个。*

深入探索
----

所以，让我们深入了解这四个术语是如何相关联的以及为什么有时会相互混淆。

### 网页

一份网页文档是交给浏览器显示的简单文档。这种文档是由超文本标记语言来编写的 (在other articles可查看更多详细内容)。网页文档可以插入各种各样不同类型的资源，例如：

* *样式信息* — 控制页面的观感
* *脚本*— 为页面添加交互性
* *多媒体*— 图像，音频，和视频

**备注：** 浏览器也能显示其他文档，例如 PDF 文件或图像，但网页（webpage）这一概念专指 HTML 文档。其他情况我们则只会使用文档（document）这一概念

网络上所有可用的网页都可以通过一个独一无二的地址访问到。要访问一个页面，只需在你的浏览器地址栏中键入页面的地址。

![Example of a web page address in the browser address bar](/zh-CN/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-page.jpg)

### 网站

网站是共享唯一域名的相互链接的网页的集合。给定网站的每个网页都提供了明确的链接—一般都是可点击文本的形式—允许用户从一个网页跳转到另一个网页。

要访问网站，请在浏览器地址栏中输入域名，浏览器将显示网站的主要网页或主页。

![Example of a web site domain name in the browser address bar](/zh-CN/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-site.jpg)

*当网站只包含一个网页时，网站和网页二者尤其容易弄混。这样的网站有时称之为单页网站（single-page website）。*

### 网络服务器

一个网络服务器是一台托管一个或多个网站的计算机。 "托管"意思是所有的网页和它们的支持文件在那台计算机上都可用。网络服务器会根据每位用户的请求，将任意网页从托管的网站中发送到任意用户的浏览器中。

别把网站和网络服务器弄混了。例如，当你听到某人说："我的网站没有响应"，这实际上指的是网络服务器没响应，并因此导致网站不可用。更重要的是，自从一个网络服务器能够托管多个网站，"网络服务器"这个术语从来都没被用来指定一个网站，因为这可能导致很大的混乱。在上面的例子中，如果我们说，“我的网络服务器没有响应”，这就指的是在那台网络服务器上的所有网页都不可用。

### 搜索引擎

搜索引擎是网络上常见的混乱之源。搜索引擎是一个特定类型的网站，用以帮助用户在其他网站中寻找网页。

搜索引擎数不胜数，有Google, Bing, Yandex, DuckDuckGo等等。其中有的功能宽泛，有的专注于特定的主题。你可按需使用。

许多网上的初学者将搜索引擎和浏览器混淆了。让我们明确一下：浏览器是一个接收并显示网页的软件，搜索引擎则是一个帮助用户从其他网站中寻找网页的网站。这种混淆之所以出现是因为当一个人打开一个浏览器的时候，浏览器展现的是一个搜索引擎的主页。这有什么意义呢？很明显，因为你打开浏览器要做的第一件事就是去寻找一个网站。不要把基础设施（浏览器）和服务（搜索引擎）混淆。这种区分会对你很有帮助，但是甚至有些专业人员也还把它们说得很宽泛，所以不用对这种区分太过谨慎。

下图是一个火狐浏览器把谷歌搜索框当作它默认开始页面的实际例子：

![Example of Firefox nightly displaying a custom Google page as default](/zh-CN/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/search-engine.jpg)

下一步
---

* 继续探索： 网络服务器
* 看网页是如何被链接到网站中的：理解超链接
何为无障碍？
======

本文介绍了 Web 无障碍背后的一些基本概念。

|  |  |
| --- | --- |
| 前提： | 无 |
| 目标： | 学习无障碍，了解其重要性。 |

概述
--

由于身体或技术上的限制，你的访客也许无法以像你期望的方式体验网站。本文中，我们给出了无障碍的一般原则，并解释了其中的一些规则。

主动学习
----

*还没有可用的资料，请考虑贡献一个。*

深入探索
----

### 无障碍：一般原则

一开始，我们可能会把无障碍与负面限制联系在一起。这座建筑必须是无障碍的，因此它必须遵守门的宽度、厕所的大小和电梯的位置等规定。

这是对无障碍环境的狭隘理解。应将其视为增强人们能力、服务更多客户的绝佳方式。巴西人能用你的英文网站做什么？使用智能手机的人能够浏览专为大型台式机显示器和无限带宽设计的笨重、杂乱的网站吗？他们会去别的地方。总的来说，*我们必须从所有目标客户的角度来考虑我们的产品*，并做出相应的调整。

### Web 无障碍

在特定的 web 环境中，无障碍意味着任何人都能从你的内容中受益，无论其是否残疾、身处何地、是否有技术限制或其他情况如何。

我们考虑一个视频：

听力障碍

听障人士如何从视频中受益？你需要提供字幕，或者更好的是全文转录。

此外，还要确保人们可以调节音量，以满足他们的独特需求。

视觉障碍

同样，提供用户无需播放视频就能查阅的文字说明和音频描述（描述视频中发生的事情的画外音）。

暂停能力

用户在理解视频中的某人时可能会遇到困难。让他们暂停视频，阅读字幕或处理信息。

键盘能力

让用户以标签方式进入/退出视频、播放视频和暂停视频，而不会被困在视频中。

#### Web 无障碍基础

基本的 Web 无障碍性包括以下几个必要条件：

* 无论何时，只要网站需要图片来表达意思，就应为有视觉障碍或连接速度慢的用户提供替代文字。
* 确保所有用户都能仅通过键盘（如制表键（tab）和回车键）操作图形界面（如展开菜单）。
* 提供明确指定内容语言的属性，以便屏幕阅读器正确阅读文本。
* 确保用户可以只用键盘导航到页面上的所有部件，而不会被困住。（至少让他们可以通过制表键导航）。

而这只是个开始。

### 无障碍的拥护者

自 1999 年以来，W3C (en-US) 一直在运作一个名为 Web Accessibility Initiative (en-US)（WAI）的工作组，通过指南、辅助材料和国际资源来促进无障碍访问。

更多细节
----

请参见：

* 关于无障碍的维基百科文章
* WAI（万维网联盟的网络无障碍倡议）
下一步
---

无障碍会影响网站的设计和技术结构。

* 从设计角度来看，我们建议学习为所有类型的用户设计 (en-US)。
* 如果对技术方面更感兴趣，可以学习如何在网页中嵌入图像。
我该怎样开始设计我的网站？
=============

这篇文章介绍了所有项目最重要的第一步：确定你想要做什么

|  |  |
| --- | --- |
| 前提： | 无 |
| 目标： | 学会设定目标来给自己的 web 项目导航 |

概述
--

当刚开始一个 Web 项目时，大多数人所关心更多是技术方面。当然你必须先能熟练运用各种工具，但是最关键的其实是你想要做出一个怎样的产品。这看上去很简单，但是有很多的项目的失败并不是因为缺少相应的技术水平，而是缺少一个明确的目标。

所以当你有一个想法并且想把它付诸实践的话，在一切启动之前你首先要问一问自己下面这几个问题：

* 我到底想完成什么？
* 网站如何实现我的目标？
* 做什么，以怎样的顺序，才能达成我的目标？

这就是项目构思 (*project ideation*)，这是达成你目标的第一步，无论你是初学者还是经验丰富的开发者。

自主学习
----

*暂时还没有相关内容，请考虑贡献一篇。*

深入探索
----

一个项目永远不应该从技术的一方开始建立。音乐家没办法谱写任何旋律除非他知道他要创作出怎样的歌曲，对于画家、作家、Web 开发者来说同样如此。技术是我们接下来才需要考虑的。

技术显然是重要的。音乐家必须精通他们手中的乐器。但再好的音乐家也不能在没有想法的情况下制作出美妙的音乐。因此，在我们考虑技术 (采用怎样的编程语言和工具) 之前，你首先应该停下来好好想一想关于你想要做出的产品的各种细节。

和朋友们讨论讨论你的想法是一个好的开始，但是光这样还不够。你需要安静地坐下来好好捋一捋你的想法，为了能有一个清晰的思路关于如何实现你的想法。想要做到这些，你只需要一支笔和一张纸并回答下面这些问题。

**备注：** 有数不清的方法来实现你的想法，这里就不一一列举了。（不单独写本书不足以说明它）我们这里只采用一些简单的方法来处理专业人士所谓的 项目想法, 项目计划和项目管理。

### 我到底想完成什么？

这是你需要想清楚的最重要的问题，因为它主导着所有其他的事情。列出你想要达到的所有目标。这个目标可以是任何事情：销售商品来赚钱、发表时政评论......

假设你是一位音乐家，你可能希望：

* 让人们听你的音乐
* 卖糖果
* 拜会其他的音乐家
* 谈论你的音乐
* 通过视频教授音乐
* 将你的爱猫图片发布到互联网
* 找一个男朋友或女朋友

一旦你有了一张如上的表，你需要按照重要性进行排序（从最重要的到最次要的）：

1. 找一个男朋友或女朋友
2. 让人们听你的音乐
3. 谈论你的音乐
4. 拜会其他的音乐家
5. 卖糖果
6. 通过视频教授音乐
7. 将你的爱猫图片发布到互联网

这些简单的步骤（也就是写下目标并进行分类）将在你需要做出重大决定的时候帮助你（比如，我需要植入这些功能吗？需要使用这些服务吗？需要做这些设计吗？）

现在你有了按照重要程度排序的列表，我们进入到下一个问题！

### 网站如何实现我的目标？

现在，你有了一个目录清单，而且你迫切需要一个网站来实现这些目标。你确定吗？

让我们回过头看看我们的例子。我们有 5 个目标和音乐相关，另一个和日常生活相关 (找到你的另一半)，还有一个和这些完全无关：猫的照片。建立一个网站来实现这所有的目标合理吗？甚至是必要的吗？毕竟现有的很多网站服务就能达成你的目标，不需要新建一个网站。

找一个男（女）朋友就是一个很好的例子，体现了使用现有资源比构建一个全新的网站更有意义。为什么呢？因为比起实际去找个男（女）朋友，构建和维护网站将会花费我们更多的时间。既然我们的目标是最重要的，我们应该把我们的精力放在借助已有的工具而不是从头开始。还有，我们有很多可以用来展示相片的 web 服务，所以如果只是为了传播我们的猫咪多么可爱而构建一个新网站，就太不值得在这上面下功夫了。

其他的五个目标都和音乐有关。当然，有许多 web 服务能够达成这些目标，但是在这种情况下构建一个我们自己的专用网站是有意义的。这样的一个网站是***整合***所有我们想要发布在同一个地方的内容的最佳方式（有利于目标 3,5 和 6），而且能促进我们与公众的***互动***（有利于目标 2 和 4）。总之，既然这些目标都围绕着同一个主题，把一切放在一起将帮助我们达成目标，同时帮助我们的读者与我们联系。

那么一个网站如何帮助我达成我的目标呢？通过回答这个问题，你将找到达成目标的最佳方式，同时把自己从白费力气中解救出来。

### 做什么，以怎样的顺序，才能达成我的目标？

现在你知道你想要完成什么，是时候把这些目标变成可行的步骤了。另外我补充一点，你的目标可能会不断变化。在项目的过程中，它们也会随着时间的推移而发生变化，可能是你遇到了意想不到的困难，或者只是改变了你的想法。

与其一个冗长的解释，不如让我们回到如下表格中的例子上：

| 目标 | 要做的事 |
| --- | --- |
| 让人们听到你的音乐 | 1. 录制一段音乐
2. 准备一些可在线使用的音频文件（你能用现有的 Web 服务来实现吗？)
3. 让人们在网站的某个地方听见你的音乐
 |
| 讨论关于你的音乐 | 1. 写下一些文章来开启讨论
2. 明确文章的外观
3. 在网站上发布这些文章（怎么做？）
 |
| 与其他音乐家见面 | 1. 向人们提供你的联系方式 (电子邮件？Facebook? 电话？邮件？)
2. 明确人们怎样从你的网站上找到那些联系方式
 |
| 出售商品 | 1. 创造商品
2. 储存商品
3. 寻找方式解决运输
4. 寻找方式解决支付
5. 在你的网站上建立一个机制让人们能下订单。
 |
| 通过视频教授音乐 | 1. 录制视频课程
2. 让视频文件可以在线观看（再一次，你能否用已经存在的 Web
 服务做到这件事）
3. 让人们在你网站的某个部分访问你的视频。
 |

有两件事需要注意。第一，其中的有些事情和 web 不相关（例如：录制音乐，写文章）。通常这些线下活动比项目的 Web 端更重要。例如，在销售方面，处理供应、付款和发货比建立一个人们可以订购的网站更为重要和耗时。

第二，制定可行的步骤会导致你需要回答新的问题。通常情况下，问题比我们最初想的要多。（例如，我应该学习如何自己做这些，请别人帮我做，或者使用第三方服务？）

总结
--

正如你所看到的，一个最简单的“我想建一个网站”的想法，也会产生一个长长的待办事物清单，并且随着你的想法改变而变得更长，很快你就将会被这些事物所淹没。但是不用担心，不是所有清单上的问题都要得到答案，也不是每一件清单上的事情都需要完成。重要的是你首先要弄清楚目标是什么，以及如何实现它。目标确定之后，你需要决定什么时候以及如何来实现它。将大的目标分成小的，较容易且可控制的目标，逐一实现它们，你就能达成那个在之前看起来是不可能的目标。
测验：无障碍疑难解答
==========

* 上一页
* Overview: Accessibility

在本模块的测验环节中，我们将呈现一个含有若干无障碍问题的简单网站，你需要对它进行诊断并修复这些问题。

|  |  |
| --- | --- |
| 先决条件： | 基础的计算机知识，对 HTML、CSS 和 JavaScript 有基础的理解，理解本课程的前期内容。 |
| 目标： | 测试对无障碍的基础知识的理解情况。 |

开始之前
----

在开始本测验之前，你需要在这里获取包含组成这个例子的 ZIP 压缩文件。将它们解压到一个本地的新文件夹中。

或者，你可以使用 JSBin 或 Glitch 完成你的测验。你可以将 HTML、CSS 和 JavaScript 代码粘贴到这些在线编辑器之一。如果你使用的在线编辑器没有分开的 CSS/JS 面板，则可将它们放置在适当的 `<style>`、`<script>` 元素之下。

最终完成的网页应该类似于这样：

![Screenshot of the finished assessment site with good color contrast. The search input has placeholder text and a submit button that reads go, but no visible label.](/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting/assessment-site-finished.png)

你会看到评估的起始状态的显示有一些差异/问题——这主要是由于标记的不同，这反过来又导致一些样式问题，因为 CSS 没有被正确应用。不要担心——你将在接下来的章节中解决这些问题！

**备注：** 如果你卡住了，就可以寻求帮助——请参阅本页面底部的测验或进一步的帮助章节。

项目简要
----

在这个项目中，你会看到一个虚构的自然网站，展示一篇关于熊的“事实”文章。就目前的情况来看，它有一些无障碍的问题。你的任务是探索现有的网站，并尽可能解决这些问题，回答下面的问题。

### 颜色

目前的配色方案会导致文字难以阅读。你能不能对当前的颜色对比（文字或背景）做一个测试，报告测试结果，然后通过改变指定的颜色来解决这个问题？

### HTML 语义

1. 内容还不够无障碍——试试用屏幕阅读器阅读页面，看看会发生什么。
2. 你能不能更新文章的文字，让屏幕阅读器的使用者更容易浏览？
3. 网站的导航菜单部分（被包裹在 `<div class="nav"></div>` 中）可以通过把它放在一个适当的 HTML 语义元素中而变得更容易访问。它应该被更新为哪一个？请进行更新。

**备注：** 你需要更新 CSS 规则选择器，将标签的样式改为语义标题的适当等价表示形式。一旦添加了段落元素，就会注意到样式看起来好一些了。

### 图片

图片目前对屏幕阅读器用户不可访问，你能修复它吗？

### 音频播放器

1. `<audio>` 播放器对听障人士（聋人）不可访问，你能为这些用户添加无障碍替代品吗？
2. `<audio>` 播放器对不支持 HTML 音频的旧式浏览器不可访问，如何让这些浏览器用户也可以访问到音频资源？
### 表单

1. 顶部的搜索表单中的 `<input>` 元素可以做一个标签，但我们不想添加一个可见的文本标签，这有可能会破坏设计，而且视力正常的用户并不真正需要。怎样才能添加一个只有屏幕阅读器才能访问的标签呢？
2. 评论表单中的两个 `<input>` 元素有可见的文本标签，但它们没有明确地与它们的标签相关联，如何实现这一点？请注意，你也需要更新一些 CSS 规则。
### 显示/隐藏评论控制

显示/隐藏评论控制按钮目前不可由键盘访问。你能让它成为键盘可访问的吗，既可以用 Tab 键聚焦，也可以用回车键激活它？

### 表格

数据表目前还不是很方便——屏幕阅读器用户很难将数据行和列联系在一起，而且该表也没有任何类型的摘要，以使其明确所显示的内容。你能在你的 HTML 中添加一些功能来解决这个问题吗？

### 其他考虑

你能再列举两个能使网站无障碍体验更佳的改进意见吗？

测验或进一步的帮助
---------

如果你需要对你的工作进行评估，或遇见一些问题并想寻求帮助：

1. 将你的工作放置在可分享在线编辑器中，如 CodePen、jsFiddle 或 Glitch。
2. 在 MDN Discourse forum Learning 分类 中撰写帖子，寻求评估或/和帮助。你的帖子应该包含：
    * 一个描述性的标题，例如“Assessment wanted for Accessibility troubleshooting”。
    * 你已经尝试了哪些细节，想让我们做些什么（例如获取帮助，或寻求评估）。
    * 在一个在线可共享的编辑器（例如第 1 步中提到的那些）中，提供你想要评估或需要帮助的例子的链接。这是一个很好的做法，如果你不能看到他们的代码，就很难帮助别人解决编码问题。
    * 一个链接到实际任务或测验页面的链接，通过这个链接我们可以明白你寻求帮助的问题。
* 上一页
* Overview: Accessibility
设计网站外观
======

* 上一页
* Overview: Getting started with the web
* 下一页

本文将讲述在编写网站代码之前，需要进行什么样的规划和设计工作，包括“网站提供哪些信息？”、“用哪些字体和颜色？”、“网站是做什么的？”等。

第一步：计划
------

做任何事情之前，都要先有一些想法。你的网站到底是做什么的？一个网站基本上可以做任何事情，但对于第一个网站来说，最好简单一些。我们将从创建一个简单网页开始，它包含一个标题、一张图片和几个段落。

首先，请考虑以下问题：

1. **网站的主题是什么**？你喜欢狗、上海、还是吃豆人？
2. **基于所选主题要展示哪些信息**？写下标题和几段文字，再找个你想在网站上展示的图像。
3. 背景颜色用什么，或者，用高级一点的话来说，**你的网站外观是什么样的**？使用哪种字体比较合适：正式的、卡通的、粗体还是瘦体？

**备注：** 复杂的网站需要更详细的指引，深入到颜色、字体、页面上元素的间距、适当的书写风格等等以及其他细节。这有时被称为设计指南、设计系统或品牌手册，可以在 Firefox Photon 设计系统中找到一个示例。

绘制草图
----

接下来，拿起笔和纸，大致勾勒出你所希望的网站样子。当然，这个简单的网页不需要太复杂的草图，但你现在应该养成这样做的习惯。画草图很有用——并且不需要梵高的手法！

![画在纸上的一个粗略的网站草图](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png)

**备注：** 即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。

Web 团队通常包括一个平面设计师和一个用户体验（UX）设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验及与网站交互方面的问题。

选定素材
----

此时，就可以开始组织网页上的内容了。

### 文本

准备好刚才撰写的标题和文字。把这些东西放到旁边。

### 主题颜色

使用色彩选择器挑选心仪的颜色。当选中某种颜色时，会显示一个六位神秘代码，类似于 `#660066`。它是一个*十六进制数*，用于表示颜色。将其复制并暂存。

![MDN 网站上的颜色选择器，包含 RGB、HSL、HEX 格式](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/color-picker.png)

### 图像

访问 Google 图片搜索 来搜索合适的图片。

1. 当找到你想要的图像时，点击该图像以获得其放大的视图。
2. 右键单击图像（Mac 上为 Ctrl + 单击），选择*将图像另存为...*，并选择一个可靠的位置来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。

![Google 图片搜索中的搜索结果](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images.png)

请注意，网络上的大多数图片，包括谷歌图像中的图片，都是有版权的。为了减少侵权的可能性，可以使用谷歌的许可证过滤器。点击*工具*按钮，然后点击下面出现的*使用权限*选项。你应该选择*知识共享许可*这个选项。

![经知识共享许可过滤后的 Google 图片搜索结果](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/updated-google-images-licensing.png)

### 字体

和图片一样，很多字体都受版权保护，也就是说，你不可以在你的网站上随意使用它们。Google Fonts 是 Google 旗下的网络服务，提供了许多字体许可。

选好字体后，你有两种方式使用它：

1. 在你的代码中添加一个引用，从 Google 服务器加载这个字体。
2. 下载字体文件到你的系统内，自行挂载这个文件，并在你网站的代码中使用。

**备注：** 在你的网站使用从 Google 服务器加载的字体可能会违反欧盟的数据隐私规定 GDPR，因为加载字体时会暴露用户的 IP 地址。如果你遇到这种潜在风险，需要选择第二种方式。

另一个选择是使用 安全 Web 字体，如 Arial、Times New Roman、Courier New。

* 上一页
* Overview: Getting started with the web
* 下一页
安装基础软件
======

* Overview: Getting started with the web
* 下一页

在*安装基础软件*中，我们向你展示了进行简单的 Web 开发需要哪些工具，以及如何正确安装它们。

专业人士使用什么工具？
-----------

* **计算机**。也许这对一些人来说听起来习以为常，但你们中的一些人正在使用手机或图书馆的电脑阅读这篇文章。对于重度的 Web 开发，最好购买一台运行 Windows、macOS 或 Linux 的台式机或笔记本电脑。
* **文本编辑器**，用来写代码。可以是一个文本编辑器（如 Visual Studio Code、Sublime Text、Atom 、GNU Emacs 或者 VIM ），或一个混合编辑器（ Dreamweaver 或 WebStorm）。Office 文档不适合这种用途，因为它们依赖隐藏的元素，会干扰网络浏览器使用的渲染引擎。
* **网络浏览器**，用以测试代码。目前，最常用的浏览器是 Firefox 、Chrome、Opera、Safari、Internet Explorer 和 Microsoft Edge。你还应该测试你的网站在移动设备和你的目标受众可能仍在使用的任何旧浏览器（如 IE 8-10）上的表现。Lynx，一个基于文本的终端网络浏览器，对于查看视力障碍用户对你的网站的体验是非常好的。
* **图形编辑器**，如 GIMP 、Figma 、Paint.NET 、Photoshop 、Sketch 或 XD ，为你的网页制作图像或图形。
* **版本控制系统**，用来管理服务器上的文件，与团队合作开展项目，共享代码和资产，避免编辑冲突。现在，Git 是最流行的版本控制系统，还有 GitHub 或 GitLab 托管服务。
* **FTP 工具**，老式 Web 托管账户，以管理服务器上的文件（Git 正越来越多地取代 FTP 用于此目的）。有大量的 (S)FTP 程序可用，包括 Cyberduck、Fetch 和 FileZilla。
* **自动化构建工具**，如 Webpack 、Grunt 或 Gulp ，以自动执行重复性任务，如简化代码和运行测试。
* 库、框架等，以加快编写常用功能。一个库往往是一个现有的 JavaScript 或 CSS 文件，它提供了现成的功能，供你在代码中使用。框架则更进一步，为你提供一个完整的系统和一些自定义的语法，让你在上面写一个 Web 应用。
* 此外还有更多的工具！
现在，我究竟需要什么工具？
-------------

这看起来是一个冗长的清单，但幸运的是，你可以在不了解这些东西的情况下开始进行 Web 开发。在这篇文章中，我们只为你准备了最基本的东西——一个文本编辑器和一些现代网络浏览器。

### 安装文本编辑器

你的电脑上可能已经有一个基本的文本编辑器。默认情况下，Windows 是 Notepad ，macOS 则有 TextEdit。Linux 发行版有所不同；Ubuntu 下是 gedit 。

对于 Web 开发，你可能可以做得比记事本或 TextEdit 更好。我们建议从 Visual Studio Code 开始，它是一个免费的编辑器，提供实时预览和代码提示。

### 安装现代网络浏览器

现在，我们将安装几个桌面网络浏览器来测试我们的代码。在下面选择你的操作系统，然后点击相关链接，下载你喜欢的浏览器：

* Linux：Firefox 、Chrome 、Opera 、Brave.
* Windows：Firefox 、Chrome 、Opera 、Internet Explorer 、Microsoft Edge 、Brave （Windows 10 默认带有 Edge；如果你有 Windows 7 或以上版本，你可以安装 Internet Explorer 11；否则，你应该安装一个替代浏览器）。
* macOS：Firefox 、Chrome 、Opera 、Safari 、Brave （macOS 和 iOS 默认带有 Safari 浏览器）。

在继续之前，你应该至少安装两款这样的浏览器，并准备好进行测试。

**备注：** Internet Explorer 与一些现代网络功能不兼容，它可能无法运行你的项目。你通常不需要为你的 Web 项目与它兼容而操心，因为很少还有人在使用它——至少在你学习的时候不要太担心它。你可能会在以后遇到一个需要支持它的项目。

### 安装本地 Web 服务器

有些例子需要通过 Web 服务器才能成功运行。你可以在这找到该怎么做如何设置本地测试服务器？

* Overview: Getting started with the web
* 下一页