软件包管理基础 - 学习 Web 开发

软件包管理基础
=======

* 上一页
* Overview: Understanding client-side tools
* 下一页

在本文中，我们将详细介绍软件包管理器，以了解我们如何在自己的项目中使用它们——安装项目工具依赖项，使其保持最新状态等。

|  |  |
| --- | --- |
| 预备条件： |
 熟悉核心的 HTML、CSS 和
 JavaScript 语言。
  |
| 目标： | 了解什么是软件包管理器和软件包存储库，为什么需要它们，以及如何使用它们的基础知识。 |

项目中的依赖项
-------

**依赖**是指可能由他人编写的第三方软件，理想情况下能够为你解决单一的问题。一个 Web 项目可以有任意数量的依赖，从无到多，并且你的依赖里可以包含了你没有明确安装的子依赖——你的依赖可能也有它们自己的依赖。

这里有一个可以展示依赖的好处的简单示例：你的项目可能需要实现将相对日期转换为人类可读的文本。你当然可以自己编写代码来实现这个功能，但是很有可能其他人已经解决了这个问题——为什么要浪费时间重复造轮子呢？何况，一个可靠的第三方依赖很可能在许多不同情况下进行了测试，使其对比你自己的解决方案具有更好的健壮性和浏览器兼容性。

项目依赖可以是整个 JavaScript 库或框架——例如 React 或者 Vue，也可以是非常小的工具库，比如我们的人类易读日期库，它也可以是一个命令行工具，例如我们之前文章中提到的 Prettier 或 ESLint。

没有现代构建工具，像这样的依赖项可能会使用简单的 `<script>` 元素包含在你的项目中，但这可能无法直接使用，并且当它们在 Web 上发布时，你可能需要一些现代工具来将你的代码和依赖项构建为捆绑包（Bundle）在一起。捆绑包（Bundle）是一个术语，通常用于指代一个单独的文件，它包含了你软件的所有 JavaScript——通常被尽可能压缩以减少下载和在访问者浏览器中显示软件所需的时间。

此外，如果你发现一个更好的工具来代替当前工具，或者你想更新依赖的新版本，会发生什么？对于只有几个依赖的项目来说来说，这并不痛苦，但对于具有许多依赖项的大型项目来说，这种事情可能会变得非常具有挑战性。这令使用像 npm 这样的**软件包管理器**更有意义，因为它将确保代码被干净地添加和删除，同时还有许多其他优点。

什么是软件包管理器？
----------

我们已经对 npm 有所了解，但是就 npm 本身而言，软件包管理器是一个可以管理你的项目依赖项的系统。

软件包管理器提供一种方法来安装新的依赖（也称为“包”），管理包在文件系统上的存储位置，并为你提供发布自己的包的功能。

理论上，你可以手动下载和存储项目依赖项，因此软件包管理器是非必须的，但软件包管理器可以帮助你无缝处理安装和卸载包。如果不使用软件包管理器，你将需要手动处理以下工作：

* 找到所有包正确的 Javascript 文件
* 对它们进行检查以确保没有任何已知的漏洞
* 下载它们井将它们放在项目的正确位置
* 编写代码，将包引入你的项目并使用它们（这通常使用 JavaScript 模块完成，这是另一个值得深入了解的主题）。
* 对所有包子依赖项——可能有数十个或数百个，执行上述相同的操作。
* 如果你想删除这些软件包，则需要再次手动删除所有文件。

此外，软件包管理器处理重复的依赖项（这在前端开发中非常重要和常见）。

在使用 npm（以及基于 Javascript 和 Node 的软件包管理器）的情况下，你有两个选项来安装依赖项。正如我们在上一篇文章中提到的，依赖项可以全局安装或安装到你的项目。虽然全局安装通常有更多的优点，但安装到本地的优点更重要，例如提高代码可移植性和锁定依赖版本。

例如，如果你的项目依赖于具有特定配置的 Webpack，你需要确保在其他机器上安装该项目或在很久以后返回该项目，该配置仍将起作用。如果安装了不同版本的 Webpack，则可能不兼容。为了缓解这种情况，将依赖项安装到项目的本地是一个很好的选择。

要看到本地依赖项真正发挥作用，你只需要尝试下载并运行现有项目——如果它能正常工作并且所有依赖项都可以直接使用，这要归功于本地依赖项的可移植性。

**备注：** npm 不是唯一可用的软件包管理器。有一种成功和流行的替代软件包管理器是 Yarn。Yarn 使用不同的算法解决依赖项，这可能意味着更快的用户体验。还有一些其他新兴的客户端，例如 pnpm。

软件包仓库
-----

为了使软件包管理器工作，它需要知道从哪里安装软件包，这是通过软件包仓库实现的。仓库是实现软件包发布和安装的关键部份。npm 作为一个软件包管理器，同时也是 JavaScript 软件包最常用的软件包仓库。npm 仓库位于 npmjs.com。

npm 不是唯一的选择。你可以管理自己的软件包仓库——诸如 Microsoft Azure 等产品允许你创建到 npm 仓库的代理（因此可以覆盖或锁定某些软件包），GitHub 也提供软件包仓库服务，随着时间的推移，可能会出现更多的选择。

重要的是，确保你选择了最适合你的仓库。许多项目将使用 npm，在本模块的其余部分中，我们将继续使用 npm 作为示例。

使用软件包生态系统
---------

让我们通过一个示例来介绍如何使用软件包管理器和仓库来安装命令行实用程序。

Parcel 是开发人员在开发过程中常用的另一个工具。Parcel 聪明之处在于它可以监视我们的代码内容以查找对依赖项的调用，并自动安装我们的代码所需的任何依赖项。它还可以自动构建我们的代码。

### 创建一个 npm 包应用

首先，创建一个新目录来存储我们的实验应用，选一个合适的地方便于你可以再找到它。我们将其称为 `parcel-experiment`，但你可以随意更改：

```bash
mkdir parcel-experiment
cd parcel-experiment
```

接下来，让我们将我们的应用初始化为 npm 包，这将创建一个配置文件 `package.json`，使我们可以保存配置详细信息，以防我们以后想要重新创建此环境，甚至将软件包发布到 npm 仓库（虽然这超出了本文的范围）。

确保你在 `parcel-experiment` 目录中，然后输入以下命令：

```bash
npm init
```

你现在将被要求回答一些问题；npm 将根据答案创建一个默认的 `package.json` 文件：

* `name`：用于标识应用的名称。只需按下 `Return` 接受默认值 `parcel-experiment`。
* `version`：应用的起始版本号。同样，只需按下 `Return` 接受默认值 `1.0.0`。
* `description`：应用目的的简要描述。输入一些非常简单的东西，例如“一个简单的 npm 包，用于学习使用 npm”，然后按下 `Return`。
* `entry point`：这将是应用的入口 JavaScript 文件。默认的 `index.js` 对这个实验项目是可以的——按下 `Return`。
* `test command`、`git repository` 和 `keywords`：按下 `Return` 以将它们暂时留空。
* `author`：项目的作者。输入你自己的姓名，然后按下 `Return`。
* `license`：要发布软件包的许可证。按下 `Return` 来接受默认值。

按下 `Return` 一次以接受这些设置。

进入你的 `parcel-experiment` 目录，现在你应该会发现有一个 `package.json` 文件。打开它，它应该看起来像这样：

```json
{
  "name": "parcel-experiment",
  "version": "1.0.0",
  "description": "A simple npm package to learn about using npm",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Chris Mills",
  "license": "ISC"
}
```

这是定义你的软件包的配置文件。目前为止都很好，所以我们继续。

### 安装 Parcel

运行以下命令以在本地安装 Parcel：

```bash
npm install parcel-bundler
```

一旦完成了*所有准备工作*，我们现在准备进行一些“现代客户端开发”（这实际上意味着使用构建工具使开发人员的体验更加轻松）。但是首先，请再次查看你的 package.json 文件。你将看到 npm 添加了一个新字段——dependencies：

```json
"dependencies": {
  "parcel-bundler": "^1.12.4"
}
```

这是 npm 的一部分魔法——如果将来你将代码库移动到另一个位置或另一台计算机上，则可以通过运行 `npm install` 命令重新创建相同的设置，npm 将检查依赖项并为你安装它们。

缺点是 Parcel 仅在我们的 `parcel-experiment` 项目中可用；你将无法在不同的目录中运行它。但是优点大于缺点。

### 设置我们的示例程序

好的，让我们继续。

Parcel 希望有一个 `index.html` 和一个 `index.js` 文件进行处理，除此之外，它对于你如何构建项目没有其他意见。其他工具可能非常不同，但至少 Parcel 使我们这个入门实验变得容易。

现在，我们需要在我们的工作目录中添加一个 `index.html` 文件。在你的测试目录中创建 `index.html`，并写入以下内容：

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
```

接下来，我们需要在与 `index.html` 相同的目录中添加一个 `index.js` 文件。现在，`index.js` 可以为空，只需存在即可。现在创建这个文件。

### 尝试使用 Parcel

现在，我们将运行我们新安装的 Parcel 工具。在终端中运行以下命令：

```bash
 parcel index.html
```

你应该会在终端中看到类似这样的内容：

```bash
Server running at http://localhost:1234
✨  Built in 193ms.
```

**备注：** 如果终端返回“未找到命令”类型错误，请尝试使用 `npx` 运行上面的命令，例如：`npx parcel index.html`。

现在，我们可以试着享受完整的 JavaScript 包生态系统的好处。首先，现在有一个本地 Web 服务器运行在 `http://localhost:1234`。现在前往该网址，你现在可能不会看到任何内容，但是很酷的是，当你对代码进行更改时，Parcel 将在后台自动重新构建并刷新服务器，以便你可以立即看到更新的效果。

现在来添加一些页面内容。假设我们想要显示易于理解的相对日期，例如“2 小时前”，“4 天前”等。`date-fns` 包的 `formatDistanceToNow()` 方法非常适合此用途（也有其他包提供相同的功能）。

在 `index.js` 文件中添加一下代码并保存：

```js
import { formatDistanceToNow } from "date-fns";

const date = "1996-09-13 10:00:00";
document.body.textContent = `${formatDistanceToNow(new Date(date))} ago`;
```

回到 `http://localhost:1234`，你将看到作者成年已经多久了。

上面代码的特别之处在于，它使用了 `date-fns` 包中的 `formatDistanceToNow()` 函数，而我们并没有手动安装这个包！Parcel 发现你需要这个模块，因此在 `npmjs.com` 仓库中搜索并自动为我们本地安装了它。你可以通过再次查看 `package.json` 文件来证明这一点——你将看到 `dependencies` 字段已经为我们更新了：

```json
"dependencies": {
  "date-fns": "^2.12.0",
  "parcel-bundler": "^1.12.4"
}
```

Parcel 还添加了所需的文件，以便其他人可以接手这个项目并安装我们使用的任何依赖项。如果你查看运行 `parcel` 命令的目录，你将找到许多新文件；其中最有趣的是：

* `node_modules`：Parcel 和 date-fns 的依赖文件。
* `dist`：发布目录——这些是 Parcel 自动生成的打包和压缩文件，它们是 `localhost:1234` 提供的文件。这些是你在将网站发布到公共网络时上传到 Web 服务器的文件。

只要我们知道包的名称，我们就可以在代码中使用它，Parcel 会自动去获取并安装（实际上是“复制”）该包到我们的本地目录（在 `node_modules` 下）。

### 为生产环境构建我们的代码

然而，此代码还没有准备好用于生产环境。大多数构建工具系统都有“开发模式”和“生产模式”。重要的区别在于，在最终网站中不需要很多你在开发中使用的有用功能，因此这些功能将在生产环境中被剥离，例如“模块热替换”、“实时重新加载”和“未压缩和注释的源代码”。虽然远非穷尽，但这些都是常见的 Web 开发功能，在开发阶段非常有用，但在生产中它们并不是很有用。在生产中，它们只会令你的网站变得臃肿。

现在使用 `Ctrl` + `C` 停止之前的 Parcel 命令。

我们现在可以为我们的最简示例站点的虚拟部署进行准备。Parcel 提供了一个额外的命令来生成适合发布的文件，使用 `build` 选项生成捆绑包（前面提到过）。

运行以下命令：

```bash
parcel build index.html
```

你应该看到类似的输出：

```bash
✨  Built in 9.35s.

dist/my-project.fb76efcf.js.map    648.58 KB     64ms
dist/my-project.fb76efcf.js        195.74 KB    8.43s
dist/index.html                        288 B    806ms
```

同样，我们的构建产物在 `dist` 目录。

### 减小应用的文件大小

然而，与所有“帮助”开发人员的工具一样，通常有得必有失。在这个例子中，是文件体积。JavaScript 捆绑包 `my-project.fb76efcf.js` 大小为 195K，非常大，考虑到它只是打印一行文本。当然，还有一些计算的功能，但我们绝对不需要 195K 的 JavaScript 来完成这项工作！

当你使用开发工具时，值得质疑它们是否为你做了正确的事情。在这种情况下，捆绑包的大小接近 200K，因为它实际上包含了整个 `date-fns` 库，而不仅仅是我们要使用的函数。

如果我们避免使用任何开发工具，并用 `<script src="">` 加载托管的 `date-fns` 库，那么大致相同的事情将会发生——当我们的示例页面在浏览器中加载时，将会下载整个库。

然而，这就是开发工具大放异彩的地方。当它在我们的计算机上运行时，我们可以要求软件检查我们对代码的使用，并在构建中仅包含我们实际使用的函数——这个过程称为“摇树优化（Tree Shaking）”。

这非常有意义，因为我们希望减小文件大小，从而使我们的应用程序尽可能快地加载。不同的工具将以不同的方式让你进行摇树优化。

虽然可用的工具的发展日新月异，但有三个主要的打包工具可以将我们的源代码构建为捆绑包：Webpack、Rollup 和 Parcel。可能会有更多其他的工具，但这些是比较流行的：

* RollUp 工具提供摇树优化和代码拆分作为其核心特性。
* Webpack 需要“一些”配置（尽管“一些”可能低估了一些开发人员的 Webpack 配置的复杂性）。
* 在 Parcel（Parcel 2 之前）的情况下，需要一个特殊的标志——`--experimental-scope-hoisting`——来进行摇树优化构建。

让我们暂时继续使用 Parcel，因为我们已经安装了它。尝试运行以下命令：

```bash
parcel build index.html --experimental-scope-hoisting
```

你会发现这次有很大的不同：

```bash
✨  Built in 7.87s.

dist/my-project.86f8a5fc.js    10.34 KB    7.17s
dist/index.html                   288 B    753ms
```

现在捆绑包大小约为 10K。看起来好多了。

如果我们将此项目发布到服务器上，我们只需发布 `dist` 文件夹中的文件。Parcel 已自动处理了所有文件名更改。我们建议你查看 `dist/index.html` 中的源代码，以便你可以看到 Parcel 已自动执行的更改。

**备注：** 在撰写本文时，Parcel 2 尚未发布。但是，当它发布时，这些命令仍将有效，因为 Parcel 的作者已经聪明地将旧版本的 Parcel 重新命名。要安装 Parcel 1.x，你必须安装 `parcel-bundler`，而 Parcel 2.x 被称为 `parcel`。

现在有很多工具可用，JavaScript 软件包生态系统正在以前所未有的速度增长，这有利有弊。不断进行改进，选择，无论是好是坏，都在不断增加。面对眼花缭乱的工具选择，可能最重要的一课是了解你选择的工具能够做什么。

包管理器客户端的简要指南
------------

本教程使用 npm 安装了 Parcel 包，但正如之前提到的，还有其他一些选择。至少知道它们的存在并对常见命令有一定的概念是值得的。你已经在之前的过程中见过其中一些，但让我们看看其他的。

该列表会随着时间的推移而增加，但在撰写本文时，可以使用以下主要包管理器：

* npm 详见 npmjs.org
* pnpm 详见 pnpm.js.org
* Yarn 详见 yarnpkg.com

从命令行的角度来看，npm 和 pnpm 非常相似——实际上，pnpm 旨在提供与 npm 完全相同的参数选项。它们的不同之处在于，pnpm 使用不同的方法在计算机上下载和存储软件包，以减少总磁盘空间的占用。

在下面的示例中，如果原先使用 npm，可以将其替换为 pnpm，命令仍然可以正常工作。

相比较 npm 而言，Yarn 在安装过程中通常被认为更快（尽管结果可能会有所不同）。这对开发人员很重要，因为等待依赖项安装（并复制到计算机）可能需要相当长的时间。

**备注：** 虽然 npm 包管理器与 npm 仓库共享相同的名称，但不需要使用 npm 包管理器来从 npm 仓库安装软件包。pnpm 和 Yarn 可以使用与 npm 相同的 `package.json` 格式，并且可以安装来自 npm 和其他软件包仓库的任何软件包。

接下来，让我们回顾一下你可能需要使用包管理器执行的常见操作。

### 初始化一个项目

```bash
npm init
yarn init
```

如上所示，这将提示你完成一系列问题来描述你的项目（名称、许可证、描述等），然后为你生成一个 `package.json` 文件，其中包含有关你的项目及其依赖项的元信息。

### 安装依赖

```bash
npm install date-fns
yarn add date-fns
```

我们之前还看到了 `install` 的操作。它将 `date-fns` 软件包及其所有依赖项直接添加到工作目录下的名为 `node_modules` 的子目录中。

