00043-基于 MDN 学习 Web 开发-ubuntu

前言

MDN 是一个非常好的 Web 学习网站.

Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.

操作系统：Ubuntu 20.04.5 LTS

参考文档

学习 Web 开发

欢迎来到 MDN 学习区。本系列文章旨在为零基础 Web 开发初学者提供指导和开始编写网站代码所需的所有内容。

该教程并不是“从入门到精通”类型的教程，只能让你做到“从入门到适应”。在此之后，你应该能够以你自己的方式学习 MDN 的其他内容，并接触到其它中、高级资源。

从零开始学习 Web 开发极具挑战性，该教程将为你提供详细的资料，手把手帮助你轻松愉快地学习。无论你是正在学习 Web 开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，亦或是仅仅想了解一点点 Web 技术，我们都希望你能感到宾至如归。

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn .

Web 入门

Web 概述

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web .

web 入门是一个简要的系列，向你介绍 web 开发的实用性。你将配置你需要的工具来构建一个简单的网页，并发布一份属于你自己的代码。

你的第一个网站

创建一个专业的网站需要大量的工作，所以如果你是 web 开发的新手，我们鼓励你从小事做起。你不可能立马再建一个 Facebook，但做一个自己的简单网站并不难，我们将由此开始。

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

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

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

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

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

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

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

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

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

安装基础软件

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software .

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

专业人士使用什么工具？

计算机。也许这对一些人来说听起来习以为常，但你们中的一些人正在使用手机或图书馆的电脑阅读这篇文章。对于重度的 Web 开发，最好购买一台运行 Windows、macOS 或 Linux 的台式机或笔记本电脑。

文本编辑器，用来写代码。可以是一个文本编辑器（如 Visual Studio Code、Sublime Text、Atom、GNU Emacs 或者 VIM），或一个混合编辑器（Dreamweaver 或 WebStorm）。Office 文档不适合这种用途，因为它们依赖隐藏的元素，会干扰网络浏览器使用的渲染引擎。

网络浏览器，用以测试代码。目前，最常用的浏览器是 Firefox 、Chrome、Opera、Safari、Internet Explorer 和 Microsoft Edge。你还应该测试你的网站在移动设备和你的目标受众可能仍在使用的任何旧浏览器（如 IE 8-10）上的表现。Lynx，一个基于文本的终端网络浏览器，对于查看视力障碍用户对你的网站的体验是非常好的。

图形编辑器，如 GIMP、Figma、Paint.NET、Photoshop、Sketch 或 XD，为你的网页制作图像或图形。

版本控制系统，用来管理服务器上的文件，与团队合作开展项目，共享代码和资产，避免编辑冲突。现在，Git 是最流行的版本控制系统，还有 GitHub 或 GitLab 托管服务。

FTP 工具，老式 Web 托管账户，以管理服务器上的文件（Git 正越来越多地取代 FTP 用于此目的）。有大量的 (S)FTP 程序可用，包括 Cyberduck、Fetch 和 FileZilla。

自动化构建工具，如 Webpack、Grunt 或 Gulp，以自动执行重复性任务，如简化代码和运行测试。

库、框架等，以加快编写常用功能。一个库往往是一个现有的 JavaScript 或 CSS 文件，它提供了现成的功能，供你在代码中使用。框架则更进一步，为你提供一个完整的系统和一些自定义的语法，让你在上面写一个 Web 应用。

此外还有更多的工具！

现在，我究竟需要什么工具？

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

安装文本编辑器

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

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

安装现代网络浏览器

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

Linux：Firefox 、Chrome 、Opera 、Brave.

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

macOS：Firefox 、Chrome 、Opera 、Safari 、Brave （macOS 和 iOS 默认带有 Safari 浏览器）。

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

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

安装本地 Web 服务器

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

设计网站外观

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like .

设计网站外观？在为网站编写代码之前必须进行规划和设计工作，包括“网站提供什么信息？”、“想要什么字体和颜色？”、“网站是做什么的？”

第一步：计划

在做任何事情之前都需要一些想法。网站要达到哪种目的？一个网站基本上可以做任何事情，但对于第一次尝试，应该保持简单。我们将从创建一个包含一个标题、一张图片和几个段落的简单网页开始。

首先，请考虑以下问题：

网站的主题是什么？ 你喜欢狗、上海、还是吃豆人？

基于所选主题要展示哪些信息？ 写下标题和几段文字，构思一个用于展示的图像。

