万维网概念+web中html/ccs/scripts的解析顺序

互联网

是基础设施，好比地球上众横交错的道路。

网络

是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和IRC.

网页（webpage）

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

一份网页文档是交给浏览器显示的简单文档。这种文档是由超文本标记语言 HTML来编写的。网页文档可以插入各种各样不同类型的资源，例如：

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

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

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

网站（website）

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

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

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

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

站点安全？

互联网很危险！我们经常听到网站因为拒绝服务攻击或主页显示被修改的（通常是有害的）内容而无法使用。在一些出名的案例中，上百万的密码、邮件地址和信用卡信息被泄露给了公众，导致网站用户面临个人尴尬和财务威胁。

站点安全的目的就是为了防范这些（或者说所有）形式的攻击。更正式点说，站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践。

有效的站点安全需要在对整个站点进行设计：包括 Web 应用编写、Web 服务器的配置、密码创建和更新的策略以及客户端代码编写等过程。尽管这听起来很凶险，好消息是如果你使用的是服务器端的 Web 服务框架，那么多数情况下它默认已经启用了健壮而深思熟虑的措施来防范一些较常见的攻击。其他的攻击手段可以通过站点的 Web 服务器配置来减轻威胁，例如启用 HTTPS. 最后，可以用一些公开可用的漏洞扫描工具来协助发现你是否犯了一些明显的错误。

有效的站点安全需要在对整个站点进行设计：包括 Web 应用编写、Web 服务器的配置、密码创建和更新的策略以及客户端代码编写等过程。尽管这听起来很凶险，好消息是如果你使用的是服务器端的 Web 服务框架，那么多数情况下它默认已经启用了健壮而深思熟虑的措施来防范一些较常见的攻击。其他的攻击手段可以通过站点的 Web 服务器配置来减轻威胁，例如启用 HTTPS. 最后，可以用一些公开可用的漏洞扫描工具来协助发现你是否犯了一些明显的错误。

网络服务器（web server）

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

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

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

网络服务器（web server）的托管文件

一个网络服务器首先需要存储这个网站的文件，也就是说所有的 HTML 文档和它们的相关资源（related assets），包括图片，CSS 样式表，JavaScript 文件，字形（fonts）以及影像。

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

• 会一直启动和运行
• 会一直与互联网连接
• 会一直拥有一样的 IP 地址（不是所有的 ISP 都会为家庭线提供一个固定的 IP 地址）
• 由一个第三方提供者维护

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

搜索引擎（search engine）

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

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

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

浏览器

许多网上的初学者将搜索引擎和浏览器混淆了。让我们明确一下：浏览器是一个 从 Web 接收并显示网页的软件或程序，并且让用户通过 超链接 访问更多页面。搜索引擎则是一个帮助用户从其他网站中寻找网页的网站。

这种混淆之所以出现是因为当一个人打开一个浏览器的时候，浏览器展现的是一个搜索引擎的主页。这有什么意义呢？很明显，因为你打开浏览器要做的第一件事就是去寻找一个网站。

不要把基础设施（浏览器）和服务（搜索引擎）混淆。这种区分会对你很有帮助。举一个例子，一个火狐浏览器把谷歌搜索框当作它默认开始页面。但是甚至有些专业人员也还把它们说得很宽泛，所以不用对这种区分太过谨慎。

浏览器安全

每个浏览器标签页就是其自身用来运行代码的独立容器（这些容器用专业术语称为“运行环境”）。大多数情况下，每个标签页中的代码完全独立运行，而且一个标签页中的代码不能直接影响另一个标签页（或者另一个网站）中的代码。这是一个好的安全措施，如果不这样，黑客就可以从其他网站盗取信息，等等。

备注： 要以安全的方式在不同网站/标签页中传送代码和数据，这种方法现在是普遍存在的。

HTTP (The HyperText Transfer Protocol，超文本传输协议)

正如它的名字暗示，HTTP 明确提出了如何在两台计算机间传输超文本（比如说链接的网络文档（linked web documents））。

一个*协议*是一套为了在两台计算机间交流而制定的规则。HTTP 是一个文本化的（textual），无状态的（stateless）协议。文本化：所有的命令都是纯文本的（plain-text）和人类可读的（human-readable）。无状态：无论是服务器还是客户都不会记住之前的交流。举个例子，仅依靠 HTTP，一个服务器不能记住你输入的密码或者你正处于业务中的哪一步。你需要一个应用服务器来进行这样的工作。（我们会在日后的文章中涵盖这类的技术。）

HTTP 为客户和服务器间的如何沟通提供清晰的规则。就目前而言，只需要知道这几点：

• 只有用户可以制定 HTTP 请求，然后只会发送到服务器。服务器只能响应客户端的 HTTP 请求。
• 当通过 HTTP 请求一个文件时，客户必须提供这个文件的URL。
• 网络服务器必须应答每一个 HTTP 请求，至少也要回复一个错误信息。

总之，HTTP是用于在 Web 上传输超媒体文件的底层 协议 ，最典型场景的是在浏览器和服务器之间传递数据，以供人们浏览。现行的 HTTP 标准的版本是 HTTP/2。HTTP 是基于文本的 (所有的通信都以纯文本的形式进行) 以及无状态的 (当前通信状态不会发现以前的通信状态)，该特性极大方便了在 www 上浏览网页的人。除此之外，HTTP 也可以用于构建服务器之间交互的 REST web 服务，以及使得网站内容更加动态化的 AJAX 请求。

而http:// 称为 schema，是 URI 的组成部分，一般位于网络地址的开头。