默认情况下，此命令将安装 `date-fns` 的最新版本，但你也可以进行控制。你可以尝试安装 `date-fns@1`，这将为你提供最新的 1.x 版本（目前为 1.30.1）。或者你可以尝试安装 `date-fns@^2.3.0`，这意味着安装 2.3.0 之后或包括 2.3.0 的最新版本（在撰写本文时为 2.8.1）。

### 更新依赖

```bash
npm update
yarn upgrade
```

此命令将查看当前安装的依赖项并更新它们（如果有可用的更新），更新的范围由软件包中指定的版本号来确定。

范围由依赖项版本号中的符号指定，例如 `date-fns@^2.0.1`——在这种情况下，插入符号 `^` 表示所有的次要版本和补丁版本，从 2.0.1 开始一直到 3.0.0 之前。

版本号的确定是通过名为 semver 的系统实现的。从文档中看起来可能有些复杂，但是只考虑摘要信息并将版本表示为 `MAJOR.MINOR.PATCH`，例如 2.0.1 表示主版本 2 和补丁版本 1，可以简化这个系统。一个测试 semver 值的绝佳方法是使用 semver 计算器。

请记住，`npm update` 不会将依赖项升级到超出 `package.json` 中限定的范围——要执行此操作，你需要专门安装那个版本。

### 漏洞审查

```bash
npm audit
yarn audit
```

这个命令将检查你项目的所有依赖树，并使用漏洞数据库检查你正在使用的特定版本，如果你的项目中存在潜在的漏洞包，则会通知你。

想要了解有关漏洞的更多信息，可以参考 Snyk 项目，该项目涵盖了 JavaScript 软件包和其他编程语言。

### 检查一个依赖

```bash
npm ls date-fns
yarn why date-fns
```

这个命令将显示已安装的依赖项的版本以及它如何被包含在你的项目中。可能有另一个顶级软件包引入了 `date-fns`，同样可能（并且不理想）的是，你的项目中有多个版本的软件包（这在使用 Lodash 软件包时经常出现，因为它太有用了）。

尽管包管理器将尽最大努力对软件包进行去重，但你可能需要调查确切安装了哪个版本。

### 更多命令

你可以在网上了解有关 npm 和 yarn 的每个命令的详细信息。同样，pnpm 命令与 npm 具有相同的功能，但还添加了一些额外的命令。

创建自己的命令
-------

软件包管理器还支持创建自己的命令并从命令行执行它们。例如，我们可以创建以下命令：

```bash
npm run dev
# 或 yarn run dev
```

这将运行一个自定义脚本来以“开发模式”来启动我们的项目。实际上，在所有项目中我们都会包含这个命令，因为本地开发环境通常与在生产环境中运行的方式略有不同。

如果你尝试在之前的 Parcel 测试项目中运行此命令，它将可能会报告“dev 脚本丢失”。这是因为 npm、Yarn（或者其他类似的包管理器）会去查找 `package.json` 文件中 `scripts` 属性下的一个名为 `dev` 的属性。

Parcel 可以使用 `parcel serve filename.html` 命令运行开发服务器，我们希望在开发过程中经常使用它。

因此，让我们在 `package.json` 中创建一个自定义缩写命令——“dev”。

如果你按照之前的教程操作，你应该在 parcel-experiment 目录中有一个 `package.json` 文件。打开它，它的 `sripts` 应该如下所示：

```json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
},
```

更新它，使其看起来像这样，并保存文件：

```json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "parcel serve index.html"
},
```

我们已经将自定义的 `dev` 命令添加为 npm 脚本命令。

现在在终端中尝试运行以下命令，确保你在 `parcel-experiment` 目录中：

```bash
 npm run dev
```

这将启动 Parcel 并在本地开发服务器上提供你的 `index.html` ，就像我们之前看到的一样：

```bash
Server running at http://localhost:1234
✨  Built in 5.48s.
```

此外，npm（和 yarn）命令非常智能，它们会在尝试通过传统方法查找命令行工具之前，先搜索项目中本地安装的工具（计算机通常会存储和允许查找软件）。你可以了解有关 `run` 命令的技术细节，尽管在大多数情况下，你自己的脚本都可以正常运行。

你可以在 `scripts` 属性中添加各种有助于完成工作的内容。我们肯定会这样做，其他人也这样做。

总结
--

这就是我们对软件包管理器的介绍。接下来，我们将构建一个示例工具链，将我们到目前为止学到的所有知识付诸实践。

* 上一页
* Overview: Understanding client-side tools
* 下一页
参考资料
----

* npm scripts 参考
* package.json 参考


命令行速成课 - 学习 Web 开发

命令行速成课
======

* 上一页
* Overview: Understanding client-side tools
* 下一页

在你的开发过程中，你无疑需要在终端上运行一些命令 (或者在“命令行”上，它们实际上是相同的)。本文介绍了终端、需要输入的基本命令、如何将命令链接在一起，以及如何添加自己的命令行接口 (CLI) 工具。

|  |  |
| --- | --- |
| 预备条件： |
 熟悉核心的 HTML,
 CSS, 和
 JavaScript 语言。
  |
| 目标： | 要了解什么是终端/命令行，应该学习什么基本命令，以及如何安装新的命令行工具。 |

欢迎使用终端
------

终端是一个文本界面，用于执行基于文本的程序。如果你正在运行任何用于 web 开发的工具，那么几乎可以保证你必须打开命令行并运行一些命令来使用你所选择的工具 (你经常会看到这样的工具被称为**CLI 工具**命令行接口工具)。

大量的工具可以通过在命令行中输入命令来使用;许多是预先安装在你的系统上的，还有大量其他的可以从包注册表中安装。包注册表类似于应用程序商店，但 (主要) 用于基于命令行的工具和软件。我们将在本章后面看到如何安装一些工具，在下一章我们将学习更多关于包注册表的知识。

对命令行最大的一个批评是它在用户体验方面非常缺乏。第一次查看命令行可能是一种令人畏惧的体验：空白屏幕和闪烁的光标，对于要做什么几乎没有明显的帮助。

表面上看，它们并不受欢迎，但你可以使用它们做很多事情，我们保证，通过一些指导和练习，使用它们会变得更容易！这就是为什么我们提供这一章来帮助你在这个看似不友好的环境中开始。

### 终端从何而来？

终端机起源于 20 世纪五六十年代，它最初的形式与我们今天使用的并不相似 (这是我们应该感谢的)。你可以在维基百科的词条中读到一些历史 Computer Terminal。

从那时起，终端一直是所有操作系统的一个不变的特征，从台式电脑到隐藏在云中的服务器 (它并不是真正的云)，到像树莓 PI Zero 这样的微型计算机，甚至到移动电话。它提供了对计算机底层文件系统和底层特性的直接访问，因此，如果你知道自己在做什么，它对于快速执行复杂任务非常有用。

例如，编写一个命令来立即更新数百个文件的标题，例如从 ch01-xxxx.png 更新到 ch02-xxxx.png，这对于自动化也很有用。如果你使用 finder 或 explorer GUI 应用程序更新文件名，这将花费你很长时间。

总而言之，终端不会很快消失。

### 终端像什么呢？

下面你可以看到一些不同口味的程序，你可以得到一个终端。

下面的图片显示了 Windows 中可用的命令提示，有很多种选项，从“cmd”程序到“powershell”，可以在开始菜单中输入程序名称运行。

![A vanilla windows cmd line window, and a windows powershell window](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line/win-terminals.png)

下面是 macOS 终端应用程序。

![A basic vanilla mac terminal](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line/mac-terminal.png)

### 你如何进入终端？

现在许多开发人员都在使用基于 unix 的工具 (例如，终端，以及你可以通过它访问的工具)。目前 web 上存在的许多教程和工具都支持 (可悲的是假定) 基于 unix 的系统，但不用担心它们在大多数系统上都可用。在本节中，我们将了解如何访问所选系统上的终端。

#### Linux/Unix

如上所述，Linux / Unix 系统默认情况下在应用程序中列出了一个可用的终端。

#### macOS

macOS 有一个名为 Darwin 的系统，它位于图形用户界面的下方。Darwin 是类 unix 系统，它提供了终端和对底层工具的访问。macOS Darwin 在很大程度上与 Unix 不相上下，当然在阅读本文时不会给我们带来任何担忧。

终端可在 macOS 的“应用程序/实用程序/终端”上使用。

#### Windows

与其他一些编程工具一样，在 Windows 上使用终端 (或命令行) 传统上并不像在其他操作系统上那样简单。但情况正在好转。

很长一段时间以来，Windows 一直有自己的名为 cmd(命令提示符) 的类似于终端的程序，但这显然与 Unix 命令不同，它相当于老式的 Windows DOS 提示符。

更好的程序可以在 Windows 上提供终端体验，比如 Powershell (see here to find installers), 和 Gitbash (作为一部分 git for Windows 工具箱)

然而，在现代，Windows 的最佳选择是 Windows Linux 子系统 (WSL)，它是一个兼容层，用于从 Windows 10 中直接运行 Linux 操作系统，允许你直接在 Windows 上运行真正的终端，而不需要虚拟机。

这可以直接从 Windows 商店免费安装。在目录中可以找到所需的所有文档 Windows Subsystem for Linux Documentation.

![a screenshot of the windows subsystem for linux documentation](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line/wsl.png)

至于在 Windows 上选择什么选项，我们强烈建议尝试安装 WSL。你可以坚持使用默认的命令提示符 (cmd)，许多工具都可以正常工作，但是你会发现，如果与 Unix 工具具有更好的一致性，那么一切都会变得更容易。

#### 边注：命令行和终端的区别是什么？

通常你会发现这两个术语可以互换使用。从技术上讲，终端是启动并连接到 shell 的软件。shell 是你的会话和会话环境 (提示符和快捷方式等内容可以在其中定制)。命令行是你输入命令并且光标闪烁的文字行。

### 你*必须*使用终端吗

尽管命令行提供了大量的工具，但是如果你使用的工具是这样像 Visual Studio Code

还有大量的扩展可以作为代理使用终端命令，而不需要直接使用终端。但是，你不会找到一个代码编辑器扩展来满足你想要做的所有事情 — 你最终将会获得一些使用终端的经验。

基本的内置终端命令
---------

说的够多了，让我们开始看看一些终端命令吧！下面是命令行可以做的一些事情，以及每种情况下相关工具的名称

* 导航计算机的文件系统以及基本级别的任务，如创建、复制、重命名和删除：
    + 移动你的目录结构 : `cd`
    + 建立目录：`mkdir`
    + 创建文件（修改他们的原数据）: `touch`
    + 复制文件：`cp`
    + 移动文件：`mv`
    + 删除文件或目录：`rm`
* 下载在特定的 url 找到的文件：`curl`
* 在较大的文件体中寻找特定的片段：`grep`
* 主页查看文件的内容：`less`, `cat`
* 操作和转换文本流（例如，将 HTML 文件中 `<div>` 的所有实例改为 `<article>`）：`awk`、`tr`、`sed`

**备注：** 在 web 上有许多很好的教程深入了解 web 上的命令行——这只是一个简短的介绍

让我们继续，看看在命令行上使用这些工具中的几个。在进一步操作之前，先打开终端程序

### 在命令行中导航

当你访问命令行时，你将不可避免地需要导航到一个特定的目录“做一些事情”。所有的操作系统 (假设是默认设置) 都将在你的“home”目录中启动它们的终端程序，从那里你可能想要移动到另一个地方。

`cd` 命令允许你更改目录。从技术上讲，cd 不是一个程序，而是内置的。这意味着你的操作系统可以开箱即用地提供它，而且你也不会意外地删除它，感谢上帝！你不需要过多地担心某个命令是否是内置的，但是要记住，内置的命令会在所有基于 unix 的系统上出现。

要更改目录，请在终端中键入 cd，然后输入要移动到的目录。假设该目录在你的主目录中，你可以使用 `cd Desktop` (请参见下面的屏幕截图).

![results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line/win-terminals-cd.png)

试着把这个输入到你的系统终端

```bash
cd Desktop
```

如果你想回到上一个目录，你可以使用两个点

```bash
cd ..
```

**备注：** 一个非常有用的终端快捷方式是使用`tab` 键自动完成你知道的名字，而不是必须键入整个东西。例如，在键入以上两个命令后，尝试键入 `cd D` 并按下`tab` — 它应该自动完成目录名称 `Desktop` 对于你，只要它存在于当前目录中。在你前进的过程中记住这一点。

如果要转到的目录嵌套得很深，则需要知道访问该目录的路径。当你更加熟悉文件系统的结构时，这通常会变得更容易，但是如果你不确定路径，通常可以使用 ls 命令（请参见下文）的组合并在其中单击来确定它的路径。 “资源管理器/查找器”窗口可查看目录相对于当前位置的位置。

例如，如果你想进入一个名为 src 的目录，该目录位于桌面的一个名为 project 的目录中，你可以从你的主文件夹键入这三个命令来到达该目录

```bash
cd Desktop
cd project
cd src
```

但这只是浪费时间，相反，你可以键入一个命令，用斜杠分隔路径中的不同项，就像在 CSS、HTML 或 JavaScript 代码中指定图像或其他资产的路径一样

```bash
cd Desktop/project/src
```

例如，请注意，在路径上包含一个前斜线将使路径成为绝对路径 `/Users/your-user-name/Desktop`. 像我们上面做的那样，省略前导斜杠可以使路径相对于当前的工作目录。这与你在 web 浏览器中看到的 url 完全相同。前面的斜杠意味着“在网站的根”，而省略斜杠意味着“这个 URL 是相对于我当前页面的”。

**备注：** 在 windows 中，你使用反斜杠而不是正斜杠。`cd Desktop\project\src` — 他的可能看起来很奇怪，但是如果你感兴趣的话，watch this YouTube clip 微软的一位主要工程师对此进行了解释。

### 列出目录内容

另一个内置的 Unix 命令是 ls (list 的缩写)，它列出当前所在目录的内容。注意，这不会工作，如果你使用默认的 Windows 命令提示符 (cmd)，相当于 dir。

现在试着在终端上运行它

```bash
ls
```

这提供了当前工作目录中的文件和目录的列表，但这些信息实际上很基本，你只能得到每个项的名称，而不能知道它是文件还是目录，或者其他任何东西。幸运的是，对命令的用法进行一个小小的更改就可以提供更多的信息。

### 介绍命令选项

大多数终端命令都有选项，这些选项是你添加到命令末尾的修饰符，它们使命令的行为略有不同。它们通常由命令名后的空格、后接破折号、后接一个或多个字母组成。

例如，试一试看，你能得到什么？

```bash
ls -l
```

至于 `ls`, the `-l` 选项为你提供每行一个文件或目录的清单，并显示更多信息。可以通过查找行最左边的字母“d”来识别目录。这些是我们可以做到的 `cd` 进入。

下面是一个屏幕截图，顶部是一个普通的 macOS 终端，还有一个定制的终端，添加了一些额外的图标和颜色，让它看起来生动，都显示了运行的结果`ls -l`:

![A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line/mac-terminals-ls.png)