网站采用怎样的外观？ 用高阶术语来说，背景颜色是什么？使用哪种字体比较合适：正式的、卡通的、粗体、瘦体？

备注：复杂项目需要更详细的指引，深入到颜色、字体、页面上项目之间的间距、适当的书写风格等所有细节。这有时被称为设计指南、设计系统或品牌手册，参见：Firefox Photon Design System。

绘制草图

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

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

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

选定内容

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

文本

准备好刚才撰写的标题和文字。

主题颜色

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

图像

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

当找到你想要的图像时，点击该图像以获得其放大的视图。

右键单击图像（Mac 上为 Ctrl + 单击），选择将图像另存为…，并选择一个安全的地方来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。

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

字体

要选择一种字体：

访问 Google Fonts 选择一种喜欢的字体。

将谷歌给你的代码行复制至文本编辑器中，以保存备用。

关于使用谷歌字体的更多细节，请参见本页面

处理文件

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files .

一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终将它们上传到服务器之前使你的所有内容看起来正确。处理文件讨论了一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。

网站应该保存在何处？

对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。这个文件夹可以放在任何你喜欢的地方，但你应该把它放在你能轻易找到的地方，也许是在你的桌面上，在你的主页文件夹里，或者在你的硬盘根目录下。

选择一个地方来存储你的网站项目。在你选择的地方，创建一个名为 web-projects（或类似）的新文件夹。这是你所有的网站项目的存放地。

在这个文件夹中，创建另一个文件夹来存放你的第一个网站。称之为 test-site（或更有想象力的东西）。

关于大小写和空格的提示

你会注意到，在这篇文章中，我们要求你完全用小写字母命名文件夹和文件，没有空格。这是因为：

许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 test-site/MyImage.jpg，然后在一个不同的文件中，你试图以 test-site/myimage.jpg 来调用该图片，它可能无法工作。

浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 my-file.html 与 my_file.html。

简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线来分隔。这可以避免许多问题。

网站应该使用什么结构？

接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：

index.html：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。

images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。

styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。

scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。

备注： 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的隐藏已知文件类型的扩展名的选项。一般来说，你可以通过 Windows 资源管理器，选择文件夹选项选项，取消勾选隐藏已知文件类型的扩展名复选框，然后点击确认将其关闭。对于涉及你的 Windows 版本的更多具体信息，你可以在网上搜索。

文件路径

为使文件间正常交互，应为每个文件提供访问路径，所以一个文件知道另一个文件的位置。为作为演示，我们将在 index.html 中插入一小段 HTML，并使其显示你在“你的网站会是什么样？“一文中选择的图片。或者，你可以在你的电脑上或从网上选择一个现有的图片，并在下面的步骤中使用它：

将你之前选择的图片复制到你的 images 文件夹。

打开你的 index.html 文件，并准确地将以下代码插入该文件中。当下不要对其感到困惑——我们将在本系列的后面更详细地研究这些结构。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html>

该行代码 <img src="" alt="My test image"> 用于向页面中插入图片。我们需要告知 HTML 图片的位置。这张图片位于 images 目录下，与 index.html 处于同一目录。为了从 index.html 访问到我们的图像，我们需要的文件路径是 images/your-image-filename。例如，这里的图像叫做 firefox-icon.png，那么文件路径就是 images/firefox-icon.png。

在 HTML 代码 src="" 的双引号之间插入文件路径。

保存 HTML 文件，然后使用浏览器打开（双击该文件）。你应该看到新网页显示了新的图像！

文件路径的一些通用规则：

若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：my-image.jpg。

要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg。

若引用的目标文件位于 HTML 文件的上级，需要加上两个点。举个例子，如果 index.html 在 test-site 的一个子文件夹内，而 my-image.jpg 在 test-site 内，你可以使用../my-image.jpg 从 index.html 引用 my-image.jpg。

以上方法可以随意组合，比如：../subdirectory/another-subdirectory/my-image.jpg。

这是你目前需要知道的全部内容。

备注： Windows 的文件系统使用反斜杠而不是正斜杠，例如：C:\Windows。这在 HTML 中并不重要——即使你在 Windows 系统上进行开发，你也应该在代码中使用正斜杠。

还应该做些什么？

现在你的文件夹结构应该看起来像这样：

HTML 基础

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics .

超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

HTML到底是什么？

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：

1	My cat is very grumpy

可以将这行文字封装成一个段落（paragraph）元素来使其在单独一行呈现：