一个网络服务器提供了 HTTP（超文本传输协议）支持。

在一个网络服务器上，HTTP 服务器负责处理和应答传入的请求。

1. 当收到一个请求时，HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配。
2. 如果是，网络服务器会传送文件内容回到浏览器。如果不是，一个应用服务器会建立必要的文件。
3. 如果两种处理都不可能，网络服务器会返回一个错误信息到浏览器，最常见的是“404 未找到” ["404 Not Found"]。（这错误太常见以至于很多网页设计者花费许多时间去设计 404 错误页面 [404 error pages]。）

对用户而言，在浏览器上通过 HTTP 请求这个文件。当这个请求到达正确的网络服务器（硬件）时，HTTP 服务器（软件）收到这个请求，在它自己的存储空间中搜索所请求的文件。当找到这文件时，这个服务器会读取它（如果这个文档不存在，那么将返回一个 404 响应），按需处理它，并把这个文档通过 HTTP 发送给浏览器。

HTTPS

 以 https://developer.mozilla.org 为例，该地址说明请求文档时使用 HTTP 协议；这里的 https 代指 HTTP 协议的安全版本，即 SSL （或称 TLS）

SSL（安全套接层）

SSL（Secure Sockets Layer，安全套接层）是旧的标准安全技术，用于在服务器和客户端之间创建加密的网络链路，确保传递的所有数据都是私密且安全的。SSL 的当前版本是 Netscape 于 1996 年发布的 3.0 版本，已被 TLS 协议取代。

URL和超链接

Web 的最初目的是提供一种简单的方式来访问，阅读和浏览文本文档。从那时起，网络已经发展到提供图像，视频和二进制数据的访问，但是这些改进几乎没有改变三大支柱。

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

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

正如您在三大支柱中所看到的，网络上的一切都围绕着文档以及如何访问它们。

URL

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

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

https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

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

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

www.example.com 是域名。它表明正在请求哪个 Web 服务器。或者，可以直接使用IP address，但是因为它不太方便，所以它不经常在网络上使用。

:80 是端口。它表示用于访问 Web 服务器上的资源的技术“门”。如果 Web 服务器使用 HTTP 协议的标准端口（HTTP 为 80，HTTPS 为 443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。

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

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

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

如何使用 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/en-US/docs/Learn
隐去协议	//developer.mozilla.org/en-US/docs/Learn 在这种情况下，浏览器将使用与用于加载该 URL 的文档相同的协议来调用该 URL。
隐去域名	/en-US/docs/Learn 这是 HTML 文档中绝对 URL 最常见的用例。浏览器将使用与用于加载托管该 URL 的文档相同的协议和相同的域名。注意：不可能省略该域名而不省略协议。

我们假设从位于以下 URL 的文档中调用 URL： https://developer.mozilla.org/en-US/docs/Learn。下面是相对URL

子资源	Skills/Infrastructure/Understanding_URLs 因为该 URL 不以 / 开头，浏览器将尝试在包含当前资源的子目录中查找文档。所以在这个例子中，我们真的想要达到这个 URL https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs
回到目录树中	../CSS/display 在这种情况下，我们使用从 UNIX 文件系统世界继承的../写入约定来告诉我们要从一个目录上升的浏览器。在这里，我们要达到以下 URL：https://developer.mozilla.org/en-US/docs/Learn/../CSS/display，可以将其简化为：https://developer.mozilla.org/en-US/docs/CSS/display

语义 URL

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

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

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

超链接

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

在 Web 之前，很难访问文档并从一个文档跳转到另一个文档。人类可以理解的 URL 已经使得文档容易被访问，但是你很难通过输入一个长 URL 来访问一个文档。超链接改变了这一切。链接可以将任何文本与 URL 相关联，因此用户只要激活链接就可以到达目标文档。链接是一个突破，它使得网络变得非常有用和成功。在本文的其余部分，我们讨论各种类型的链接及链接在现代网页设计中的重要性。

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

关于链接，有一些细节值得考虑：

链接的类型

内链

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

外链

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

传入链接

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

当你刚开始的时候，你不必担心外部链接和传入链接，但是如果你想让搜索引擎找到你的网站，这些链接就非常重要。

锚

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

链接和搜索引擎

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

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

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

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

域名

域名（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 地址很难记忆而且可能会随着时间的推移发生改变。为了解决这些问题，我们使用方便记忆的地址，称作域名。

域名的结构

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

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

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 网站的结果：

获得一个域名

过程很简单：

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 地址，你的浏览器能够与网络服务器交换内容。

了解了如上这些，那么，什么是万维网？

客户端和服务器

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

• 客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome 的浏览器）。
• 服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。

其他部分

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

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

• 网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。
• TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。
• DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。
• HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol ）。就像你下订单时所说的话一样。
• 组成文件: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：
  • 代码 : 网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到不同的技术。
  • 资源 : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word 文档、PDF 文件。

到底发生了什么？

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

1. 浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。
2. 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
3. 服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。
4. 浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口 —— 新东西，好棒！）。

解析组成文件的顺序

当浏览器向服务器发送请求获取 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 地址。

数据包详解

前面我们用“包”来描述了数据从服务器到客户端传输的格式。这是什么意思？基本上，当数据在 Web 上传输时，是以成千上万的小数据块的形式传输的。大量不同的用户都可以同时下载同一个网页。如果网页以单个大的数据块形式传输，一次就只有一个用户下载，无疑会让 Web 非常没有效率并且失去很多乐趣。

附：web术语表MDN Web 文档术语表：Web 相关术语的定义 | MDN (mozilla.org)