**备注：** 要确切地了解每个命令有哪些可用选项，你可以查看它man page. 通过键入 `man` 命令，后跟要查找的命令的名称，例如`man ls`. 这将在终端的默认文本文件查看器中打开手册页 (例如，`less`(在我的终端中)，然后你应该能够使用箭头键或其他类似的机制在页面中滚动。手册页详细地列出了所有选项，一开始可能有点吓人，但至少在需要时你知道它就在那里。一旦你完成了对手册页的查看，你需要使用文本查看器的 quit 命令退出它 ("q" 在 `less`;如果不明显，你可能需要在网上搜索才能找到).

**备注：** 要同时运行具有多个选项的命令，通常可以将它们全部放在破折号后面的单个字符串中`ls -lah`, 或`ls -ltrh`.尝试在 `ls` 了解这些额外选项的作用

既然我们已经讨论了两个基本命令，那么稍微浏览一下你的目录，看看是否可以从一个位置导航到下一个位置。

### 创建、复制、移动、删除

在使用终端时，你可能会经常使用其他一些基本实用程序命令。它们非常简单，所以我们不会像前一对那样详细地解释它们。

在你创建的某个地方的测试目录中使用它们，这样你就不会意外地删除任何重要的内容，使用下面的示例命令作为指导

* `mkdir`——这将在用户所在的当前目录中创建一个新目录，名称是在命令名之后提供的。例如 `mkdir my-awesome-website` 将创建一个新目录叫 `my-awesome-website`。
* `rmdir`——删除指定目录，但仅当它为空时。例如 `rmdir my-awesome-website` 将删除我们在上面创建的目录。如果你希望删除一个非空的目录（并删除其中包含的所有内容），则可以使用 `-r` 选项（递归），但这很危险。确保以后在目录中不需要任何内容，因为它将永远消失。
* `touch`——在当前目录中创建一个新的空文件。例如`touch mdn-example.md` 创建一个新的空文件叫做 `mdn-example.md`.
* `mv`——将文件从第一个指定的文件位置移动到第二个指定的文件位置。例如，将文件从第一个指定的文件位置移动到第二个指定的文件位置 `mdn-example.md mdn-example.txt`（这些位置被写成文件路径）。此命令将当前目录中名为 `mdn-example.md` 的文件移动到当前目录中名为 `mdn-example.txt` 的文件。从技术上讲，文件正在被移动，但是从实际的角度来看，这个命令实际上是在重命名文件。
* `cp`——类似于 `mv`, `cp`在指定的第一个位置和第二个位置创建文件的副本。例如 `cp mdn-example.txt mdn-example.txt.bak` 创建一个副本 `mdn-example.txt` 叫做 `mdn-example.txt.bak`（当然，如果你愿意，你也可以叫它别的名字）。
* `rm`——删除指定的文件。例如，`rm mdn-example.txt` 删除单个文件叫做 `mdn-example.txt`。请注意，此删除是永久性的，不能通过桌面用户界面上的回收站撤消。

**备注：** 许多终端命令允许你使用星号作为“通配符”字符，意思是“任何字符序列”。这允许你一次对可能大量的文件运行操作，所有这些文件都匹配指定的模式。例如，`rm mdn-*` 将删除所有以 `mdn-` 开头的文件。`rm mdn-*.bak` 会删除所有以 `mdn-` 开头，以 `.bak` 结束的文件。

考虑终端有害吗？
--------

我们之前提到过这一点，但为了明确起见，你需要小心使用终端。简单的命令不会带来太多危险，但是当你开始将更复杂的命令组合在一起时，你需要仔细考虑该命令将执行什么操作，并在最终在指定的目录中运行它们之前先尝试测试它们。假设你在一个目录中有 1000 个文本文件，你想遍历它们，并且只删除文件名中有特定子字符串的文件。如果不小心，可能会删除一些重要的内容，在此过程中丢失大量工作。

要养成的一个好习惯是在文本编辑器中编写你的 terminal 命令，弄清楚你认为它应该是什么样子，然后对目录进行备份，并首先尝试在该备份上运行命令，以测试它。

另一个好建议是，如果你不习惯在自己的机器上尝试终端命令，可以在 Glitch.com 上试试。除了是测试 web 开发代码的好地方外，这些项目还允许你访问终端，这样你就可以直接在该终端中运行所有这些命令，而且不会破坏你自己的机器。

![a double screenshot showing the glitch.com home page, and the glitch terminal emulator](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line/glitch.png)

快速浏览特定终端命令的一个很好的资源是 tldr.sh. 这是一个社区驱动的文档服务，类似于 MDN，但特定于终端命令。

在下一节中，让我们更进一步 (实际上是几个层次)，看看如何在命令行上将工具连接在一起，从而真正了解终端如何优于常规的桌面用户界面。

与管道命令连接在一起
----------

当你开始使用。将命令链接在一起时，终端才真正成为自己的终端 `|` (pipe) 的象征。让我们看一个简单的例子来说明这意味着什么。

我们已经看了 `ls`, 它可以输出文件目录：

```bash
ls
```

但是如果我们想要快速计算当前目录中的文件和目录的数量会怎样呢`ls` 不能单独运行

还有另一个可用的 Unix 工具，称为`wc`. 它计算输入到其中的单词、行、字符或字节的数量。这可以是一个文本文件，下面的示例输出其中的行数

`myfile.txt`:

```bash
wc -l myfile.txt
```

但是它还可以计算输入到它的输出的行数。例如，下面的命令计算 ls 命令输出的行数 (如果单独运行，它通常会打印到终端)，并计算到终端的输出

```bash
ls | wc -l
```

因为 `ls` 在自己的行上打印每个文件或目录，这有效地为我们提供了目录和文件计数。

这是怎么回事？(unix) 命令行工具的一般原理是，它们将文本打印到终端 (也称为“打印到标准输出”或`STDOUT`). 很多命令也可以从流输入 (称为“标准输入”o) 中读取内容 `STDIN`).

管道操作符可以将这些输入和输出连接在一起，允许我们构建越来越复杂的操作，以满足我们的需要。一个命令的输出可以成为下一个命令的输入。在这种情况下，`ls` 通常会将其输出到`STDOUT`, 但是相反 `ls`输出被制成`wc`, 它将该输出作为输入，计算它包含的行数，然后将该计数输出到 STDOUT。

一个稍微复杂一点的例子
-----------

让我们看一些更复杂的东西。我们将首先尝试获取 MDN 的“获取”页面的内容 `curl` 命令 (可用于从 url 请求内容)https://developer.mozilla.org/en-US/docs/Web/API/fetch.

但是，这个 URL 是页面的旧位置。如果你在一个新的浏览器标签中输入它，你将 (最终) 被重定向到https://developer.mozilla.org/en-US/docs/Web/API/fetch.

因此，如果你使用 curl 请求 `https://developer.mozilla.org/docs/Web/API/fetch`，则不会得到输出。现在就试试：

```bash
curl https://developer.mozilla.org/docs/Web/API/fetch
```

我们想精确的告诉 `curl` 遵循重定向使用`-L` 标签。

让我们也看看标题 `developer.mozilla.org` 返回使用 `curl`'s `-I` 标签，并打印它发送到终端的所有位置重定向，通过管道输出 `curl` 到`grep` (我们将要求 grep 返回包含单词“location”的所有行)。

尝试运行以下代码，你将看到在到达最终页面之前，实际上发生了三次重定向

```bash
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location
```

输出应该是这样的 (`curl` 首先会输出一些下载计数器之类的东西):

```bash
location: /en-US/docs/Web/API/fetch
```

尽管有些做作，我们可以把这个结果做得更深入一点，并变换 `location:` 行内容，将基本的起点添加到每个起点的开始，这样我们就可以打印出完整的 url。为此，我们将在混合中添加 awk(它是一种类似于 JavaScript、Ruby 或 Python 的编程语言，只是要老得多 !)

尝试运行这个：

```bash
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'
```

最终的输出应该是这样的

```bash
https://developer.mozilla.org/en-US/docs/Web/API/fetch
```

通过组合这些命令，我们定制了输出以显示完整的 url，当我们请求时，Mozilla 服务器将通过这些 url 重定向`/docs/Web/API/fetch` URL.了解你的系统将在未来几年证明是有用的，你将了解这些单一服务工具是如何工作的，以及它们如何成为你解决小众问题的工具库的一部分。

添加工具
----

现在我们已经了解了系统自带的一些内置命令，让我们看看如何安装和使用第三方 CLI 工具。

目前，用于前端 web 开发的可安装工具的巨大生态系统主要存在于内部 npm, 与 Node.js 紧密合作的私有的包托管服务。随着时间的推移，你可以期望看到更多的包提供者。

Installing Node.js 还要安装 npm 命令行工具 (以及一个以 npm 为中心的补充工具 npx)，它提供了安装其他命令行工具的网关。js 和 npm 在所有系统上都能工作:macOS、Windows 和 Linux。

现在在你的系统上安装 npm，转到上面的 URL，下载并运行适合你的操作系统的 Node.js 安装程序。如果出现提示，请确保将 npm 作为安装的一部分。

![the node.js installer on windows, showing the option to include npm](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line/npm-install-option.png)

尽管我们将在下一篇文章中讨论许多不同的工具，但我们将继续深入研究 Prettier. Prettier 是一种固执己见的代码格式化程序，它只有“很少的选择”。更少的选择往往意味着更简单。考虑到工具在复杂性方面有时会失控，“很少的选项”可能非常有吸引力。

### 在哪里下载我们的 CLI 工具？

在开始安装 Prettier 之前，有一个问题需要回答：“我们应该安装到哪里？”

用`npm` 我们可以选择在全局安装工具，因此我们可以在任何地方或本地访问当前项目目录。

每种方式各有利弊 — 而这张全局安装的利弊清单还远远不够详尽：

| 全局安装的优点 | 全局安装的缺点 |
| --- | --- |
| 任何地方在你的终端 | 可能与你项目的代码库不兼容 |
| 只下载一次 |
 你团队中的其他开发人员无法使用这些工具，例如，如果你通过 git
 这样的工具共享代码仓库。
  |