1	<p>My cat is very grumpy</p>

HTML 元素详解

让我们深入探索一下这个段落元素。

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

内容（Content）：元素的内容，本例中就是所输入的文本本身。

元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素也可以有属性（Attribute）：

属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。

属性的名称，并接上一个等号。

由引号所包围的属性值。

备注：不包含 ASCII 空格（以及 " ’ ` = < > ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。

嵌套元素

也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将“very”用 <strong> 元素包围，爆字将突出显示：

1	<p>My cat is <strong>very</strong> grumpy.</p>

必须保证元素嵌套次序正确：本例首先使用 <p> 标签，然后是 <strong> 标签，因此要先结束 <strong> 标签，最后再结束 <p> 标签。这样是不对的：

1	<p>My cat is <strong>very grumpy.</p></strong>

元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！

空元素

不包含任何内容的元素称为空元素。比如 <img> 元素：

1	<img src="images/firefox-icon.png" alt="My test image">

本元素包含两个属性，但是并没有 </img> 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

HTML 文档详解

以上介绍了一些基本的 HTML 元素，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾文件处理小节中创建的 index.html 示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

这里有：

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。

<html></html> — <html> 元素。该元素包含整个页面的内容，也称作根元素。

<head></head> — <head> 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。

<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。

<title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。

<body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

图像

重温一下 <img> 元素：

1	<img src="images/firefox-icon.png" alt="My test image">

像之前所讲，该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。

该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：

用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。

有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：

alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用 “测试图片” 来描述 Firefox 标志并不合适，修改成 “Firefox 标志：一只盘旋在地球上的火狐” 就好多了。

可以试着为图像编写一些更好的 alt 文本。

备注：更多信息请参阅无障碍访问。

标记文本

本段包含了一些最常用的文本标记 HTML 元素。

标题（Heading）

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题， <h1> (en-US)–<h6> (en-US) ，一般最多用到 3-4 级标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

可以尝试在 <img> 元素上面添加一个合适的标题。

备注： 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体，因为标题对于无障碍访问和搜索引擎优化等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。

段落（Paragraph）

如上文所讲，<p> 元素是用来指定段落的。通常用于指定常规的文本内容：

1	<p>这是一个段落</p>

试着添加一些文本（在设计网站的外观小节）到一个或几个段落中，并把它们放在你的 <img> 元素下方。

列表（List）

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围。

有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。

列表的每个项目用一个列表项目（List Item）元素 <li> 包围。

比如，要将下面的段落片段改成一个列表：

1	<p>At Mozilla, we're a global community of technologists, thinkers, and builders working together… </p>

可以这样更改标记：

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together… </p>

试着在示例页面中添加一个有序列表和无序列表。

链接

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — <a> — a 是 “anchor” （锚）的缩写。要将一些文本添加到链接中，只需如下几步：

选择一些文本。比如“Mozilla Manifesto”。

将文本包含在 <a> 元素内，就像这样：

1	<a>Mozilla Manifesto</a>

为此 <a> 元素添加一个 href 属性，就像这样：

1	<a href="">Mozilla Manifesto</a>

把属性的值设置为所需网址：

1	<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

如果网址开始部分省略了 https:// 或者 http://，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。

备注： href 这个名字可能开始看起来有点令人费解，代表超文本引用（ hypertext reference）。

现在就为页面添加一个链接吧。

小结

如果你一直跟着这篇文章里的指导做的话，你应该完成了一个像下面这样的页面。（你也可以从这查看）：

如果你遇到困难，你可以将 Github 上的完整示例代码与你的文件进行比较。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <h1>Mozilla is cool</h1>
    <img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">

    <p>At Mozilla, we’re a global community of</p>

    <ul> <!-- changed to list in the tutorial -->
      <li>technologists</li>
      <li>thinkers</li>
      <li>builders</li>
    </ul>

    <p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>

    <p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>
  </body>
</html>

在这里，我们只是介绍了一点点 HTML。要学习更多，访问我们的 HTML 学习主题页面。

CSS 基础

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics .

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。本节将介绍 CSS 的基础知识，并解答类似问题：怎样将文本设置为黑色或红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？

CSS究竟什么来头？

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

1
2
3

p {
  color: red;
}

不妨试一下：首先新建一个 styles 文件夹，在其中新建一个 style.css 文件，将这三行 CSS 保存在这个新文件中。