| 使用较少的磁盘空间 |
 与前一点相关的是，它使得项目代码更难复制
 (如果你在本地安装工具，可以将它们设置为依赖项并使用 npm 进行安装
 (`npm install`).
  |
| 总是相同的版本 |  |
| 就像任何其他 unix 命令 |  |

尽管缺点清单比较短，但是全局安装的负面影响可能要比好处大得多。然而，现在我们宁可追求简单，而采用全局安装来保持简单。在下一篇文章中，我们将进一步了解本地安装以及它们的优点。

### 下载 Prettier

对于本文，我们将安装 Prettier 作为全局命令行实用程序。

Prettier 是一款专门为前端开发人员设计的代码格式化工具，专注于基于 javascript 的语言，并增加了对 HTML、CSS、SCSS、JSON 等的支持。Prettier 能够：

* 省去了在所有代码文件中手动保持样式一致的认知开销;Prettier 可以自动为你完成此操作。
* 帮助 Web 新手以最佳方式完成他们的代码。
* 安装在任何操作系统上，甚至直接作为项目工具的一部分，以确保从事你的代码工作的同事和朋友使用你正在使用的代码风格。
* 配置为在保存时运行、在键入时运行，甚至在发布代码之前运行 (使用稍后将在模块中看到的其他工具）。

安装 node 之后，打开终端并运行以下命令来安装 prettier 程序：

```bash
npm install --global prettier
```

命令运行完成后，Prettier 工具现在可以在终端中的文件系统中的任何位置使用。

与许多其他命令一样，不带任何参数运行该命令将提供用法和帮助信息。现在试试这个

```bash
prettier
```

输出应该是这样的

```bash
Usage: prettier [options] [file/dir/glob ...]

By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.

…
```

即使它很长，至少浏览一下使用信息也是值得的。它将帮助你更好地理解如何使用该工具。

### 尝试 Prettier

让我们快速演示一下 Prettier，这样你就可以看到它是如何工作的。

首先，在文件系统中容易找到的地方创建一个新目录。可能是一个叫做`prettier-test` 在你的 `Desktop`.

现在将以下代码保存在一个名为`index.js`, 在测试目录中：

```js
const myObj = {
  a: 1,
  b: { c: 2 },
};
function printMe(obj) {
  console.log(obj.b.c);
}
printMe(myObj);
```

我们可以在代码基上运行得更好，以检查我们的代码是否需要调整。cd 到你的目录中，并尝试运行此命令：

```bash
prettier --check index.js
```

你的产出应该是：

```bash
Checking formatting...
index.js
Code style issues found in the above file(s). Forgot to run Prettier?
```

有些代码样式是可以修改的。没有问题。添加 `--write` option to the prettier 命令将修复这些问题，让我们专注于实际编写有用的代码。

现在尝试运行这个版本的命令：

```bash
prettier --write index.js
```

你可能得到这样的输出：

```bash
Checking formatting...
index.js
Code style issues fixed in the above file(s).
```

但更重要的是，如果你回头看你的 JavaScript 文件，你会发现它被重新格式化成这样：

```js
const myObj = {
  a: 1,
  b: { c: 2 },
};
function printMe(obj) {
  console.log(obj.b.c);
}
printMe(myObj);
```

根据你的工作流 (或你选择的工作流)，你可以将其作为流程的自动化部分。自动化确实是工具的优势所在;我们的个人偏好是那种无需配置任何东西就能“自动发生”的自动化。

使用 Prettier 有许多实现自动化的方法，尽管它们超出了本文的范围，但是有一些很好的在线资源可以提供帮助 (已经链接到其中一些)。你可以调用更漂亮的：

* 在将代码提交到 git 存储库之前，使用Husky.
* 当你在代码编辑器中点击“保存”的时候，无论是VS Code, Atom, 或Sublime Text.
* 作为持续集成检查的一部分，可以使用以下工具Github Actions.

我们个人的偏好是第二个当使用 say VS 代码时，Prettier 会启动并清理每次我们点击保存时需要做的格式化。关于以不同方式使用 Prettier，你可以在 Prettier docs.

尝试其他的工具
-------

如果你想尝试更多的工具，这里有一个简短的列表，很有趣的尝试：

* `bat` — 一个更好的 `cat` (`cat` 用于打印文件内容）。
* `prettyping` — `ping`在命令行上，但是是可视化的 (ping 是检查服务器是否有响应的有用工具)。
* `htop` —进程查看器，当某些东西使你的 CPU 风扇的行为像一个喷气发动机，并且你想要识别出错的程序时，它非常有用。
* `tldr` —在本章前面提到的，但是可以作为命令行工具使用。

注意，上面的一些建议可能需要使用 npm 进行安装，就像我们使用 Prettier 所做的那样。

总结
--

这使我们结束了对终端/命令行的简短浏览。接下来，我们将更详细地介绍软件包管理器，以及如何使用它们。

* 上一页
* Overview: Understanding client-side tools
* 下一页


客户端工具概述 - 学习 Web 开发

客户端工具概述
=======

* Overview: Understanding client-side tools
* 下一页

在本文中，我们提供了现代 web 工具的概述，有哪些工具可用，在 web 应用程序开发的生命周期中你将在哪里遇到它们，以及如何使用各个工具寻求帮助。

|  |  |
| --- | --- |
| 预备条件： | 熟悉核心 HTML，CSS 和 JavaScript 语言。 |
| 目标 | 了解有什么类型的客户端工具，以及如何找到工具并获得这些工具的帮助。 |

现代工具概述
------

随着时间的推移，为网络编写软件已经变得越来越复杂。尽管“手工”编写 HTML、CSS 和 JavaScript 仍然是完全合理的，但现在有大量的工具可供开发人员使用，以加快构建 web 站点或应用程序的过程。

有一些非常完善的工具已经成为开发社区中常见的“家喻户晓的名字”，并且每天都在编写和发布新的工具来解决特定的问题。你甚至可能发现自己正在编写一个软件来帮助你自己的开发过程，以解决现有工具似乎无法处理的特定问题。

单个项目中包含的大量工具很容易让人不知所措。同样，像 Webpack 这样的工具的一个配置文件可能有数百行之长，其中大多数都是神奇的咒语，似乎可以完成工作，但只有大神级工程师才能完全理解

有时，即使是最有经验的 web 开发人员也会因为工具问题而陷入困境;甚至在接触到一行应用程序代码之前，都可能浪费数小时来尝试让工具管道工作。如果你发现自己在过去挣扎，那么用担心，你并不孤独。

在这篇文章中，我们将不会回答所有关于 web 工具的所有问题，但我们将为你提供一个了解基本原理的有用起点，你可以从中构建。对于任何复杂的主题，最好从小处开始，然后逐步进行更高级的使用。

现代工具系统
------

当今的现代开发人员工具生态系统非常庞大，因此对这些工具正在解决的主要问题有一个大致的概念是非常有用的。如果你跳到你最喜欢的搜索引擎上，搜索“前端开发工具”，你会得到一系列的结果，从文本编辑器到浏览器，再到你可以用来做笔记的笔。

虽然你选择的代码编辑器肯定是一种工具选择，但本系列文章将不止于此，重点关注帮助你更有效地生成 web 代码的开发人员工具。

从高层次来看，你可以将客户端工具放入以下三大类需要解决的问题中：

* **安全网络** — 在代码开发期间有用的工具。
* **转换** — 以某种方式转换代码的工具，例如将一种中间语言转换为浏览器可以理解的 JavaScript。
* **开发后阶段** — 编写完代码后有用的工具，如测试和部署工具。

让我们更详细地看看每一个。

### 安全网络

这些工具可以使你编写的代码更好一些。

这一部分的工具应该特定于你自己的开发环境，尽管对于公司来说，有某种策略或可用于安装的预备配置，以便所有开发人员都使用相同的流程的情况并不少见。

这包括使你的开发过程更容易生成稳定可靠的代码的任何内容。安全网络工具还应该帮助你避免错误或自动纠正错误，而不必每次都从头开始构建代码。

你将发现开发人员正在使用的一些非常常见的安全网络工具类型如下。

#### Linter

**Linter** 是检查你的代码并告诉你存在任何错误的工具，它们是什么类型的错误，以及它们出现在哪些代码行上。通常，linters 不仅可以被配置为报告错误，还可以报告任何违反你的团队可能正在使用的指定样式指南的行为 (例如代码使用了错误的缩进空格数，或者使用了template literals 而不是常规的字符串文本)。

eslint 业界标准的 JavaScript linter 是一种高度可配置的工具，用于捕获潜在的语法错误，并在代码中鼓励“最佳实践”。一些公司和项目也是这样 shared their eslint configs。

你还可以找到用于其他语言的 linting 工具，比如csslint。

同样值得一看的是 webhint, 一个可配置的，开放源码的网页链接，展示了最佳实践，包括无障碍，性能，跨浏览器兼容性 MDN's browser compatibility data, 安全，PWAs 测试等等。它可以作为 Node.js command-line tool 和 VS Code extension.

#### 源代码控制

也称为版本控制系统（VCS），源代码控制对于备份工作和在团队中工作至关重要。典型的 VCS 包括拥有你要对其进行更改的代码的本地版本。然后将更改“推”到存储在某个服务器上的远程存储库中的代码的“主”版本。通常有一种方法来控制和协调对代码的“主”副本做了什么更改，以及什么时候做更改，这样开发团队就不会一直覆盖彼此的工作。

Git 是现在大多数人使用的源代码控制系统。它主要通过命令行访问，但也可以通过友好的用户界面访问。使用 git 存储库中的代码，你可以将其推到自己的服务器实例中，或者使用托管的源代码控制网站，如GitHub, GitLab, or BitBucket.

我们将在这个模块中使用 GitHub。你可以在网站上找到更多关于它的信息Git and GitHub.

#### 代码格式化

代码格式化程序与 linters 有些关联，除了它们不是指出代码中的错误，而是根据你的样式规则，确保你的代码被正确格式化，理想情况下自动修复它们发现的错误。

Prettier 是一个非常流行的代码格式化程序示例，稍后我们将在模块中使用它。

#### 打包工具

这些工具让你的代码准备生产，例如，通过 tree-shaking 来确保只有实际使用的代码库的部分被放到最终的生产代码中，或“缩减”删除所有空格在生产代码中，使其尽可能小之前上传到服务器。

Parcel 是一个特别好用的工具，都属于这个类别可以完成上面的任务，但也有助于资产包像 HTML, CSS 和图像文件方便的包，你可以继续部署，也为你自动添加依赖项当你试着使用它们。它甚至可以为你处理一些代码转换任务。

Webpack 是一个非常流行的代码格式化程序示例，稍后我们将在模块中使用它。

### 转换

web 应用程序生命周期的这个阶段通常允许你编写“未来代码”(比如最新的 CSS 或 JavaScript 特性，这些特性可能还没有得到浏览器的本地支持)，或者完全使用另一种语言编写代码，比如 TypeScript。转换工具将为你生成与浏览器兼容的代码，以用于生产。

通常 web 开发被认为是三种语言：HTML、CSS 和 JavaScript，所有这些语言都有转换工具。转换提供了两个主要好处（还有其他好处）

1. 能够使用最新的语言特性编写代码，并将其转换为可在日常设备上使用的代码。例如，你可能希望使用尖端的新语言特性来编 JavaScript，但是你的最终产品代码仍然可以在不支持这些特性的旧浏览器上工作。例如：
    * Babel:一个 JavaScript 编译器，允许开发人员使用最前沿的 JavaScript 编写代码，然后 Babel 将其转换为老式的 JavaScript，让更多的浏览器能够理解。开发人员也可以编写和发布plugins for Babel.
    * PostCSS:和 Babel 做同样的事情，但是有先进的 CSS 特性。如果没有相同的方法使用旧的 CSS 特性来做一些事情，PostCSS 将安装一个 JavaScript 填充来模拟你想要的 CSS 效果。
2. 选择用一种完全不同的语言编写代码，并将其转换为与 web 兼容的语言。例如：
    * Sass/SCSS：这个 CSS 扩展允许你使用变量、嵌套规则、混合、函数和许多其他特性，其中一些特性在本地 CSS 中是可用的 (比如变量)，而另一些则不是。
    * TypeScript：TypeScript 是 JavaScript 的一个超集，它提供了一堆额外的特性。TypeScript 编译器在生成产品时将 TypeScript 代码转换为 JavaScript。
    * 框架例如 React、Ember 和 Vue：框架提供了许多免费的功能，并允许你通过构建在普通 JavaScript 之上的自定义语法来使用它们。在后台，框架的 JavaScript 代码努力解释这个定制语法，并将其呈现为最终的 web 应用程序。
### 开发后阶段

开发后阶段工具可以确保你的软件能够访问 web 并继续运行。这包括部署流程、测试框架、审计工具等等。

在开发过程的这个阶段，你希望与之进行最少的主动交互，这样，一旦配置完毕，它基本上是自动运行的，只有在出现错误时才弹出窗口打招呼。

#### 测试工具

它们通常采用一种工具的形式，该工具将自动对你的代码运行测试，以确保在进行进一步操作之前它是正确的 (例如，当你试图将更改推送到 GitHub repo 时)。这可能包括 linting，但也包括更复杂的过程，如单元测试，在这里运行部分代码，以确保它们按照应有的方式运行。

* 框架包括编写测试 Jest、Mocha 和 Jasmine.
* 自动测试运行和通知系统包括 Travis CI、Jenkins、Circle CI 及其他系统。

#### 配置工具

配置系统允许你发布网站，可用于静态和动态站点，通常与测试系统一起工作。例如，典型的工具链会等待你将更改推送到远程回购，运行一些测试以查看更改是否正确，然后如果测试通过，则自动将你的应用程序部署到生产站点。

Netlify 是目前最流行的部署工具之一，但其他包括 Vercel 和 Github Pages。

#### 其他的

在开发后期阶段，还有许多其他可用的工具类型，包括 Code Climate 对于收集代码质量度量，webhint browser extension 用于执行跨浏览器兼容性的运行时分析和其他检查，Github bots 提供更强大的 GitHub 功能，Updown 提供应用程序运行时间监控等等。

### 工具种类的想法

在开发生命周期中应用不同的工具类型当然是有顺序的，但请放心，你不必在发布一个网站时将所有这些工具都准备就绪。事实上，你不需要这些。然而，在你的过程中包括这些工具将改善你自己的开发体验，并可能提高代码的总体质量。

新的开发人员工具通常需要一段时间才能适应其复杂性。Webpack 是最著名的工具之一，它以使用起来过于复杂而著称，但是在最新的主要版本中，它大力简化了常用的用法，因此所需的配置被减少到绝对最小。

绝对没有银弹可以保证工具的成功，但是随着你经验的增加，你会发现适合你或者你的团队和他们的项目的工作流程。一旦过程中所有的扭结被平展，你的工具链应该是你可以忘记的东西，它应该只是工作。

如何选择并寻求特殊工具的帮助
--------------

大多数工具往往是独立编写和发布的，因此，尽管几乎可以肯定有可用的帮助，但它们的位置或格式永远不会相同。因此，很难找到使用工具的帮助，甚至很难选择使用什么工具。关于哪些是最好的工具的知识是有点部落式的，这意味着如果你还没有进入 web 社区，就很难确定到底应该使用哪些工具！这是我们编写本系列文章的原因之一，希望能够提供其他方法难以找到的第一步。

你可能需要以下内容的组合

* 有经验的老师、导师、同学或有一定经验的同事以前解决过这类问题，并能提出建议。
* 一个有用的特定地方搜索。对前端开发人员工具的一般 web 搜索通常是无用的，除非你已经知道你正在搜索的工具的名称。
    + 例如，如果你正在使用 npm 包管理器来管理依赖项，那么转到npm homepage 并搜索你正在寻找的工具的类型，例如，如果你想要日期格式化实用程序，请尝试搜索“date”，如果你想要搜索通用代码格式化程序，则尝试搜索“formatter”。请注意流行度、质量和维护分数，以及软件包最近更新的时间。还可以点击工具页面，了解每个包每月有多少下载，以及它是否有好的文档，可以用来了解它是否完成了你需要它做的事情。以这些标准为基础date-fns library 看起来是一个很好的日期格式化工具。在本模块的第 3 章中，你将看到这个工具的实际应用，并了解更多关于包管理器的信息。
    + 如果你正在寻找将工具功能集成到代码编辑器中的插件，请查看代码编辑器的“插件/扩展名”页面 - 请参阅 Atom packages and VSCode extensions,为例。看一看首页上的特色扩展，然后再次尝试搜索你想要的扩展类型 (或者工具名称，例如在 VSCode 扩展页面上搜索“eslint”)。当你得到结果的时候，看看这个扩展有多少颗星或者下载了多少，作为它质量的一个指标。
* 与开发相关的论坛，询问关于使用什么工具的问题，例如 MDN Learn Discourse 或 Stack Overflow。

当你选择要使用的工具时，第一个端口应该是工具项目主页。这可能是一个完整的网站，也可能是代码库中的一个 readme 文档。例如 date-fns docs就很好、很完整、很容易理解。然而，有些文档可能相当技术性和学术性，并不适合你的学习需求。

相反，你可能希望找到一些关于如何开始使用特定类型的工具的专门教程。好的起点在诸如 CSS Tricks、Dev、freeCodeCamp 和 Smashing Magazine 等网站中进行搜索，因为它们是为 web 开发行业量身定做的。

同样，在搜索适合自己的工具时，你可能会使用几种不同的工具，试用它们，看看它们是否有意义，是否得到良好的支持，并执行你希望它们执行的任务。这很好，这对学习很有好处，而且随着你获得更多经验，道路会变得更平坦。

总结
--

以上是我们对客户端 web 工具主题的简要介绍的最后一部分。接下来，我们将为你提供一个关于命令行的速成课程，许多工具都是从命令行调用的。我们将看一看命令行可以做什么，然后尝试安装和使用我们的第一个工具。

* Overview: Understanding client-side tools
* 下一页


设计与无障碍 - 学习 Web 开发

设计与无障碍
======

本节列出了与美学、页面结构、辅助功能等相关的问题。

我该怎样开始设计我的网站？

本文涵盖了每个项目的所有重要的第一步：定义你想要完成的任务。

一般的网页布局是怎样的？

在为你的网站设计网页时，最好了解最常见的布局。这篇文章说明一些典型的网页布局，看看组成每一个的部分。

何为无障碍？

这篇文章介绍了 web 无障碍背后的一些基本概念。

怎么设计才能适用于所有用户？ (en-US)

这篇文章提供了基本的技术，帮助你为任何类型的用户设计网站——快速的无障碍技巧，以及其他类似的事情。

什么样的 HTML 特性可以提升无障碍性？ (en-US)

本文介绍了 HTML 的特定功能，可用于使不同残疾人更容易访问网页。


工具和安装 - 学习 Web 开发

工具和安装
=====

本部分列出了与可用于构建网站的工具/软件相关的问题。

你需要什么软件用来造一个网站？

在本文中，我们将解释在编辑，上传或查看网站时需要使用哪些软件组件。

在网上做点什么需要花多少钱？

当你推出网站时，你可能没有花费，或者你的费用可能会爆表。在这篇文章中，我们讨论了每一件事的成本和你付出成本（或不付出）后能得到的东西。

什么文本编辑器比较好用？

在本文中，我们重点介绍在选择和安装用于 Web 开发的文本编辑器时需要考虑的一些事项。

什么是浏览器开发者工具？

每个浏览器都有一组用于调试 HTML、CSS 和其他 Web 代码的开发者工具。本文解释如何使用浏览器的开发者工具的基本功能。

你怎么来确保你的网站顺利的运行？

所以你已经在网上发布了你的网站——非常好！但你确定它工作正常吗？本文提供一些基本的故障排除步骤。

怎么搭建一个基础的开发环境？

在本文中，我们将解释如何在本地搭建一个测试服务器，以及基本的使用方法。

怎么将文件上传到服务器？

本文介绍如何使用 FTP 工具在线发布你的网站——这是一种常见的网站发布方法，以便其他人可以通过计算机访问网站。

怎么使用 GitHub Pages?

本文提供了使用 GitHub 的 gh-pages 功能发布内容的基本指南。

如何在 Google App Engine 上托管你的网站？

寻找一个托管网站的地方？以下是在 Google App Engine 上托管网站的分步指南。

有哪些工具可用于调试和提高网站性能？

这组文章向你展示了如何使用 Firefox 中的开发工具来调试和提高网站性能，使用工具检查内存使用情况、JavaScript 调用树、渲染的 DOM 节点数量等。


Web 机制 - 学习 Web 开发

Web 机制
======

本部分涵盖与 Web 生态系统的一般知识及其工作原理相关的问题。

互联网是怎么工作的？

**互联网**是 Web 的基石，是让 Web 变得可能的基础设施。本质上来说，互联网是一个大型的相互交流的计算机网络。本文讨论了它在底层是如何工作的。

网页、网站、网络服务器和搜索引擎的区别是什么？

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

什么是超链接？

在本文中，我们将讨论超链接是什么，以及它们为什么重要。

什么是 URL？

有了超文本和 HTTP，当涉及到互联网时，URL 是一个关键概念。它是浏览器用来在网络上检索任何已经发布的资源的主要机制。

什么是域名？

域名是互联网基础架构的关键部分。它们为互联网上任何可用的网络服务器提供了人类可读的地址。

什么是 web 服务器？

术语“Web 服务器”可以指在 Web 上向客户端提供网站的硬件或软件，或者两者一起工作。在本文中，我们将讨论 Web 服务器如何工作，以及为什么它们是重要的。


什么是浏览器开发者工具？ - 学习 Web 开发

什么是浏览器开发者工具？
============

每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。

**备注：** 在你运行下面的例子之前，打开我们在Web 开发入门系列文章中建立的初学者示例网站。你应该按照下面的步骤打开。

如何在浏览器中打开开发者工具
--------------

开发者工具内置在你的浏览器的子窗口之中，大概像这样：

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/devtools_63_inspector.png)

**如何打开它？有三种方式：**

* ***键盘快捷键*** *Ctrl + Shift + I*，除了以下的特例
    + **Internet Explorer.** *F12*
    + **Mac OS X.** *⌘ + ⌥ + I*
* ***菜单栏***
    + **Firefox**：菜单
     ![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) ➤ *Web 开发者* ➤ *切换工具箱（译者注：此处修改为最新的 Firefox Quantum），或者工具栏中的* ➤ *Web 开发者* ➤ *切换工具箱*
    + **Chrome**：菜单 *➤ 更多工具 ➤ 开发者工具*
    + **Safari**：*Develop ➤ Show Web Inspector*。如果你看不到 *Develop* 菜单，去到*Safari ➤ Preferences ➤ Advanced*，然后点击*Show Develop menu in menu bar* 复选框。
    + **Opera**. *Developer ➤ Web Inspector*
* **右键菜单**：右键单击网页中的一个项目上（在 Mac 上按 Ctrl 点击），并从弹出的菜单中选择`检查元素`（译者注：选择`检查`（Chrome）或`查看元素`（Firefox））。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector_context.png)

检查器（Inspector）：DOM 浏览器和 CSS 编辑器

开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的 HTML 运行时的样子，以及哪些 CSS 规则被应用到了页面上元素。它还允许你立即修改 HTML 和 CSS 并在浏览器中实时观察修改的结果。

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector_highlighted.png)

如果你看不到调试器，

* 点击“检查”选项卡。
* 在 Internet Explorer 中，点击 DOM Explorer，或按 Ctrl + 1。
* 在 Safari 中，控制就不是很清楚了，但是你如果你没有选择的东西出现在窗口看到 HTML。按下按钮查看 CSS 样式。
### 探索 DOM 检查器

首先在 DOM 检查器中右键单击（按 Ctrl 点击）一个 HTML 元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/dom_inspector.png)

* **删除节点**（或删除元素）：删除当前元素\*\*。\*\*
* **编辑 HTML**（或添加属性/编辑文本）：让你更改 HTML 和看到在变化的结果。对于调试和测试非常有用。
* **:hover/:active/:focus**（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。
* **复制/复制为 HTML**：复制当前选定的 HTML。
* 一些浏览器也有复制 CSS 路径和复制 XPath，允许你选择复制当前的 HTML 元素 CSS 选择器或 XPath 表达式。

现在试着编辑一些你的 DOM。双击元素，或在页面内容里右键单击它并选择编辑 HTML。你可以做出任何你想要的改变，但你不能保存。

### 探索 CSS 编辑器

默认情况下，CSS 编辑器显示当前
 ![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/css_inspector.png)所选元素应用的 CSS 规则：

这些功能特别有用：

* 应用于当前元素的规则以相关度排序。越特定的规则显示的越靠前。
* 点击每个声明旁边的复选框，看看如果删除声明会发生什么。
* 点击每个简写属性旁边的小箭头显示属性的普通等效项。
* 单击属性名称或值以显示一个文本框，你可以在其中键入新值以获取样式更改的实时预览。
* 每个规则旁边是规则定义的文件名和行号。单击该规则将使开发工具跳转到自己的视图中显示，通常可以编辑和保存。
* 你还可以单击任何规则的关闭大括号，以在新行上显示一个文本框，你可以在其中为页面写入一个全新的声明。

你会注意到 CSS 查看器顶部的一些可点击的选项卡：

* *计算：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。*
* *盒子模型：这可以直观地表示当前元素的框模型，所以你可以一目了然地看到应用了什么填充，边框和边距，以及它的内容有多大。*
* 字体：在 Firefox 中，“字体”选项卡显示应用于当前元素的字体。
### 了解更多

了解更多 Inspector 在不同的浏览器中的细节：

* Firefox Page inspector
* IE DOM Explorer
* Chrome DOM inspector (Opera 的 inspector 和它一样)
* Safari DOM inspector and style explorer
JavaScript 调试器
--------------

你可在 JavaScript 调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/firefox_debugger.png)

如何打开调试器：

火狐，谷歌，IE，Edge：`F12`

Safari：开打开发者工具，然后选择 "Debugger" 标签。

### 尝一尝调试器的味

火狐的调试器有三个面板

#### 文件列表

第一个面板位于左边，它包涵着你正在调试的网页的文件列表。从列表中选中你要操作的文件。通过点击选中一个文件，可以在调试中间的面板看到它的内容。

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/file_list.png)

#### 源码

在你想要停止执行的位置设置间断点。在下面图片中，高亮的第 18 行就是被设置的断点。

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/source_code.png)

#### “监视表达式”和“断点”

右边的面板会显示你添加的监视表达式与断点。

在下图中，第一个区域，**监视表达式**，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。

接下来的部分，**断点 标签**，列出了页面上设置的断点。在 example.js（上上个图中）中，一个断点被定位在语句 `listItems.push(inputNewItem.value);` 上。

最后两个部分，只在代码运行时才出现。

**调用栈** 区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。

最后一部分，**Scopes**，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对象在 addItemClick 函数中是如何变化的。

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/watch_items.png)

### 再了解一些

了解不同浏览器中的 JavaScript 调试器：

* Firefox JavaScript Debugger
* Microsoft Edge Debugger
* Chrome Debugger
* Safari Debugger
JavaScript 控制台
--------------

JavaScript 控制台是一个非常有用的工具，用于调试没有按预期运行的 JavaScript。它允许你针对浏览器当前加载的页面运行 JavaScript 行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在 Internet Explorer 中，按 Ctrl + 2.）这将给你一个如下所示的窗口：