然后再将该 CSS 文件连接至 HTML 文档，否则 CSS 代码不会对 HTML 文档在浏览器里的显示效果有任何影响。

打开 index.html 文件，然后将下面一行粘贴到文档头（也就是 <head> 和 </head> 标签之间）。
1
><link href="styles/style.css" rel="stylesheet">
保存 index.html 并用浏览器将其打开。应该看到以下页面：

如果段落文字变红，那么祝贺你，你已经成功地迈出了 CSS 学习的第一步。

“CSS 规则集”详解

让我们来仔细看一看上述 CSS：

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）：HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）：一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）：改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）：在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

属性应该包含：

每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。

在每个声明里要用冒号（:）将属性与属性值分隔开。

在每个规则集里要用分号（;）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

多元素选择

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

1
2
3

p, li, h1 {
  color: red;
}

不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定 (该) 类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 而不是 `<img>`
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	`a:hover` 仅在鼠标指针悬停在链接上时选择 `<a>`。

选择器的种类远不止于此，更多信息请参阅选择器。

字体和文本

备注：再一次说明，中文字体文件较大，不适合直接用于 Web Font。

在探索了一些 CSS 基础后，我们来把更多规则和信息添加至 style.css 中，从而让示例更美观。首先，让字体和文本变得更漂亮。

第一步，找到之前 Google Font 输出的地址。并以 <link> 元素的形式添加进 index.html 文档头（ <head> 和 </head> 之间的任意位置）。代码（为当前网页下载 Open Sans 字体，从而使自定义 CSS 中可以对 HTML 元素应用这个字体。）如下：
1
><link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">
接下来，删除 style.css 文件中已有的规则。虽然测试是成功的了，但是红字看起来并不太舒服。

将下列代码添加到相应的位置，用你在 Google Fonts 找到的字体替代 font-family 中的占位行。（ font-family 意味着你想要你的文本使用的字体。）这条规则首先为整个页面设定了一个全局字体和字号（因为 <html> 是整个页面的父元素，而且它所有的子元素都会继承相同的 font-size 和 font-family）：

html {
  /* px 表示“像素（pixels）”: 基础字号为 10 像素 */
  font-size: 10px;
  /* Google fonts 输出的 CSS */
  font-family: 'Open Sans', sans-serif;
}

备注： CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释，它会被浏览器在渲染代码时忽略。你可以在这里写下对你现在要做的事情有帮助的笔记。

备注： /* */ 不可嵌套，/*这样的注释是/*不行*/的*/。CSS 不接受 // 注释。

接下来为文档体内的元素（<h1> (en-US)、<li> 和 <p>）设置字号。将标题居中显示，并为正文设置行高和字间距，从而提高页面的可读性。

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  /* line-height 后面可以跟不同的参数，如果是数字，就是当前字体大小乘上数字 */
  line-height: 2;
  letter-spacing: 1px;
}

可以随时调整这些 px 值来获得满意的结果，以下是大体效果：

一切皆盒子

编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

padding：即内边距，围绕着内容（比如段落）的空间。

border：即边框，紧接着内边距的线。

margin：即外边距，围绕元素外部的空间。

这里还使用了：

width ：元素的宽度

background-color ：元素内容和内边距底下的颜色

color ：元素内容（通常是文本）的颜色

text-shadow ：为元素内的文本设置阴影

display ：设置元素的显示模式（暂略）

开始在页面中添加更多 CSS 吧！大胆将这些新规则都添加到页面的底部，而不要纠结改变属性值会带来什么结果。

更改页面颜色

1
2
3

html {
  background-color: #00539F;
}

这条规则将整个页面的背景颜色设置为所计划的颜色。

文档体格式设置

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

现在是 <body> 元素。以上条声明，我们来逐条查看：

width: 600px; —— 强制页面永远保持 600 像素宽。

margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考这里。

background-color: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 <html> 元素形成反差，你也可以尝试其它颜色。

padding: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。

border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。

定位页面主标题并添加样式

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下给 <h1> (en-US) 等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置 margin: 0; 来覆盖默认样式。

至此，我们已经把标题的上下内边距设置为 20 像素，并且将标题文本与 HTML 的背景颜色设为一致。

需要注意的是，这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：

第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。

第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。

第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。

第四个值设置阴影的基色。

不妨尝试不同的值看看能得出什么结果。

图像居中

img {
  display: block;
  margin: 0 auto;
}

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 <body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