![](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/console_only.png)

要查看会发生什么，请尝试逐个输入以下代码片段（然后按 Enter 键）:

```js
alert("hello!");
```

```js
document.querySelector("html").style.backgroundColor = "purple";
```

```js
var my_image = document.createElement("img");

//下面的 url 已经不再可用，这里注释掉，后面补上了一个可以 url
//且 myImage 在文章开始给的“初学者示例网址”存在声明冲突，所以改为 my\_image
//myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208\_e1f2aae4e3\_b.jpg');
my_image.setAttribute(
  "src",
  "https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif",
);

document.querySelector("h1").appendChild(my_image);
```

现在尝试输入以下错误的代码版本，看看你得到什么。

```js
alert('hello!);
```

```js
document.cheeseSelector("html").style.backgroundColor = "purple";
```

```js
var my_Image = document.createElement("img");
myBanana.setAttribute(
  "src",
  "https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif",
);
document.querySelector("h1").appendChild(my_Image);
```

你将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！

### 了解更多

了解更多 JavaScript 控制台在不同浏览器中的细节：

* Firefox Web Console
* IE JavaScript console
* Chrome JavaScript Console (Opera 与它相同)
* Safari Console
参见
--

* Debugging HTML
* Debugging CSS


如何将文件上传到 web 服务器 - 学习 Web 开发

如何将文件上传到 web 服务器
================

这篇文章将会告诉你如何利用文件传输工具来发布你的网站。

|  |  |
| --- | --- |
| 前提： | 你必须知道什么是 web 服务器以及域名是如何工作的 (en-US)。你必须知道如何搭建一个基本环境 (en-US)，还有如何写一个简单的网页 (en-US)。 |
| 目标： | 学习如何使用各种可用文件传输工具将文件上传到服务器。 |

概要
--

如果你已经建立了一个简单的页面（参见 HTML 基础以获取示例），你会想将它放到某些 web 服务器上。在本文中，我们将讨论如何使用各类可用的方法（如 SFTP 客户端、Rsync 和 GitHub）来做到这一点。

SFTP
----

有多种 SFTP 客户端。我们的示例使用的是 FileZilla，因为它免费，且可在 Windows、macOS 以及 Linux 上使用。要安装 FileZilla，请转到 FileZilla 下载页面，点击下载按钮，然后以常规的方式通过安装文件安装它。

**备注：** 当然还有很多其他的选择。有关详细的信息，请参阅发布工具。

打开 FileZilla 应用程序，你应该看到这样的界面：

![Filezilla FTP 应用程序的用户界面截图。聚焦于主机的输入框。](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/filezilla-ui.png)

### 登入

在这个示例中，我们假设我们的托管提供商（将托管我们的 HTTP Web 服务器的服务）是一个虚构的公司“Example Hosting Provider”，其 URL 如下所示：`mypersonalwebsite.examplehostingprovider.net`。

我们刚刚开通了一个帐户，并从他们那里收到了这些信息：

>
> 恭喜在 Example Hosting Provider 开设帐户。
>
>
> 你的账户是：`demozilla`
>
>
> 你的网站将在：`demozilla.examplehostingprovider.net`
>
>
> 要发布到此帐户，请使用以下凭据通过 SFTP 进行连接：
>
>
> * SFTP 服务：`sftp://demozilla.examplehostingprovider.net`
> * 用户名：`demozilla`
> * 密码：`quickbrownfox`
> * 端口：`5548`
> * 要在 web 上发布，请将文件放入 `Public/htdocs` 目录中。
>
>
>

让我们查看一下此网页 `http://demozilla.examplehostingprovider.net/`——正如你所见，现在这里什么也没有：

![我们的 demozilla 个人网站，在浏览器中看起来是空的](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/demozilla-empty.png)

**备注：** 根据你的托管服务提供商的不同，大部分时间你会看到一个页面，内容如下：“此网站由 [托管服务] 托管”。

要将 SFTP 客户端连接到远程服务器，请执行以下步骤：

1. 在主菜单中选择*文件>站点管理器……*。
2. 在*站点管理其*窗口，点击*新建站点*按钮，然后填写站点名称为 **demozilla**。
3. 将托管服务提供商提供的 SFTP 服务器地址填入**主机**字段。
4. 在*登录类型*下拉框中选择*常规*，然后在相关的字段中填写提供的用户名和密码。
5. 填写正确的端口号和其他信息。

窗口看起来应该像这样：

![Screenshot of default landing page of a fictitious website when the file directory is empty](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/site-manager.png)

现在按下*连接*以连接到 SFTP 服务器。

注意：请确保你的托管服务提供商为你提供的空间是支持 SFTP（安全 FTP）连接的。FTP 本质上是不安全的，你不应该使用它。

### 在这里和那里：本地和远程视图

在连接后，你的屏幕应该如下所示（我们已连接到我们自己的一个示例以供你参考）：

![SFTP 客户端在连接到 SFTP 服务器后会展示网站内容。本地的文件在左侧，远程的文件在右侧。](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/connected.png)

让我们来看看你所看到的：

* 在左边，你会看到你的本地文件。导航到你存储网站的目录（本例中为 `mdn`）。
* 在右侧，你会看到远程文件。我们登录到了我们远程的 FTP 根目录（在这种情况下，`users/demozilla`）
* 现在你可以忽略底部和顶部区域。它们分别是你的计算机和 SFTP 服务器之间连接状态的消息日志，以及 SFTP 客户端和服务器之间每次交互的实时日志。
### 上传到服务器

你应该记得，我们的主机提供商告诉我们，我们的文件必须存储在 `Public/htdocs`目录中。你需要在右侧窗格中导航到指定的目录。这个目录实际上是你网站的根目录——`index.html` 文件和其他的资源文件将存放在该目录中。

找到正确的远程目录来放置文件后，要将文件上传到服务器，请将它们从左侧窗格拖放到右侧窗格中：

### 文件都上传成功了吗？

到目前为止，很好，但文件真的在线吗？你可以在浏览器中返回你的网站（例如 `http://demozilla.examplehostingprovider.net/`）进行仔细检查：

![啊哈：我们的网站上线了！](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/here-we-go.png)

瞧！我们的网站已经上线了！

Rsync
-----

Rsync (en-US) 是一种本地到远程的文件同步工具，通常在大多数基于 Unix 的系统（如 macOS 和 Linux）上都可用，但也存在 Windows 版本。

它被视为比 SFTP 更高级 工具，因为它默认是在命令行中使用的。下面展示了一个基本的命令：

```bash
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
```

* `-options` 破折号后根一个或多个字母，例如 `-v` 用于详细展示错误消息，而 `-b` 用于进行备份你可用在 rsync 手册页中查看完整的列表（搜索“Options summary”）。
* `SOURCE` 是要从中复制文件的本地文件或目录的路径。
* `user@` 是你要将文件复制到远程服务器上的用户的凭据。
* `x.x.x.x` 是远程服务器的 IP 地址。
* `DESTINATION` 是你要将目录或文件复制到远程服务器上的位置的路径。

你需要从托管服务提供商哪里了解此类详细信息。

参见如何使用 Rsync 以在服务器之间拷贝或同步文件以了解更多信息和示例。

当然，对于 FTP 等，最好使用安全连接。对于 Rsync，你可用使用 `-e` 选项指定 SSH 的详细信息，以通过 SSH 建立连接。例如：

```bash
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
```

你可以在如何通过 Rsync Over SSH 来拷贝文件中了解详细信息。

### Rsync 图形工具

有适用与 Rsync 的图形工具（对于哪些不习惯适用命令行的人）。Acrosync 就是一款这样的工具，而且可在 Windows 和 macOS 上使用。

同样地，你必须从托管服务提供商那里获取连接凭据，不过你现在可以通过图形化界面来输入它们。

GitHub
------

GitHub 允许你通过 GitHub pages（gh-pages）发布网站。

我们已经在我们的web 入门指南的发布网站中介绍了这一内容，所以我们不再重复。

但是，值得注意的是，你也可以在使用自定义域名的情况下，在 GitHub 上托管网站。请参阅配置 GitHub Pages 站点的自定义域以获取详细的指南。

其他上传文件的方法
---------

FTP 协议是发布网站的一种众所周知的方法，但不是唯一的方法。以下是其他一些可能性：

* **Web 界面**。作为远程文件上传服务前端的 HTML 界面。由你的托管服务提供。
* **WebDAV**。是一个 HTTP 协议的扩展，允许更多的高级文件管理功能。


如何确保你的网站正常运行？ - 学习 Web 开发

如何确保你的网站正常运行？
=============

在这篇文章中我们将重温针对网站的各种故障排除步骤以及解决这些问题的基本措施。

|  |  |
| --- | --- |
| 前提： | 你需要知道怎么上传文件到 web 服务器 (en-US)。 |
| 目标： | 你将学习如何诊断并解决你的网站可能遇到的一些基本问题。 |

所以你已经发布你的网站了对吗？非常棒！但是你确定它能够正常运行吗？

远程 web 服务器与本地服务器的运行表现通常有很大差别，因此在你的网站上线之时对它进行测试是个不错的主意。你可能会对为数众多的问题表示惊讶：图片无法显示、页面无法加载或者加载缓慢，等等。大多数时候这个问题不严重，只是一个小小的错误或者你的 web 主机配置问题。

让我们看下如何诊断并解决那些问题。

主动学习
----

*当前没有主动学习的相关页面。请考虑作出你的贡献*。

深入探索
----

### 在你的浏览器中测试

如果你想知道你的网站是否正常运行，第一件要做的事就是打开你的浏览器并前往你想要测试的页面。

#### 噢哦，图片去哪里了？

让我们看下我们的个人网站，`http://demozilla.examplehostingprovider.net/`。没有出现我们预期的图片！

![Oops, the ‘unicorn’ image is missing](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-missing.png)

打开 Firefox 的 Network tool (**Tools ➤ Web Developer ➤ Network**) 并重新加载页面：

![The image has a 404 error](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/error404.png)

这就是问题所在，位于底部的“404”。“404”意味着“资源未找到”，也就是我们无法看到图片的原因。

#### HTTP 状态

服务器在收到请求时会以一条状态信息作出响应。以下是最常见的状态：

**200: OK**

你请求的资源已递送。

**301: Moved permanently**

资源已被移到新的位置。你将无法在浏览器中看到，但了解"301"是件好事，因为搜索引擎利用这条信息更新它们的索引。

**304: Not modified**

文档在上次请求后没有再改动，因此你的浏览器可以从缓存中将其显示，从而缩短响应时间并提高带宽使用效率。

**403: Forbidden**

禁止向你显示资源。这通常与配置错误有关 (e.g. 你的托管服务提供商忘记授予你对目录的访问权限).

**404: Not found**

不言自明。我们接下来将会讨论如何解决这个问题。

**500: Internal server error**

服务器出了点问题。比如，也许是服务器端语言 (PHP, .Net, etc.) 停止工作，或者 web 服务器本身出现配置问题。通常，最好的方法是诉诸你的托管服务提供商的支持团队。

**503: Service unavailable**

通常是由于短期的系统过载造成的。服务器有一些问题，稍后重试。

作为初学者检查我们的 (简易) 网站，我们通常会处理 200,304,403 和 404。

#### 修复 404

所以是哪里出错了？

![Le list of images in our project](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/demozilla-images-list.png)

乍一看，我们请求的图片似乎在正确的位置... 但是网络工具却出现了"404"的报错。事实证明我们的 HTML 代码中出现了错别字：`unicorn_pics.png` 而不是 `unicorn_pic.png`。所以，通过在你的代码编辑器中改变图片的 `src` 属性来纠正错别字。

![Deleting the ‘s’](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/code-correct.png)

保存，推送到服务器 (en-US)，并在你的浏览器中重现加载网页。

![The image loads corectly in the browser](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-corrected.png)

搞定！让我们再看一遍 HTTP 状态：

* `/` 和 `unicorn_pic.png` 的状态码为**200**，意味着我们成功加载了页面和图片。
* `basic.css` 的状态码为**304**，意味着这个文件在上次请求后就没有再变动，因此浏览器可以在其缓存中使用该文件，而不是接收新的副本。

因此，我们修复了错误并且沿途了解了一些 HTTP 状态！

### 频繁的错误

我们发现的最频繁的错误是这些：

#### 地址中的错别字

我们想要输入 `http://demozilla.examplehostingprovider.net/` 但输入得太快而遗漏了一个“l”：

![Address unreachable](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/cannot-find-server.png)

这个地址显然无法找到。

#### 404 错误

很多时候错误只是由一个错别字导致的，但有时候也许是你忘记上传资源或者在上传资源时网络连接中断。首先检查文件路径的拼写和准确性，如果仍然存在问题，重新上传你的文件。这也许可以解决问题。

#### JavaScript 错误

有人 (也许是你) 给页面添加了脚本并且出了差错。页面仍然可以加载，但是你会觉得有点问题。

打开控制台 (**Tools ➤ Web developer ➤ Web Console**) 并重新加载页面：

![A Javascript error is shown in the Console](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/js-error.png)

在这个例子中，我们清楚（相当清楚）错误所在，可以马上进行修复 (我们将在 另一个系列 的文章中提到 JavaScript )。

### 更多需要检查的地方

我们列举了一些简单的方法来检查你的网站是否运行正常，以及你可能遇到的最常见的错误和修复方法。你还可以测试你的页面是否符合这些标准：

#### 性能如何？

页面加载足够快吗？类似 WebPagetest.org 的网站或者类似 YSlow 的浏览器附加组件可以告诉你一些有趣的事情。

![Yslow diagnostics](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/yslow-diagnostics.png)

等级从 A 到 F。我们的页面较小，符合大部分的标准。但是我们可以注意到如果使用 CDN 将会更好。当我们只提供一张图片的时候，这无关紧要，但对于提供数千张图片的高带宽网站来说，这一点至关重要。

#### 服务器响应是否足够快？

`ping` 是一个很管用的 shell 工具，用以测试你提供的域名并告诉你服务器是否响应：

```bash
$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp\_seq=0 ttl=44 time=148.741 ms
64 bytes from 63.245.215.20: icmp\_seq=1 ttl=44 time=148.541 ms
64 bytes from 63.245.215.20: icmp\_seq=2 ttl=44 time=148.734 ms
64 bytes from 63.245.215.20: icmp\_seq=3 ttl=44 time=147.857 ms
^C
--- mozilla.org ping statistics ---

4 packets transmitted, 4 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
```

记住一个方便的键盘快捷键：**Ctrl+C** 。Ctrl+C 给运行发送了一个“中断”信号并令其中止。如果你不中止运行， `ping` 将会不断地 ping 服务器。

### 一份简易清单

* 检查 404
* 确保所有的网页都按预期运行
* 在多个浏览器中查看你的网站，以确保它的运行表现一致
下一步
---

恭喜，你的网站已经成功运作，任何人都可以访问。这是一项巨大的成就。现在，你可以开始深入探索各种主题。

* 来自世界各地的人会进入你的网站，你应该考虑 让每个人都可以访问网站 (en-US) 。
* 你的网站是否设计的得太粗糙了？是时候了解更多 CSS (en-US) 了。


什么文本编辑器比较好用？ - 学习 Web 开发

什么文本编辑器比较好用？
============

在这篇文章中我们强调了关于 web 开发者安装文本编辑器的一些考虑事项。

|  |  |
| --- | --- |
| 前提： | 你应该已经知晓了为了建立一个网站所需的各种软件。 |
| 目标： | 学习作为一个 web 开发者如何选择一个最适合自己需求的文本编辑器。 |

概要
--

一个网站包括很多文本文件，所以为了拥有一个有趣的，令人愉快的开发经历你应该明智地选择你的文本编辑器。

可做选择的文本编辑器数量实在是太多了，因为文本编辑器对于计算机科学来说是如此基础（是的，web 开发是计算机科学）。按理想来说，你应该尽你可能的尝试足够多的编辑器然后感受出来哪一款适合你的工作流程。但是我们将会给予你一些初学者的建议。

以下是一些你应该考虑的基本问题：

* 我想在哪一个操作系统上工作？
* 我想使用什么样的技术？
* 我希望我的文本编辑器具备哪些基本功能？
* 我想为我的文本编辑器添加额外功能吗？
* 当使用文本编辑器时我需要支持或者帮助吗？
* 对我来说文本编辑器的外观和感觉重要吗？

注意我们没有提及价格。显然，这也是要注意的，但一件产品的成本和它的质量或性能几乎没有关系。很大概率下，你能找到一个合适的免费文本编辑器。

以下是一些流行的编辑器：

| 编辑器 | 授权条款 | 价格 | 操作系统 | 支持 | 文档 | 可扩展性 |
| --- | --- | --- | --- | --- | --- | --- |
| Atom | MIT/BSD | 免费 | Windows, Mac, Linux | GitHub Issues | 在线指南 | 是 |
| Bluefish | GPL 3 | 免费 | Windows, Mac, Linux | 邮件列表、Wiki | 在线指南 | 是 |
| Brackets | MIT/BSD | 免费 | Windows, Mac, Linux | IRC | GitHub Wiki | 是 |
| Nova | 闭源 | $99 | Mac | 推特、论坛和在线 | 电子书 | 是 |
| CodeLobster | 闭源 | 免费 | Windows, Mac, Linux | 论坛、电子邮件 | 在线指南 | 是 |
| Emacs | GPL 3 | 免费 | Windows, Mac, Linux | 常见问题、
 邮件列表和新闻组 | 在线指南 | 是 |
| Espresso | 闭源 | $99 | Mac | 电子邮件 | 在线指南 | 是 |
| Gedit | GPL | 免费 | Windows, Mac, Linux | Discourse、IRC | 在线指南 | 是 |
| Kate | LGPL, GPL | 免费 | Windows, Mac, Linux | 邮件列表、IRC | 在线指南 | 是 |
| Komodo Edit | MPL | 免费 | Windows, Mac, Linux | 论坛 | 在线指南 | 是 |
| Notepad++ | GPL | 免费 | Windows | 论坛 | 在线指南 | 是 |
| PSPad | 闭源 | 免费 | Windows | 常见问题、论坛 | 在线帮助 | 是 |
| Sublime Text | 闭源 | $70 | Windows, Mac, Linux | Forum | 官方文档、非官方文档 | 是 |
| TextMate | 闭源 | $50 | Mac | 推特、IRC、邮件列表和电子邮件 | 在线指南、Wiki | 是 |
| BBEdit | 闭源 | 免费 | Mac | 常见问题 | 在线指南 | 否 |
| Vim | 特殊开源 | 免费 | Windows, Mac, Linux | 邮件列表 | 在线指南 | 是 |
| Visual Studio Code | 在 MIT 协议/特殊产品授权下开源 | 免费 | Windows, Mac, Linux | 常见问题 | 文档 | 是 |

主动学习
----

在本章节中，我们希望你能尝试使用和（或）安装一个你选择的文本编辑器。你的计算机可能已经安装了上述建议的编辑器之一（例如，如果使用了 GNOME 桌面，可能已经安装了 Gedit；如果使用了 KDE 桌面，可能已经安装了 Kate），如果没有，你应该尝试安装一个或多个你选择的文本编辑器。

试着挖掘你的编辑器的设置，并阅读手册或文档，看看它的功能是什么。特别是尝试一下（如果在你的编辑器中可能的话）：

* 改变语法高亮的设置和颜色
* 反复调整缩进宽度，将其设置为适合你需要的适当值
* 检查自动保存和会话保存设置
* 配置任何可用的插件并研究如何获得新的插件
* 改变配色方案
* 调整视图设置，看看如何能改变视图的布局
* 检查你的编辑器支持哪些编程语言或技术

在你学习的时候，大多数文本编辑器的默认设置应该是可以使用的，但重要的是要熟悉你选择的工具，这样你就可以选择最适合你使用的工具。随着经验的积累，你会学到更多关于定制编辑器和工具的知识，更重要的是你会学到哪些功能对你的目的更有用。

深入挖掘
----

### 选择标准

所以，更详细地说，你在选择文本编辑器时应该怎么考虑？

#### 我想在哪个操作系统上工作？

当然这是你的选择。然而，一些编辑器只支持特定的操作系统，所以如果你喜欢切换系统，这将会缩小你的选择范围。只要在你的系统上运行了，任何文本编辑器都*能*完成工作，但跨平台的编辑器可以轻松的在操作系统间迁移。

所以首先找出你使用的操作系统，然后检查指定的编辑器是否支持你的操作系统。大多数编辑器在他们的网站上指定了是否支持 Windows 或 Mac，尽管一些编辑器只支持某些版本（比如说只有 Windows 7 或更高版本而不是 Vista）。如果正在运行 Ubuntu，最好的方法是在 Ubuntu 软件中心内进行搜索。当然，一般来说，Linux / UNIX 系列是一个相当多元化的地方，其中不同的发行版与不同的不兼容的包装系统配合使用。这意味着，如果你强烈地（而不是微弱的）想使用某些未经编译的文本编辑器，则可能需要下载源码自己编译它。

#### 我想使用什么样的技术？

一般来说，任何文本编辑器都可以打开任意文本文件，这对于自己写笔记来说是非常有用的。但是当使用 HTML、CSS 和 JavaScript 进行 Web 开发和编写时，你将生产出又大又复杂的文件。选择一个适用你使用的技术的文本编辑器，可以使你更轻松自如。许多文本编辑器可以帮助你实现如下功能：

* **语法高亮** 根据你使用的技术，对关键字进行颜色编码，使你的文件更清晰。
* **代码补全** 通过自动完成重复出现的结构（例如，自动关闭 HTML 标签或为给定的 CSS 属性建议有效值）为你节省时间。
* **代码段** 正如你在启动一个新的 HTML 文档时看到的，许多技术一遍又一遍地使用相同的文档结构。通过使用代码段预先填写你的文档，可以节省你重新输入所有这些的麻烦。

大多数文本编辑器现在都支持语法高亮，但不一定是支持其他两个功能。需要确保你的文本编辑器支持对 HTML、CSS 和 JavaScript 语法的高亮。

#### 我希望我的文本编辑器具备哪些基本功能？

这取决于你的需求和计划。以下功能通常是很有帮助的：

* 根据正则表达式或其他模式的需要，在一个或多个文档中搜索和替换
* 快速跳到指定行
* 分别查看一个大文件的两个部分
* 预览 HTML 在浏览器中的显示情况
* 一次性选择多处文字
* 查看项目的文件和目录
* 使用代码美化程序自动格式化代码
* 检查拼写
* 根据缩进设置自动缩进代码

#### 我想为我的文本编辑器添加额外功能吗？

可扩展的编辑器具有较少的内置功能，但可以根据你的需要进行扩展。

如果你不确定要使用哪些功能，或者你最喜欢的编辑器缺少这些功能，使用可扩展编辑器吧。最好的编辑器将会提供许多插件，理想的方法是自动查找和安装新的插件。

如果你喜欢的功能*很多*，并且你的编辑器因为安装插件而变慢，请尝试使用 IDE（集成开发环境）。IDE 在一个界面中提供了许多工具，对于初学者来说，这是一个令人望而生畏的工作，但是如果你感觉你的文本编辑器功能有限，这是一个不错的选项。以下是一些流行的 IDE：

* Aptana Studio
* Eclipse
* Komodo IDE
* NetBeans IDE
* Visual Studio
* WebStorm

#### 当使用文本编辑器时我需要支持或者帮助吗？

如果在使用软件时可以获得帮助总是令人高兴的。对于文本编辑器，请检查两种不同类型的支持：

1. 面向用户的内容（常见问题，指南，在线帮助）
2. 与开发者和其他用户讨论（论坛，电子邮件，IRC）

在学习如何使用编辑器时使用书面文档。如果在安装或使用编辑器时遇到了疑难问题，请与其他用户联系。

#### 对我来说文本编辑器的外观和感觉重要吗？

这个问题在于个人品味，但有些人喜欢自定义 UI（用户界面）的每一个细节，从颜色到按钮位置。编辑器的灵活性差异很大，所以选择前先检查一下。找到一个可以改变配色方案的文本编辑器并不难，但是如果你想要大量的自定义，你可能最好使用 IDE。

### 安装并设置

安装文本编辑器通常很简单。方法根据你的平台而有所不同，但都不难：

* **Windows** 开发人员会给你一个 `.exe` 或 `.msi` 文件。也有时候，软件为自带的压缩归档格式 `.zip`、`.7z` 或 `.rar`，在这种情况下，你需要安装其他程序来提取压缩文件的内容。Windows 默认情况下支持 `.zip`。
* **Mac** 在编辑器的网站上，可以下载一个 `.dmg` 文件。也可以直接在 Apple Store 找到一些文本编辑器，安装过程更简单。
* **Linux** 在最受欢迎的发行版中，你可以从图形包管理器（Ubuntu Software Center、mintInstall、GNOME Software 等）开始。你通常可以发现一个预先包装软件的 `.deb` 或 `.rpm` 文件，但大多数时候你将使用你的发行版系统的存储库服务器，或者在最坏的情况下，从源代码编译编辑器。花时间仔细检查文本编辑器网站上的安装说明。

当安装新的文本编辑器时，你的操作系统可能会继续使用其默认编辑器打开文本文件，直到更改文件关联。这些说明将帮助你在指定操作系统中双击打开文件时选定首选编辑器：

* Windows
    + Windows 8
    + Windows 7
    + 更旧的系统
* Mac OS X
* Linux
    + Ubuntu Unity
    + GNOME
    + KDE
下一步
---

现在你已经选择了一个合适的文本编辑器，可以花一些时间来搭建基本工作环境，或者，如果想立即使用它，可以写下你的第一个网页。


如何在 Google App Engine 上托管你的网站？ - 学习 Web 开发

如何在 Google App Engine 上托管你的网站？
==============================

Google App Engine 是一个功能强大的平台，它能让你在谷歌的 infrastructure 上构建并运行应用，你可以在这上面：从头构建多层 WEB 应用，或建立一个静态网站。

接下来是手把手入门的教程：

创建一个谷歌云平台项目
-----------

为了在你自己的网站或者 app 使用谷歌的工具，你需要在谷歌云平台上创建一个新项目 ( a new project ) 当然，需要谷歌账号。

1. 打开谷歌云平台控制台（Google Cloud Platform Console），再打开 App Engine dashboard 页面 并点击 *Create* .
2. 如果从未创建过项目 (project)，会提示你是否选择接收邮箱升级，并需要同意团队服务条款才能继续。
3. 键入项目名，并编辑项目 ID(请记下你的项目 ID)
 本教程的示例值：
    * Project Name: *GAE Sample Site*
    * Project ID: *gaesamplesite*
4. *点击 Create* 以创建工程
创建一个应用 (application)
--------------------

每个云平台项目都可以包含一个 APP 引擎应用，所以我们来为自己的项目准备一个 app

1. 我们需要一个样例应用来发布。如果你还没有，请下载 sample app 并解压。
2. 看一下这个样例应用的结构—`website`文件夹包括你的网站内`容，app.yaml`文件是你的应用配置文件
    * 你的网站内容必须放在`website`文件夹下，并且入口文件必须取名为`index.html`，其他部分可以自行定义。
    * `app.yaml` 文件是一个配置文件，它高速应用引擎怎么映射 UR 到你的静态文件，你不需要编辑它。
发布你的应用
------

现在我们已经制作了我们的项目并将示例应用程序文件收集在一起，下面发布应用程序。

1. 打开Google Cloud Shell.
2. 把 `sample-app`目录拖拽到代码编辑器左边
3. 在命令行中键入如下命令选择你的项目：

```bash
gcloud config set project gaesamplesite
```

4. 键入如下命令 进入到 app 的 目录：

```bash
cd sample-app
```

5. 你现在可以部署应用程序，即将应用程序上传到 App Engine：

```bash
gcloud app deploy
```

6. 输入一个数字以选择你希望应用程序所在的区域。.
7. 键入 `Y` 确认。
8. 现在你可以在浏览器中访问你的站点了，比如对于项目 ID 是*gaesamplesite 的网站*, go 输入 *gaesamplesite*.appspot.com访问。
更多信息
----

请访问Google App Engine Documentation.


如何设置一个本地测试服务器？ - 学习 Web 开发

如何设置一个本地测试服务器？
==============

本文将会介绍如何在你的计算机上安装一个简单的本地测试服务器，以及它的基本用法。

|  |  |
| --- | --- |
| 前提： | 你需要知道互联网是怎么工作的，以及什么是 web 服务器。 |
| 目标： | 你将学习如何配置本地测试服务器。 |

本地文件与远程文件
---------

在大多数示例中，我们告诉你只需在浏览器中直接打开你的示例，有很多方法可以实现这一点，你可以通过双击 HTML 文件或将其拖拽到浏览器窗口中，或者在浏览器中选择 *文件 > 打开...* 选择 HTML 文件等。

如果你打开的是本地示例的话，你可以在地址栏看到这个地址是以 `file://` 开头的，接着本地硬盘上该示例文件的路径。相比之下，如果你查看的是我们在 GitHub 上托管的示例（或其他远程服务器上的示例），web 地址会以 `http://` 或 `https://` 开头，说明该文件是通过 HTTP 传输的。

测试本地文件存在的问题
-----------

如果你将某些示例作为本地文件打开的话，它将不会运行。这可能是由于各种原因，最有可能是：

* **它们具有异步请求**。如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅从服务器获取数据）。这是因为安全限制（更多关于 Web 安全的信息，请参阅站点安全）。
* **它们具有服务端代码**。服务器端语言（如 PHP 或 Python）需要一个特殊的服务器来解释代码并提供结果。
* **它们引用其他文件**。浏览器通常将使用 `file://` 协议加载资源的请求视为跨域请求。所以，如果你加载了一个引用了其他本地文件的本地文件，就有可能会导致 CORS 的问题。
运行一个简单的本地 HTTP 服务器
------------------

### 在代码编辑器中使用扩展

如果你只需要 HTML、CSS 和 JavaScript，并且不需要服务器端的语言，那么最简单的方法可能是在你的代码编辑器中查找扩展。除了自动化安装和设置本地 HTTP 服务器之外，它们还能很好地与你的代码编辑器集成。在 HTTP 服务器中测试本地文件可能仅需一键即可。

对于 VSCode，你可以查看以下免费的扩展：

* `vscode-preview-server`。你可以在其主页上查看。
### 使用 Python

实现这一目标的另一种方法是使用 Python 的 `http.server` 模块。

**备注：** 旧版本的 Python（直到版本 2.7）提供了一个类似的模块，名为 `SimpleHTTPServer`。如果你正在使用 Python 2.x，你可以通过将所有的 `http.server` 替换为 `SimpleHTTPServer` 来遵循这个指南。然而，我们建议你使用 Python 的最新版本。

要做到这一点：

1. 安装 Python。如果你正在使用 Linux 或 macOS，那么它应该已经在你的系统上。如果你是 Windows 用户，你可以从 Python 主页获取安装程序，然后按照说明来安装它：
    * 访问 python.org
    * 在下载部分，点击 Python“3.xxx”的链接。
    * 在页面底部，点击 *Windows 安装程序*链接来下载安装文件。
    * 下载完成后，运行它。
    * 在第一个安装程序页面，确保你勾选了“Add Python 3.xxx to PATH”（添加 Python 3.xxx 到系统路径）的复选框。
    * 点击*安装*，然后在安装完成后点击*关闭*。
2. 打开你的命令提示符（Windows）/终端（macOS/ Linux）。要检查 Python 是否已安装，输入以下命令：

```bash
python -V
# 如果以上命令失败，尝试：
python3 -V
# 或者，如果“py”命令可用，尝试：
py -V
```

3. 它应该返回版本号。如果运行正常，请使用 `cd` 命令导航到你的示例所在的目录。

```bash
# 包含目录名字以进入它，例如
cd Desktop
# 如果需要的话，使用两个点来跳出一个目录级别
cd ..
```

4. 在该目录下输入命令启动服务器：

```bash
# 如果上面返回的 Python 版本是 3.X
# 在 Windows 上，尝试“python -m http.server”或“py -3 -m http.server”
python3 -m http.server
# 如果上面返回的 Python 版本是 2.X
python -m SimpleHTTPServer
```

5. 默认情况下，这会在 8000 端口上启动本地服务器，以提供文件夹中的内容。你可以在浏览器中访问 URL `http://localhost:8000` 来访问服务器。你将在此处看到列出的目录内容——点击你要运行的 HTML 文件即可。

**备注：** 如果你已经在端口 8000 上运行了一些内容，你可以通过在运行服务器的命令后面加上备用端口号来选择另一个端口，例如 `python3 -m http.server 7800`（Python 3.x）或 `python -m SimpleHTTPServer 7800`（Python 2.x）。然后你可以在 `localhost:7800` 访问你的内容。

在本地运行服务器端语言
-----------

Python 的 `http.server`（或 Python 2 的 `SimpleHTTPServer`）模块很有用，但它仅仅是一个*静态*文件服务器，不知道如何运行用 Python、PHP 或 JavaScript 等语言编写的代码。为了处理这个问题，你需要更多的东西——你需要的东西取决于你尝试运行的服务器端语言。这里有几个例子：

* 要运行 Python 服务器端代码，你需要使用 Python web 框架。Python 有很多流行的 web 框架，例如 Django（有一个指南可供参考）、Flask 和 Pyramid。
* 要运行 Node.js（JavaScript）服务器端代码，你可以直接使用 Node 或选择构建于其上的框架。Express 是一个不错的选择——请参阅 Express Web 框架（Node.js/JavaScript）。
* 要运行 PHP 服务器端代码，启动 PHP 的内置开发服务器：

```bash
cd path/to/your/php/code
php -S localhost:8000
```


我需要什么软件来构建一个网站 - 学习 Web 开发

我需要什么软件来构建一个网站
==============

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