备注： 以上说明假定所选图片小于页面宽度（600 pixels）。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以： 1）使用 图片编辑器 来减小图片宽度； 2）用 CSS 限制图片大小，即减小 <img> 元素 width 属性的值（比如 400 px）。

备注： 如果你暂时不能理解 display: block 和块级元素与行内元素的差别也没关系；随着你对 CSS 学习的深入，你将明白这个问题。display 属性的更多信息请查看参考页面。

小结

如果你按部就班完成本文的实践，那么最终可以得到以下页面（可以查看我们的版本 )：

若遇到问题，可以参考 GitHub 上的完整示例代码做对比。

本章介绍的 CSS 知识非常有限，更多内容请访问 CSS 学习页面。

JavaScript 基础

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics .

JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。本文介绍了 JavaScript 的精彩之处和主要用途。

JavaScript到底是什么？

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使开发工作事半功倍。其中包括：

浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。

第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。

第三方框架和库 —— 用来快速构建网站和应用。

本节是一篇 JavaScript 简介，因此这个阶段不会对 JavaScript 语言和上述工具做过多的介绍。之后可以到 JavaScript 学习区和 MDN 的其它地方学习更多细节。

下面对语言核心做一个不完整介绍，期间还可以接触到一些浏览器 API 特性。

“Hello-World!”示例

读到这里你一定很激动，诚然 —— JavaScript 是最振奋人心的 Web 技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。

然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个“Hello world!”示例（一切始于 Hello World）。

警告： 如果你没有完成之前的课程实践，可下载上一章节示例的压缩包并在本地解压作出发点。

首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。

下一步，在 index.html 文件 </body> 标签前的新行添加以下代码。

1	<script src="scripts/main.js" defer></script>

与 CSS 的 <link> 元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）：

现在将以下代码添加到 main.js 文件中：

1 2	let myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';

最后，保存 HTML 和 JavaScript 文件，用浏览器打开 index.html。可以看到如下内容：

备注： 我们将 <script> 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。

发生了什么？

JavaScript 把页面的标题改成了“Hello world!” 。首先用 querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。

之后，把 myHeading 变量的属性 textContent （标题内容）修改为“Hello world!” 。

备注： 上面用到的两个函数都来自文档对象模型 (DOM) API，均用于控制文档。

JavaScript快速入门

我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。

警告： 学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。JavaScript 控制台的更多信息请查看 浏览器开发者工具。

变量（Variable）

变量是存储值的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

1	let myVariable;

备注： 行末的分号表示当前语句结束，**不过只有在单行内需要分割多条语句时，这个分号才是必须的。**然而，一些人认为每条语句末尾加分号是一种好的风格。分号使用规则的更多细节请参阅 JavaScript 分号使用指南（英文页面）。

备注： 几乎任何内容都可以作为变量名，但还是有一些限制（请参阅变量命名规则）。如果你不确定，还可以验证变量名是否有效。

备注： JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！

备注： 想要了解更多关于 var 和 let 的不同点，可以参阅 var 与 let 的区别。

变量定义后可以进行赋值：

1	myVariable = '李雷';

也可以将定义、赋值操作写在同一行：

1	let myVariable = '李雷';

可以直接通过变量名取得变量的值：

1	myVariable;

变量在赋值后是可以更改的：

1 2	let myVariable = '李雷'; myVariable = '韩梅梅';

注意变量可以有不同的 数据类型 ：

变量	解释	示例
String	字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。	`let myVariable = '李雷';`
Number	数字：无需引号。	`let myVariable = 10;`
Boolean	布尔值（真 / 假）： `true`/`false` 是 JS 里的特殊关键字，无需引号。	`let myVariable = true;`
Array	数组：用于在单一引用中存储多个值的结构。	`let myVariable = [1, '李雷', '韩梅梅', 10];` 元素引用方法：`myVariable[0]`, `myVariable[1]` ……
Object	对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。	`let myVariable = document.querySelector('h1');` 以及上面所有示例都是对象。

那么变量有什么用呢？我们说，编程时它们无所不在。如果值无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。

注释

类似于 CSS，JavaScript 中可以添加注释。

/*
这里的所有内容
都是注释。
*/

如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：

1	// 这是一条注释。

运算符

运算符是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符，可以在浏览器控制台里尝试一下后面的示例。

备注： 这里说“根据两个值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。

运算符	解释	符号	示例
加	将两个数字相加，或拼接两个字符串。	`+`	`6 + 9; "Hello " + "world!";`
减、乘、除	这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。	`-`, `*`, `/`	`9 - 3; 8 * 2; //乘法在 JS 中是一个星号 9 / 3;`
赋值运算符	为变量赋值（你之前已经见过这个符号了）	`=`	`let myVariable = '李雷';`
等于	测试两个值是否相等，并返回一个 `true`/`false` （布尔）值。	`===`	`let myVariable = 3; myVariable === 4; // false`
不等于	和等于运算符相反，测试两个值是否不相等，并返回一个 `true`/`false` （布尔）值。	`!==`	`let myVariable = 3; myVariable !== 3; // false`
取非	返回逻辑相反的值，比如当前值为真，则返回 `false`。	`!`	原式为真，但经取非后值为 `false`： `let myVariable = 3; !(myVariable === 3); // false`

运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅表达式和运算符。

备注： 不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 "35" + "25"，为什么不能得到 60？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。

条件语句

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 if ... else。下面是一个示例：

let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('我最喜欢巧克力冰激淋了。');
} else {
  alert('但是巧克力才是我的最爱呀……');
}

if ( ... ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 iceCream 与字符串 'chocolate' 是否相等。如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。

函数（Function）

函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：

1	let myVariable = document.querySelector('h1');

1	alert('hello!');

document.querySelector 和 alert 是浏览器内置的函数，随时可用。

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。

比如， alert() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。

好消息是：人人都能定义自己的函数。下面的示例是为两个参数进行乘法运算的函数：

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

尝试在控制台运行这个函数，不妨多试几组参数，比如：

1
2
3

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

备注： return 语句告诉浏览器当前函数返回 result 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的作用域。（详见 变量作用域。）

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

1
2
3

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});

将事件与元素绑定有许多方法。在这里选用了 <html> 元素，然后调用了它的 addEventListener() 方法，将事件名称（‘click’）以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。

刚刚我们传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用 () => 代替 function ()：

1
2
3

document.querySelector('html').addEventListener('click', () => {
  alert('别戳我，我怕疼。');
});

完善示例网页

现在你已经具备了一些 JavaScript 基础，下面来为示例网页添加一些更酷的特性。

添加一个图像切换器

这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。

首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。

将这张图片储存在你的images目录下。

将图片重命名为'firefox2.png'（去掉引号）。

打开 main.js 文件，输入下面的 JavaScript 代码 ( 请删除刚才的 “hello world” 脚本)：

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

保存所有文件并用浏览器打开 index.html 。点击图片可以发现它能够切换了！

这里首先把 <img> 元素的引用存放在 myImage 变量里。然后将这个变量的 onclick 事件与一个匿名函数绑定。每次点击图片时：

获取这张图片的 src 属性值。

用一个条件句来判断 src 的值是否等于原始图像的路径：

如果是，则将 src 的值改为第二张图片的路径，并在 <img> 内加载该图片。

如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

添加个性化欢迎信息

下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

打开 index.html，在 <script> 标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：

1	<button>切换用户</button>

将以下 JavaScript 代码原封不动添加到 main.js 文件底部，将获取新按钮和标题的引用，并保存至变量中：

1 2	let myButton = document.querySelector('button'); let myHeading = document.querySelector('h1');

3.然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）。该函数首先调用了 prompt() 函数，与 alert() 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 myName 变量里。接下来将调用 localStorage API，它可以将数据存储在浏览器中供后续获取。这里用 localStorage 的 setItem() 函数来创建一个’name’ 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的名字。

function setUserName() {
  let myName = prompt('请输入你的名字。');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla 酷毙了，' + myName;
}

接下来，添加以下的 if ... else 块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作。这里首次使用了取非运算符（逻辑非，用 ! 表示）来检测 ‘name’ 数据是否存在。若不存在，调用 setUserName() 创建。若存在（即用户上次访问时设置过），调用 getItem() 获取保存的名字，像上文的 setUserName() 那样设置 textContent。

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla 酷毙了，' + storedName;
}

最后，为按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：

1
2
3

myButton.onclick = function() {
   setUserName();
}

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。告诉你一个额外的福利，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)

用户名为 null?

运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为“Mozilla 酷毙了，null”。这是因为取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。

也可以不输入任何名字直接按 确认，你的标题会显示为“Mozilla 酷毙了，”，原因么显而易见。

要避免这些问题，应该更新 setUserName() 来检查用户是否输入了 null 或者空名字：