|  |  |
| --- | --- |
| 先决条件： | 你应当已经知道网页、网站、网络服务器，以及搜索引擎间的区别 (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? - 学习 Web 开发

应该如何使用 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 开发

在互联网上做一件事要花费多少？
===============

参与互联网（运营网站）并不像看起来那么便宜。本文中我们将讨论你所需的花费及理由。

|  |  |
| --- | --- |
| 准备工作： | 你已经了解你需要什么软件，以及网页、网站等术语之间的差异，以及域名是什么。 |
| 目标： | 评估创建一个网站的完整流程，计算每个步骤的花费。 |

概要
--

经营一个网站可以一毛不拔，也可以倾家荡产。本文中我们将讨论各种事项的花费，以及如何将钱花得物有所值（或者白嫖）。

软件
--

### 文本编辑器

你八成已经拥有一个文本编辑器，例如 Windows 上的记事本、Linux 上的 Gedit 或是 Mac 上的 TextEdit。但如果选择一个拥有语法高亮、语法检查和代码组织功能的编辑器，就能更得心应手地写代码。

有很多免费的编辑器，例如 Atom、Brackets、Bluefish、TextWrangler、Eclipse、Netbeans 和 Visual Studio Code。Sublime Text 之类的编辑器可以无限制试用，但最好还是付费购买。PhpStorm 之类的编辑器则需花费几十至两百美元不等，取决于你购买的种类。Microsoft Visual Studio 之类的编辑器则可能需要花费数百至数千美元，不过 Visual Studio Express 对独立开发者和开源项目免费。付费编辑器通常都有试用版。

开始学习时，我们建议你尝试几个不同的编辑器，找到最适合自己的。如果你只写简单的 HTML、CSS 和 Javascript，就挑个简易的编辑器。

价格并不一定能体现编辑器的品质和实用程度。试过才知道满不满足需求。比如说 Sublime Text 很便宜，但有很多免费插件可供极大程度的扩展功能。

### 图像编辑器

你的系统可能已经自带了一个简单的图像编辑器或者图像浏览器（Windows 上的画图，Ubuntu 上的 Eye of Gnome, Mac 上的 Preview）。但是这些程序功能都很有限然后很快，你就会需要一个更强大的编辑器来添加图层，效果和分组。

编辑器的价格可以是免费的（GIMP），还有中等价位（PaintShop Pro，少于 100 美元）或几百美元（Adobe Photoshop）。

你可以使用其中的任何一款。它们都具有大致相同的功能（尽管其中一些功能非常完整，你可能永远不会使用所提供的每个功能)。无论如何，如果在某些时候你需要与其他设计师交流正在进行的项目，那么你应该首先了解他们正在使用的工具。编辑器可以将完成的项目导出为标准文件格式，但每个编辑器都可以按照专门的项目格式保存正在进行的项目。

### 媒体编辑器

如果你想在你的网站中添加音频或者视频，那么你可以嵌入在线服务（例如 YouTube，Vimeo 或 Dailymotion）或包含你自己的视频（请参阅下面的带宽费用)。

对于音频文件，你可以找到免费软件（Audacity，Wavosaur）或支付高达几百美元（Sony Sound Forge，Adobe Audition）。视频编辑软件同样可以免费使用（PiTiVi，OpenShot for Linux，iMovie for Mac），少于 100 美元（Adobe Premiere Elements）或几百美元（Adobe Premiere Pro，Avid Media Composer，Final Cut Pro）。你使用数码相机购买的软件可能已经涵盖了你的所有需求。

### 发布工具

你还需要一种将文件从本地硬盘上传到远程 Web 服务器的方法。为了做到这一点，你必须使用 FTP 客户端。

每个系统都包含一个 FTP 客户端作为文件管理器的一部分。Windows 资源管理器，Nautilus（一个常见的 Linux 文件管理器）和 Mac Finder 都包含该功能。然而，人们更经常选择专门的 FTP 客户端，可以存储密码并且并行显示本地和远程目录。

如果你需要安装一个 FTP 客户端，这里有很多免费的选择：例如，可以全平台使用的 FileZilla , windows 上使用的WinSCP , Mac 和 windows 上都能使用的 Cyberduck ，还有很多)。

**备注：** 还有其他方法可以在远程服务器上发布内容，如 rsync 和 git，但并不像 FTP 那样简单，我们不会在这里讨论。

浏览器
---

你已经拥有了一个浏览器或者可以免费下载一个。如果需要的话，在这下载火狐浏览器或者 Google Chrome 浏览器。

网络访问
----

### 电脑 / 调制解调器

你需要一台电脑。费用根据你的预算和你住的地方而有很大的不同。要发布准系统网站，你只需要一台能够启动编辑器和浏览器的基本计算机，因此整个的价格相当低。

如果你要做更深入的设计，编辑图像，或是生产音频和视频文件，当然需要更高级的电脑。

你要上传内容到远程服务器上（见下面的 hosting），所以你需要一个调制解调器。更多时候你的网络服务提供商以每个月一些钱出租互联网连接给你。

### 互联网提供商连接

确保你有足够的带宽

* 低带宽连接或许能够支持一个“简单的”网站（合理大小的图像，文本，一些层叠样式表 CSS 和 JavaScript）。这些将会花费数十美元，包括租赁调制解调器。
* 另一方面，你可能需要更高级的数字用户线路，电缆，光纤通道如果你想要一个带有数以百计文件的大型网站或者你想要从 ide 网页服务器传输大量的音/视频。这可能花费的和低带宽连接一样，或者每个月几百美元用以专业使用。
主机
--

### 理解带宽

主机供应商通过你网站消耗的带宽来收费。这些取决于在一个给定的时间内多少人或机器人访问你的内容、你的内容占用多少的服务空间（这就解释了为什么人们通常把他们的视频存储在比如 Youtube、Dailymotion 和 Vimeo 等专用服务上）。实际上，你的供应商可能 有个计划规定某个实例每天至多有几千访问的可用带宽用量（不同的主机供应商的规定通常都不同）。根据经验，考虑那些月付十到五十美元的个人主机。

**备注：** 从来没有“无限”带宽这样的东西。如果你真的需要消耗大量的带宽，等着付一大把的票子吧。

### 域名

你的域名必须由域名提供商（注册商）购买。你的托管服务提供商也可能是注册服务商（1＆1，例如 甘地 同时是注册商和托管服务提供商）。域名通常每年花费 5-15 美元。费用取决于：

* 地方合同（一些国家顶级域名的成本非常高，因为不同的国家设定了不同的价格）
* 与域名相关的服务：一些注册商通过将你的邮政地址和电子邮件地址隐藏在他们自己的地址后面来提供垃圾邮件保护（相应地，邮政地址可以提供给注册服务商，邮件地址可以隐藏在属于注册服务商的别名下）。
### 自己动手托管与“打包”托管

当你想发布一个网站时，你可以自己做所有事情：建立一个数据库（如果需要的话），建立一个内容管理系统或CMS（如 Wordpress ， Dotclear ，spip ，等等），上传预制的模板或你自己的模板。

你还可以依赖你的托管服务提供商已设置的环境，通常每月支付十美元至十五美元的费用，或者直接通过预先打包的 CMS（例如 Wordpress ，Tumblr，Blogger ）直接订阅专用托管服务。在后一种情况下，你不需要支付任何费用，但是你对模板的控制可能较少。

### 免费托管与付费托管对比

你可能会问，为什么在有这么多免费服务时，我还应该去支付我的托管费用？

1. 当你付费，你有更多的自由。你的网站是你的，你可以从一个主机提供商无缝迁移到下一个。
2. 免费托管服务提供商可能会将你的内容广告添加到你的内容中，而不受你的控制

有些人选择了一种混合的方式：例如，将他们的主博客放在带有适当域名的付费主机上，并使用另一种免费服务来托管自发的，不太具有战略性的内容。

专业网站机构和托管
---------

如果你想拥有一个专业的网站，你很可能会要求网络公司为你做这件事。

这里的成本取决于多种因素，例如：

* 这是一个有几页文字的简单网站吗？还是一个复杂的，长达千页的网站？
* 你想定期更新吗？或者它将成为一个静态网站？
* 网站必须连接到公司的 IT 部门以收集内容（比如内部数据）吗？
* 你是否想要一些在当下的闪亮的新功能？ （例如：在撰写本文时，页面客户端具有复杂视差）
* 你是否需要该机构来考虑用户信息或解决复杂的 UX 问题（例如，创建一个吸引用户的策略或者进行一些 AB 测试以在几个想法中选择最佳解决方案）？

另外，为了托管的目的，

* 你是否想要冗余服务器，以防服务器故障吗？
* 95％的可靠性已经足够了，还是需要专业的全天候服务？
* 你需要高性能，高响应速度的专用服务器，还是只可以应付慢速共享的机器？

根据你对这些问题的选择，你的网站可能会花费数千到数十万美元。

下一步
---

现在你已经了解了你的网站可能会花费哪些方面的资金，现在该开始设计该网站，并设置你的工作环境了。

* 阅读如何选择和安装文本编辑器 。
* 如果你更专注于设计，请查看网页的解剖结构 。


什么是 URL？ - 学习 Web 开发

什么是 URL？
========

本文讨论了统一资源定位符 (URL)，并解释了他们是什么，以及如何被构建的。

|  |  |
| --- | --- |
| 前提： |
 你首先需要知道互联网是如何工作的，什么是网络服务器
 以及
 网络中超链接的概念。
  |
| 目标： | 你将会学习到 URL 是什么，以及它在网络上是如何工作的。 |

概述
--

和 Hypertext 以及 HTTP 一样，**URL** 是 Web 中的一个核心概念。它是浏览器用来检索 web 上公布的任何资源的机制。

**URL** 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 web 服务器的拥有者需要认真地维护资源以及与它关联的 URL。

自主学习
----

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

深入探索
----

### 基础：剖析 URL

下面是一些 URL 的示例：
```

https://developer.mozilla.org
https://developer.mozilla.org/zh-CN/docs/Learn/
https://developer.mozilla.org/zh-CN/search?q=URL
```

你可以将上面的这些网址输进你的浏览器地址栏来告诉浏览器加载相关联的页面（或资源）。

一个 URL 由不同的部分组成，其中一些是必须的，而另一些是可选的。让我们以下面这个 URL 为例看看其中最重要的部分：

![完整的 URL](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-all.png)

协议
--

![Scheme](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-protocol@x2_update.png)

`http` 是协议。它表明了浏览器必须使用何种协议。它通常都是 HTTP 协议或是 HTTP 协议的安全版，即 HTTPS。Web 需要它们二者之一，但浏览器也知道如何处理其他协议，比如 `mailto:`（打开邮件客户端）或者 `ftp:`（处理文件传输），所以当你看到这些协议时，不必惊讶。

Authority
---------

![Authority](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-authority.png)

* `www.example.com` 是域名。它表明正在请求哪个 Web 服务器。或者，可以直接使用IP address，但是因为它不太方便，所以它不经常在网络上使用。
* `:80` 是端口。它表示用于访问 Web 服务器上的资源的技术“门”。如果 Web 服务器使用 HTTP 协议的标准端口（HTTP 为 80，HTTPS 为 443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。
资源路径
----

![文件路径](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-path@x2.png)

`/path/to/myfile.html` 是网络服务器上资源的路径。在 Web 的早期阶段，像这样的路径表示 Web 服务器上的物理文件位置。如今，它主要是由没有任何物理现实的 Web 服务器处理的抽象。

参数
--

![参数](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-parameters@x2.png)

`?key1=value1&key2=value2` 是提供给网络服务器的额外参数。这些参数是用 `&` 符号分隔的键/值对列表。在返回资源之前，Web 服务器可以使用这些参数来执行额外的操作。每个 Web 服务器都有自己关于参数的规则，唯一可靠的方式来知道特定 Web 服务器是否处理参数是通过询问 Web 服务器所有者。

锚点
--

![锚点](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-anchor@x2.png)

`#SomewhereInTheDocument` 是资源本身的另一部分的锚点。锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。例如，在 HTML 文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。值得注意的是，＃后面的部分（也称为片段标识符）从来没有发送到请求的服务器。

**备注：** 这里是关于 URL 的一些额外的部分和一些额外的规则，但它们对于普通用户或 Web 开发者不是非常重要。你不必担心这个，要构筑和使用完全实用的 URL 不必了解这些。

你可能想到一个 URL 类似普通信件的地址：协议代表你要使用的邮政服务，域名是城市或者城镇，端口则像邮政编码；路径代表着你的信件所有递送的大楼；参数则提供额外的信息，如大楼所在单元；最后，锚点表示信件的收件人。

### 如何使用 URL

可以直接在浏览器的地址栏里输入任何 URL，来获得后台的资源。但是这仅仅是冰山一角。

HTML 语言 — 后续会再来讨论 (en-US) — 对 URLs 有大量的使用：

* 为在其他文档中新建链接，用 `<a>` ;
* 为将文档与它的相关资源关联，用各种标签如 `<link>` 或 `<script>` ;
* 为显示多媒体如图片 (用 `<img>` ), 视频 (用 `<video>` ), 声音和音乐 (用 `<audio>` ), 等等;
* 为显示其他 HTML 文档，用 `<iframe>` .

其他大量使用 URLs 的技术如 CSS 或 JavaScript, 这些才是 Web 的中心。

### 绝对 URL 和相对 URL

我们上面看到的是一个绝对的 URL，但也有一个叫做相对 URL 的东西。我们来看看这个区别意味着什么呢？

URL 的必需部分在很大程度上取决于使用 URL 的上下文。在浏览器的地址栏中，网址没有任何上下文，因此你必须提供一个完整的（或绝对的）URL，就像我们上面看到的一样。你不需要包括协议（浏览器默认使用 HTTP）或端口（仅当目标 Web 服务器使用某些异常端口时才需要），但 URL 的所有其他部分都是必需的。

当文档中使用 URL 时，例如 HTML 页面中的内容有所不同。因为浏览器已经有文档自己的 URL，它可以使用这些信息来填写该文档中可用的任何 URL 的缺失部分。我们可以通过仅查看 URL 的路径部分来区分绝对 URL 和相对 URL。**如果 URL 的路径部分以“/”字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文**。

我们来看一些例子来使这个更清楚。

#### 绝对 URL 示例

|  |  |
| --- | --- |
| 完整网址（与之前使用的网址相同） |
```
https://developer.mozilla.org/zh-CN/docs/Learn
```
 |
| 隐去协议 |
```
//developer.mozilla.org/zh-CN/docs/Learn
```

在这种情况下，浏览器将使用与用于加载该 URL 的文档相同的协议来调用该 URL。 |
| 隐去域名 |
```
/zh-CN/docs/Learn
```

这是 HTML 文档中绝对 URL 最常见的用例。浏览器将使用与用于加载托管该 URL 的文档相同的协议和相同的域名。**注意**：不可能省略该域名而不省略协议。 |

#### 相对 URL 示例

为了更好地了解以下示例，我们假设从位于以下 URL 的文档中调用 URL： `https://developer.mozilla.org/zh-CN/docs/Learn`

|  |  |
| --- | --- |
| 子资源 |
```
Skills/Infrastructure/Understanding_URLs
```

因为该 URL 不以 / 开头，浏览器将尝试在包含当前资源的子目录中查找文档。所以在这个例子中，我们真的想要达到这个 URL `https://developer.mozilla.org/zh-CN/docs/Learn/Skills/Infrastructure/Understanding_URLs` |
| 回到目录树中 |
```
../CSS/display
```

在这种情况下，我们使用从 UNIX 文件系统世界继承的../写入约定来告诉我们要从一个目录上升的浏览器。在这里，我们要达到以下 URL：https://developer.mozilla.org/zh-CN/docs/Learn/../CSS/display，可以将其简化为：https://developer.mozilla.org/zh-CN/docs/CSS/display |

### 语义 URL

尽管 URL 具有非常的技术性，但 URL 表示一个可读性的网站入口点。它们可以被记住，并且任何人都可以将它们输入浏览器的地址栏。人是 Web 的核心，因此建立所谓的 *semantic URLs* 被认为是最佳实践。语义 URL 使用具有固有含义的单词，任何人都可以理解，无论他们的技术水平如何。

语言语义当然与电脑无关。你可能经常看到看起来像随机字符混搭的网址。但创建人类可读的 URL 有很多优点：

* 操作它们更容易
* 它根据用户在哪里，他们在做什么，他们正在阅读或在网络上进行互动来澄清用户的情况。
* 一些搜索引擎可以使用这些语义来改进相关页面的分类。
下一步
---

* 理解域名


什么是超链接？ - 学习 Web 开发

什么是超链接？
=======

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

|  |  |
| --- | --- |
| 前提： |
 你该知道
 互联网是怎样工作的 ，并且熟悉
 网页，网站，网络服务器和搜索引擎间的区别 |
| 目标： | 了解 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 服务器和搜索引擎的区别是什么。 |
| 目标： | 了解 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 服务器。


互联网是如何工作的 - 学习 Web 开发

互联网是如何工作的
=========

这篇文章讨论什么是互联网以及它是如何工作的。

|  |  |
| --- | --- |
| 前提： |
 无，但是鼓励先去阅读
 关于设定项目目标的文章 |
| 目标： | 你将会学习到网络的基础技术，以及它与互联网的区别。 |

概述
--

互联网是网络的支柱，以这种技术为基础使网络成为可能。作为基础，互联网是把电脑互相连接起来的一个巨大网络。

互联网的历史有些模糊不清。它始于 1960 年美国军方资助的研究项目。1980 年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。

自主学习
----

* 五分钟告诉你互联网是如何工作的: Aaron Titus 在五分钟的一个视频中告诉你非常基础的互联网知识。
深入探索
----

### 一个简单的网络

当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式 (通常是网线) 还是无线方式（比如 WiFi 或 蓝牙 )。所有现代电脑都支持这些连接。

**备注：** 接下来的内容，我们将只谈论有线连接，而无线连接的原理与此相同。

![Two computers linked together](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-1.png)

通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑，但是情况立刻变得复杂了。如果你尝试连接，比如说十台电脑，每台电脑有九个插头，总共需要 45 条网线。

![Ten computers all together](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-2.png)