function setUserName() {
  let myName = prompt('请输入你的名字。');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla 酷毙了，' + myName;
  }
}

用人话说就是：如果 myName 没有值或值为 null，就再次从头运行 setUserName()。如果有值（上面的表达式结果不为真），就把值存储到 localStorage 并且设置标题。

小结

如果你按部就班完成本文的实践，那么最终可以得到以下页面（可以查看我们的版本）：

若遇到问题，可以参考 GitHub 上的完整示例代码进行对比。

本章介绍的 JavaScript 知识非常有限，更多内容请访问 Javascript 学习页面。

发布网站

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website .

在你已经写好了代码并且整理好了你网站的全部文件后，你需要将它们全部上线，这样别人才能看到。这篇文章将向你展示如何轻松地将你简单的示例代码传到网上。

有哪些方法可供选择？

发布一个网页并不是三言两语就能简单说明的，这主要是因为我们有很多种方法去完成它。在这篇文章里我们并不准备讲述所有方法，而是从初学者的视角讨论以下三种常见的方式的利弊，然后带你看看我们将要使用的一种方法。

获取主机服务和域名

如果你想要完全控制你发布的网页，那么你将需要花钱购置：

主机服务——在主机服务提供商的 Web 服务器上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容。

域名——一个可以让人们访问的独一无二的地址，比如 http://www.mozilla.org 或 http://www.bbc.co.uk。你可以从域名注册商租借域名。

许多专业的网站通过这种方法接入互联网。

此外，你将需要一个 文件传输协议 程序 ( 点击钻研在网络上做某些事情要花费多少：软件查看详细信息 ) 来将网站文件上传到服务器。不同的 FTP 程序涵盖了不同的范围，但是你通常需要使用主机服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器。然后程序在两个窗口里分别显示本地文件和服务器文件，这样你就可以在它们之间进行传输：

寻找主机服务和域名的建议

我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商，只需要搜索 “网络主机服务” 和 “域名” 来找到一家出售域名的公司。所有这种类型的公司都允许你查看你想要的域名是否可用。

你的家庭或办公 网络服务提供商 可能会提供一些受限制的的小型主机空间。它们的能使用的功能都会受到限制，但是它们会非常适合你的第一个实验的——联系一下他们！

有一些免费服务比如 Neocities ， Blogspot ，和 Wordpress 。重复一遍，一分钱一分货，不过它们对于你的初次实验可能会是很理想的。免费服务大部分也不需要 FTP 软件来上传文件——你只需要将文件拖入到它们网页的界面里。

有时公司会打包提供主机服务和域名。

使用在线工具如 GitHub 或 Google App Engine

有一些工具能使你在线发布网站 :

GitHub 是一个“社交编程”网站。它允许你上传代码库并储存在 Git 版本控制系统里。然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！你也可以对别人的代码那样做！这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 版本控制系统 — 大部分科技公司在工作中使用它。GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上。

Google App Engine 是一个让你可以在 Google 的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级 web 应用还是托管一个静态网站。参阅How do you host your website on Google App Engine?以获取更多信息。

不同于大部分其它托管服务，这类工具通常是免费的，不过你只能使用有限的功能。

使用像 CodePen 这样基于 Web 的集成开发环境

有许多 web 应用能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容。

使用一下以下几种工具，看看你最喜欢哪一个：

JSFiddle

Glitch

JSBin

CodePen

通过GitHub发布

现在，让我们通过 Github 页面告诉你公布的你的代码是如此的简单。

首先，注册一个 GitHub 账号，并确认你的邮箱地址。

接下来，你需要创建一个新的资源库 ( repository ) 来存放你的文件。

在这个页面上，在 Repository name 输入框里输入 username.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入 bobsmith.github.io。同时勾选 Initialize this repository with a README，然后点击 Create repository。

然后，将你的网站文件夹里的内容拖拽到你的资源库 ( repository )，再点击 Commit changes。

备注： 确保你的文件夹有一个 index.html 文件。

现在将你的浏览器转到 username.github.io 来在线查看你的网站。比如，如果用户名为 chrisdavidmills, 请转到 chrisdavidmills.github.io。

备注： 你的网站可能需要几分钟的时间才能投入使用。如果它不能立即工作，你可能需要等待几分钟，然后再试一次。

想要了解更多，请看 GitHub Pages Help.

延展阅读

什么是网络服务器？

什么是域名？

钻研在网络上做某些事情要花费多少？

Deploy a Website（英文）：来自 Codeacademy 的一个很好的教程，它比本教程更进一步，并展示了一些其他技术。

Scott Murray 的 Cheap or free static web hosting （价格低廉或免费的静态 Web 主机服务）包含一些对可用的 Web 主机服务的建议。

万维网是如何工作的

源教程地址: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works .

这篇文章简单描述了你在计算机或手机上通过浏览器访问网页时发生了什么。

这个理论在短期内对你编写网页代码不会有实质性的帮助，但是不久之后你就会真正受益于理解了后台究竟发生了什么。

客户端和服务器

连接到互联网的计算机被称作客户端和服务器。下面是一个简单描述它们如何交互的图表：

客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome 的浏览器）。

服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。

其他部分

上文所述的客户端和服务器并不能完成全部工作。还有其他必要的部分，我们将在下面讲述。

现在，让我们假设 Web 就是一条路。路的一端是客户端，就像你的家。另一端则是服务器，就像你想去的商店。

除了客户端和服务器，我们还需要了解：

备注： 我感觉下面的比喻还不是很契合。我感觉再合理一点的比喻：

假如你生活在一个封闭的村子叫做“盘溪新村”，村子盛产苹果。

互联网: 好比地球上众横交错的道路。

网络连接: 道路通到了村子路口。从此，村子里的苹果就可以运出去卖了。

TCP/IP: 为了将村里的苹果能规范有效的运卖出去而不出问题，村长作出如下规定：“用规格刚好 20 cm * 20 cm * 20 cm 的泡沫箱来装，之后外面又用相应规格的纸箱包裹上，最后打上透明胶”。并且要求，对方收到时，一定要外包装完好，不然就会补发。而且还给对方发了一张发货单，明确说明了，苹果有多少，是用什么方法包装的，只有货和发货单对上了，对方才会确认收货。

DNS: 突然一天，郭德纲想吃苹果，就跟于谦说，“我听说盘溪新村（域名）的苹果好，要他们那个套餐一选项啊！”，于谦一听，得，也不知道盘溪新村在哪，打开地图查（DNS）吧，一查，好嘛，江苏省苏州市（IP 地址），于是于谦去了苏州，找了村子，告诉村长，要套餐一，要用顺丰快递，并且留下了北京德云社的地址。

HTTP: 过了几天，德云社的人一看，有快递来了，来了这么一句，“只收‘顺丰’，拒收其他快递”。司机忙说，“是顺丰，是顺丰”，这才对上暗号，德云社的人收下了货。

组成文件: 送来的货可不止一车，而且也不止一种苹果，这车是红富士，那车黄富士的。

代码: 有点像，村长事先安排的说明书，让司机到了地方，如何卸车，货放到什么位置，而德云社的看说明书，知道什么样的苹果放到什么位置上，什么样苹果如何食用最佳，等等。

资源: 不同种类的苹果。

一点拙见，在下抛砖引玉，希望有更好理解的比喻。

网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。

TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。

DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。

HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol）。就像你下订单时所说的话一样。

组成文件: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：

代码: 网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到不同的技术。

资源: 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word 文档、PDF 文件。

到底发生了什么？

当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时）：

浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。

浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。

服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。

浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口 —— 新东西，好棒！）。

解析组成文件的顺序

当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 <link> 和 <script> 元素，这些元素分别指向了外部的 CSS 样式表文件和 JavaScript 脚本文件。了解这些文件被浏览器解析的顺序是很重要的：

浏览器首先解析 HTML 文件，并从中识别出所有的 <link> 和 <script> 元素，获取它们指向的外部文件的链接。

继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件。

接着浏览器会给解析后的 HTML 文件生成一个 DOM 树（在内存中），会给解析后的 CSS 文件生成一个 CSSOM 树（在内存中），并且会编译和执行解析后的 JavaScript 脚本文件。

伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。

DNS解析

真正的网址看上去并不像你输入到地址框中的那样美好且容易记忆。它们是一串数字，像 63.245.217.105。

这叫做 IP 地址，它代表了一个互联网上独特的位置。然而，它并不容易记忆，不是吗？那就是域名系统（DNS）被发明的原因。它们是将你输入浏览器的地址（像 "mozilla.org"）与实际 IP 地址相匹配的特殊的服务器。

网页可以通过 IP 地址直接访问。您可以通过在 DNS 查询工具等工具中输入域名来查找网站的 IP 地址。

数据包详解