为了解决这个问题，网络上的每台电脑需要链接到一个叫做路由器（*router*）的特殊小电脑。路由器只干一件事：就像火车站的信号员，它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑 B，电脑 A 必须把信息发送给路由器，路由器将收到的信息转发给电脑 B，并且确保信息不会发送给电脑 C。

一旦我们把路由器加入到这个系统，我们的网络中便只需要十条网线：每台电脑一个插口，路由器上十个插口。

![Ten computers with a router](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-3.png)

### 网络中的网

到目前为止一切都很好 . 但是我们要连接成百上千，上亿台电脑呢？当然一台路由器覆盖不了这么远，但是，如果你阅读得比较认真，我们曾提到路由器像其他电脑一样，所以我们为什么不把两个路由器彼此连接呢？

![Two routers linked together](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-4.png)

我们把电脑连接路由器，接着路由器连接路由器，我们就会有无穷的规模。

![Routers linked to routers](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-5.png)

这样网络越来越接近我们所说的互联网，但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络：你的朋友，你的邻居，每个人都可以拥有自己的计算机网络。在你的房子和世界其他地方之间架设电缆将这些不同的网络连接起来是不可能的，那么你该如何处理这件事呢？其实已经有电缆连接到你的房子了，比如，电线和电话。电话基础设施已经可以把你家连接到世界的任何角落，所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器（*modem*），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。

![A router linked to a modem](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-6.png)

这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP 是一家可以管理一些特殊的路由器的公司，这些路由器连接其他 ISP 的路由器。你的网络消息可以被 ISP 捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。

![Full Internet stack](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-7.png)

### 寻找电脑

如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP 代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：`192.168.2.10`。

对于电脑这样已经很好了，但是人类却很难记忆这一串地址。为了简单处理，我们给 IP 地址取一个容易阅读的别名：域名。比如，`google.com` 被用于 IP 地址 `172.217.7.14。`这样我们通过这些域名可以很容易的通过网络连接到电脑。

### 互联网（Internet）和网络（web）

你可能注意到了，当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网（Internet）和网络（Web）是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有 一些电脑（我们称之为网络服务器（*Web servers*））可以发送一些浏览器可以理解的信息。互联网是基础设施，网络是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和IRC.

### 内联网和外联网

内联网（Intranet）是仅限于特定组织成员使用的*专用*网络。它们通常用于为成员提供一个门户，以便安全地访问共享资源、进行协作和交流。例如，一个组织的*内联网*可能包含用于共享部门或团队信息的网页、用于管理关键文档和文件的共享驱动器、用于执行业务管理任务的门户网站，以及维基、讨论板和消息系统等协作工具。

外联网（Extranet）与内联网非常相似，只是它们开放了全部或部分专用网络，允许与其他组织共享和协作。外联网通常用于安全可靠地与客户和与企业密切合作的利益相关者共享信息。其功能通常与内联网类似：信息和文件共享、协作工具、讨论板等。

内联网和外联网都在与互联网相同的基础设施上运行，并使用相同的协议。因此，经授权的成员可以从不同的物理位置访问它们。

![外联网和内联网工作原理图](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-8.png)

下一步
---

* 网络怎样工作
* 理解网页，网站，网络服务器和搜索引擎之间的不同
* 理解域名


网页，网站，网络服务器和搜索引擎的区别是什么？ - 学习 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 开发

什么是域名？
======

本文中我们讨论了域名是什么，域名是如何被构建的，以及如何获得一个域名。

|  |  |
| --- | --- |
| 前提： |
 首先你得知道
 互联网是怎么工作的
 并理解
 什么是 URL。
  |
| 目标： | 学习域名是什么，域名的工作方式，以及域名的重要性。 |

概述
--

域名（Domain names）是互联网基础架构的关键部分。它们为互联网上任何可用的网页服务器提供了方便人类理解的地址。

任何连上互联网的电脑都可以通过一个公共IP地址访问到，对于 IPv4 地址来说，这个地址有 32 位（它们通常写成四个范围在 0~255 以内，由点分隔的数字组成，比如 173.194.121.32），而对于 IPv6 来说，这个地址有 128 位，通常写成八组由冒号分隔的四个十六进制数 (e.g., `2027:0da8:8b73:0000:0000:8a2e:0370:1337`). 计算机可以很容易地处理这些 IP 地址，但是对一个人来说很难找出谁在操控这些服务器以及这些网站提供什么服务。IP 地址很难记忆而且可能会随着时间的推移发生改变。为了解决这些问题，我们使用方便记忆的地址，称作域名。

自主学习
----

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

深入探索
----

### 域名的结构

一个域名是由几部分（有可能只是一部分，也许是两部分，三部分...）组成的简单结构，它被点分隔，不同于中文书写顺序，它**需要从右到左阅读**。

![Anatomy of the MDN domain name](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/structure.png)

域名的每一部分都提供着特定信息。

TLD (en-US) （Top-Level Domain，顶级域名）

顶级域名可以告诉用户域名所提供的服务类型。最通用的顶级域名（.com, .org, .net）不需要 web 服务器满足严格的标准，但一些顶级域名则执行更严格的政策。比如：

* 地区的顶级域名，如.us，.fr，或.sh，可以要求必须提供给定语言的服务器或者托管在指定国家。这些 TLD 通常表明对应的网页服务从属于何种语言或哪个地区。
* 包含.gov 的顶级域名只能被政府部门使用。
* .edu 只能为教育或研究机构使用。

顶级域名既可以包含拉丁字母，也可以包含特殊字符。顶级域名最长可以达到 63 个字符，不过为了使用方便，大多数顶级域名都是两到三个字符。

顶级域名的完整列表是ICANN维护的。

标签 (或者说是组件)

标签都是紧随着 TLD 的。标签由 1 到 63 个大小写不敏感的字符组成，这些字符包含字母 A-z，数字 0-9，甚至“-”这个符号（当然，“-”不应该出现在标签开头或者标签的结尾）。举几个例子，`a`，`97`，或者 `hello-strange-person-16-how-are-you` 都是合法的标签。

Secondary Level Domain, 二级域名

刚好位于 TLD 前面的标签也被称为二级域名 (SLD)。一个域名可以有多个标签（或者说是组件），没有强制规定必须要 3 个标签来构成域名。例如，www.inf.ed.ac.uk 是一个正确的域名。当拥有了“上级”部分 (例如 mozilla.org)，你还可以创建另外的域名 (有时被称为 "子域名") (例如 developer.mozilla.org).

### 购买域名

#### 谁拥有域名？

你不能真正地“购买一个域名”，你只能花钱获得一个域名在一年或多年内的使用权。不过你可以延长你的使用权，同时你的续期将优先于其他人的使用申请。但你从来都没有拥有过域名。

被称为域名注册商的公司通过域名登记来记录连接你和你的域名的技术与管理信息。

**备注：** 对于一些域名，它可能不归属于某个域名注册商来负责记录。比如说，每个在.fire 下的域名由 Amazon 管理。

#### 找个可用的域名

想要知道一个给定的域名是否可用，

* 去域名注册商的网站。它们大多会提供"whois"服务，告诉你一个域名是否可用。
* 另外，如果你使用系统的内置 shell，可以在里面输入 whois 命令，下面显示的是 mozilla.org 网站的结果：

```bash
$ whois mozilla.org
Domain Name:MOZILLA.ORG
Domain ID: D1409563-LROR
Creation Date: 1998-01-24T05:00:00Z
Updated Date: 2013-12-08T01:16:57Z
Registry Expiry Date: 2015-01-23T05:00:00Z
Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
Sponsoring Registrar IANA ID: 292
WHOIS Server:
Referral URL:
Domain Status: clientDeleteProhibited
Domain Status: clientTransferProhibited
Domain Status: clientUpdateProhibited
Registrant ID:mmr-33684
Registrant Name:DNS Admin
Registrant Organization:Mozilla Foundation
Registrant Street: 650 Castro St Ste 300
Registrant City:Mountain View
Registrant State/Province:CA
Registrant Postal Code:94041
Registrant Country:US
Registrant Phone:+1.6509030800
```

正如你所见，我不能注册`mozilla.org`，因为 Mozilla 基金会已经注册它了。

另外，如果你想看看我能不能注册`afunkydomainname.org`：

```bash
$ whois afunkydomainname.org
NOT FOUND
```

正如你所见，（在本文写作时）这个域名在 whois 数据库中不存在，所以我们可以要求去注册它。祝你好运吧！

#### 获得一个域名

过程很简单：

1. 去域名注册商的网站。
2. 通常那些网站上都有突出的"获得域名"宣传，点击它。
3. 按要求仔细填表。一定要**仔细检查**你是否有将你想要的域名拼错。一旦你给错误域名付款了，便为时已晚！
4. 注册商将会在域名正确注册后通知你。数小时之内，所有 DNS 服务器都会收到你的 DNS 信息。

**备注：** 在这个过程中注册商会要求你的真实住址。请保证你正确地填写了，因为在一些国家，如果你没有提供合法的地址，注册商会关闭你的域名。

#### DNS 刷新

DNS 数据库存储在全球每个 DNS 服务器上，所有这些服务器都源于 (refer to) 几个被称为“权威名称服务器”或“顶级 DNS 服务器”。只要你的注册商创建或更新给定域名的任何信息，信息就必须在每个 DNS 数据库中刷新。知道给定域名的每个 DNS 服务器都会存储一段时间的信息，然后再次刷新（DNS 服务器再次查询权威服务器）。因此，知道此域名的 DNS 服务器需要一些时间才能获取最新信息。

**备注：** 这个时间一般被称为**传播时间**。然而这个术语是不精准的，因为更新本身没有传播 (top → down)。被你电脑 (down) 查询的 DNS 服务器只在他需要的时候才从权威服务器 (top) 中获取信息。

### DNS 请求如何工作？

正如我们所看到的，当你想在浏览器中展示一个网页的时候，输入域名比输入 IP 简单多了。让我们看一下这个过程：

1. 在你的浏览器地址栏输入`mozilla.org`。
2. 你的浏览器询问你的计算机是否已经识别此域名所确定的 IP 地址（使用本地 DNS 缓存）。如果是的话，这个域名被转换为 IP 地址，然后浏览器与网络服务器交换内容。结束。
3. 如果你的电脑不知道 `mozilla.org` 域名背后的 IP, 它会询问一个 DNS 服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的 IP。
4. 现在电脑知道了要请求的 IP 地址，你的浏览器能够与网络服务器交换内容。

![Explanation of the steps needed to obtain the result to a DNS request](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/2014-10-dns-request2.png)

下一步
---

好了，我们讲了许多有关的步骤和结构。接下来。

* 如果你想亲自实践，现在最好开始深入设计和探索 对一个网页的剖析。
* 关于建站需要的花销这类问题的讨论也是有价值的。请参考 建站需要花费多少钱。
* 或者在维基百科上阅读更多关于 域名。


常见 web 布局都包含什么？ - 学习 Web 开发

常见 web 布局都包含什么？
===============

当你设计自己站点时，最好已经对常见的 web 页面布局所包含的内容有过构思。

|  |  |
| --- | --- |
| 知识储备： | 请先保证你已经考虑过《我该怎样开始设计我的网站？》所说的内容。 |
| 学习目标： | 了解站点内容的布局规范，以及为什么这么放置。 |

概要
--

从头开始制作页面的时候，页面空白一片以至于会让人觉得没有方向感。而同时如果你没有太多经验，这也许会让你感到不知所措。这也是为什么我们要讨论 web 设计的原因：我们有 25 年以上的经验并且会告诉你很多关于设计站点的常用规范。

几乎所有的主流站点——包含如今的新焦点：移动端 web——都由以下几点构成：

“头部”

可以在每个页面的顶部看到。包含所有页面的相关信息（包括站点名字或 logo）以及一个便于使用的导航系统。

“主要内容”

最大的区域，展示了当前页面的内容。

“边缘内容”（Stuff）

包括：1、主要内容的补充部分；2、信息分享列表；3、单选导航栏。实际上，任何可以在当前页面展示又没有写入主要内容的部分都是可以划分在这的。

“页脚”

可以在每个页面的底部看到。和头部一样，包含一些对于整个页面而言不是很重要的信息，例如法律声明和联系信息。

这些要素在所有组成元素中是相当普遍的，但是他们可以以多种形式被展示。下面是一些例子（**1** 表示“头部”、**2** “页脚”；**A** “主要内容”；**B1、B2** “边缘内容”）：

**“单列”布局**。这种布局在手机浏览时显得极为重要，因为这样肯定不会导致混乱。

![Example of a 1 column layout: Main on top and asides stacked beneath it.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/1-col-layout.png)

**“双列”布局**。一般针对于平板，因为屏幕尺寸适中。

![Example of a basic 2 column layout: One aside on the left column, and main on the right column.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-right.png)
![Example of a basic 2 column layout: One aside on the right column, and main on the left column.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-left.png)

**“三列”布局**。只适合大屏幕的桌面程序（即使很多时候用户更倾向于用小窗口浏览）。

![Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout.png)
![Another example of a 3 column layout: Aside side by side on the left, Main on the right column.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout-alt.png)
![Another example of a 3 column layout: Aside side by side on the right, Main on the left column.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout-alt2.png)

当你把上述布局灵活运用到一块的时候会非常赏心悦目：

![Example of mixed layout: Main on top and asides beneath it side by side.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/1-col-layout-alt.png)
![Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-left-alt.png)
![Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-mix.png)
![Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside covering the whole second row.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-mix-alt.png)……

看完上述的例子，想必你在自己布局时会更加得心应手。你可能注意到了，“头部”和“页脚”永远是固定在顶部和底部；“主要内容”占有最大的空间以突出作用。

面对复杂的设计和非常规情况，你可以利用很多设计规范。在别的文章中，我们会介绍根据屏幕尺寸、或者根据不同页面来动态变化的布局方式。但是现在，还是都保持统一为好。

深入学习
----

*目前还没有可以深入学习的文章。何不考虑发一篇？。*

深入了解
----

让我们开始学习一些知名站点的具体例子。

### “单列”布局

**Invision application**。一个典型的“单列”布局，把所有信息线性排列在一个页面。

![Example of a 1 column layout in the wild](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-product.jpg)
![1 column layout with header, main content, a stack of aside contents and a footer](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-product-overlay.jpg)

相当直接。但是请记住，如果很多人从桌面软件浏览你的站点，那么一定得让“主要内容”具有较高的可用/读性。

### “双列”布局

**Abduzeedo**，一个简单的博客布局。博客一般都是“两列”：一列偏宽用来承载主要内容，一列偏窄用来承载“边缘内容”（如小部件、二级导航栏、广告等）。

![Example of a 2 column layout for a blog](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-blog.jpg)
![A 2 column layout with the main content on the left column](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-blog-overlay.jpg)

在这个例子中，B1 在“头部”正下方，和“主要内容”有关联，但是“主要内容”去掉 B1 也能够表达清楚内容。这时候，你把它归类到“主要内容”或者“边缘内容”都可以。但是要注意，如果有一块区域，位于头部正下方，那么这块区域必须是“主要内容”或者和“主要内容”有关联。

### 这有个陷阱

**MICA**。这里有点奇怪，以基本布局概念来看，好像是“三列”布局……

![Example of a false 3 columns layout](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-education.jpg)
![It looks like a 3 columns layout but actually, the aside content is floating around.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-education-overlay.jpg)

……但它并不是。B1 和 B2 浮动（float）在“主要内容”上面。记住“浮动”这个概念——当你学习 CSS 的时候你会不再陌生。

为什么你会认为它是一个“三列”布局？因为右上角的图片是 L 形的，又因为 B1 区域看起来像是用列来支持“主要内容”的切换功能，还因为 logo 里的“M”和“I”恰好看起来和 B1 组成了一部分。

这是经典布局支持设计创新的一个很好的例子。简单的布局易于实现，但又不会缩减你自己的创造空间。

### 更具挑战的布局

**Opera de Paris**。

![An example of a tricky layout.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-opera.jpg)
![This is a 2 column layout but the header is overlapping the main content.](/zh-CN/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-opera-overlay.jpg)

这是基于“两列”布局的，但是你会发现这里有很多转角以至于布局看起来零零碎碎的。尤其是“头部”盖在了“主要内容”的图片上面。“头部”的曲线和“主要内容”的图片的曲线是有关联的，这样子会让人觉得“头部”和“主要内容”浑然一体，虽然我们都知道在技术上它们是完全不同的两个事物。这个示例看起来要比 MICA 示例更加复杂，但是实际上更好实现。

如你所见，你可以用最基本的布局搭建出工艺卓绝的站点。你可以重新打开你最喜欢的站点，然后看看里面的“头部”、“页脚”、“主要内容”和“边缘内容”。这会更好的激发你的设计灵感并且对选择更符合设计目标的站点会有冥冥中的指导作用。


何为无障碍？ - 学习 Web 开发

何为无障碍？
======

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

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

概述
--

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

主动学习
----

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

深入探索
----

### 无障碍：一般原则

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

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

### Web 无障碍

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

我们考虑一个视频：

听力障碍

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

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

视觉障碍

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

暂停能力

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

键盘能力

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

#### Web 无障碍基础

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

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

而这只是个开始。

### 无障碍的拥护者

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

更多细节
----

请参见：

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

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

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


我该怎样开始设计我的网站？ - 学习 Web 开发

我该怎样开始设计我的网站？
=============

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

|  |  |
| --- | --- |
| 前提： | 无 |
| 目标： | 学会设定目标来给自己的 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 端更重要。例如，在销售方面，处理供应、付款和发货比建立一个人们可以订购的网站更为重要和耗时。

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

总结
--

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