diff --git a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md index c82ac91514b81e..e949f2b339f500 100644 --- a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -1,100 +1,83 @@ --- title: 万维网是如何工作的 slug: Learn/Getting_started_with_the_web/How_the_Web_works +l10n: + sourceCommit: 530c1f54e63834411aa38789b1ac82e3831c4dfa --- {{LearnSidebar}} {{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}} -这篇文章简单描述了你在计算机或手机上通过浏览器访问网页时发生了什么。 +*万维网是如何工作的*简单描述了你在计算机或手机上通过 Web 浏览器访问网页时发生了什么。 -这个理论在短期内对你编写网页代码不会有实质性的帮助，但是不久之后你就会真正受益于理解了后台究竟发生了什么。 +这个理论在短期内对你编写 Web 代码不会有实质性的帮助，但是不久之后你就会真正从理解了后台究竟发生了什么中受益。 ## 客户端和服务器 -连接到互联网的计算机被称作客户端和服务器。下面是一个简单描述它们如何交互的图表： +连接到互联网的计算机被称作**客户端**和**服务器**。下面是一个简单描述它们如何交互的图表： -![Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client](simple-client-server.png) +![两个圆圈代表客户端和服务器。带有请求标签的箭头是指从客户端到服务器，带有相应标签的箭头是指从服务器到客户端](simple-client-server.png) -- 客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome 的浏览器）。 -- 服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。 +- 客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上能访问 Web 的软件（通常是一个 Web 浏览器，如 Firefox 或者 Chrome）。 +- 服务器是存储网页、站点或应用程序的计算机。当一个客户端设备想要获取一个网页时，一份网页副本将从服务器上下载到客户端机器上，在用户的 Web 浏览器上显示。 ## 其他部分 -上文所述的客户端和服务器并不能完成全部工作。还有其他必要的部分，我们将在下面讲述。 +上文所述的客户端和服务器并不能完成全部工作。还涉及许多其他的部分，我们将在下面讲述。 -现在，让我们假设 Web 就是一条路。路的一端是客户端，就像你的家。另一端则是服务器，就像你想去的商店。 +现在，让我们假设 Web 就是一条路。路的一端是客户端，就像你的家。另一端则是服务器，就像你想去买东西的商店。 -![A black-and-white photo of a person crossing a road at a crosswalk](road.jpg) +![一张正在穿过斑马线的行人的黑白照片](road.jpg) 除了客户端和服务器，我们还需要了解： -> [!NOTE] -> 我感觉下面的比喻还不是很契合。我感觉再合理一点的比喻： -> -> 假如你生活在一个封闭的村子叫做“盘溪新村”，村子盛产苹果。 -> -> - **互联网**：好比地球上纵横交错的道路。 -> - **网络连接**：道路通到了村子路口。从此，村子里的苹果就可以运出去卖了。 -> - **TCP/IP**：为了将村里的苹果能规范有效的运卖出去而不出问题，村长作出如下规定：“用规格刚好 20 cm \* 20 cm \* 20 cm 的泡沫箱来装，之后外面又用相应规格的纸箱包裹上，最后打上透明胶”。并且要求，对方收到时，一定要外包装完好，不然就会补发。而且还给对方发了一张发货单，明确说明了，苹果有多少，是用什么方法包装的，只有货和发货单对上了，对方才会确认收货。 -> - **DNS**：突然一天，郭德纲想吃苹果，就跟于谦说，“我听说盘溪新村（域名）的苹果好，要他们那个套餐一选项啊！”，于谦一听，得，也不知道盘溪新村在哪，打开地图查（DNS）吧，一查，好嘛，江苏省苏州市（IP 地址），于是于谦去了苏州，找了村子，告诉村长，要套餐一，要用顺丰快递，并且留下了北京德云社的地址。 -> - **HTTP**：过了几天，德云社的人一看，有快递来了，来了这么一句，“只收‘顺丰’，拒收其他快递”。司机忙说，“是顺丰，是顺丰”，这才对上暗号，德云社的人收下了货。 -> - **组成文件**：送来的货可不止一车，而且也不止一种苹果，这车是红富士，那车黄富士的。 -> -> - **代码**：有点像，村长事先安排的说明书，让司机到了地方，如何卸车，货放到什么位置，而德云社的看说明书，知道什么样的苹果放到什么位置上，什么样苹果如何食用最佳，等等。 -> - **资源**：不同种类的苹果。 -> -> 一点拙见，在下抛砖引玉，希望有更好理解的比喻。 - -- **网络连接**: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。 -- **TCP/IP**: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。 -- **DNS**: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。 -- **HTTP**: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（{{Glossary("Protocol" , "protocol")}} ）。就像你下订单时所说的话一样。 -- **组成文件**: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型： - - - **代码** : 网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到不同的技术。 - - **资源** : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word 文档、PDF 文件。 +- **网络连接**：允许你在 Web 上发送和接受数据。基本上和你家到商店的街道差不多。 +- **TCP/IP**：传输控制协议和互联网协议是定义数据如何在互联网上传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。 +- **DNS**：域名系统像是一本网站地址簿。当你在浏览器内输入一个网址时，浏览器通过 DNS 找到网站的 IP 地址，然后获取网站。浏览器需要找到网站所在的服务器，这样才能发送 HTTP 消息到正确的地方（参见下方）。就像你要知道商店的地址才能到达那。 +- **HTTP**：超文本传输协议是一个定义客户端和服务器之间如何交流的应用层{{Glossary("Protocol" , "协议")}}。就像你下订单时所说的话一样。 +- **组成文件**：一个网站由许多文件组成，就像商店里不同的商品一样。这些文件有两种主要的类型： + + - **代码文件**：网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到其他的技术。 + - **资源**：这是其他组成网页的东西的集合，比如图像、音频、视频、Word 文档、PDF 文件。 ## 到底发生了什么？ 当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时）： -1. 浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。 -2. 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。 -3. 服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。 +1. 浏览器在域名系统服务器上找出存放网页的服务器的实际地址（找出商店的位置）。 +2. 浏览器发送 HTTP 请求信息到服务器，请求服务器发送一份网站的副本到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。 +3. 假设服务器同意客户端的请求，服务器会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。 4. 浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口——新东西，好棒！）。 ## 解析组成文件的顺序 -当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 {{htmlelement("link")}} 和 {{htmlelement("script")}} 元素，这些元素分别指向了外部的 [CSS](/zh-CN/docs/Learn/CSS) 样式表文件和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 脚本文件。了解这些文件被[浏览器解析](/zh-CN/docs/Web/Performance/How_browsers_work#解析)的顺序是很重要的： +当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 {{htmlelement("link")}} 和 {{htmlelement("script")}} 元素，这些元素分别指向了外部的 [CSS](/zh-CN/docs/Learn/CSS) 样式表文件和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 脚本文件。了解页面加载时[浏览器解析](/zh-CN/docs/Web/Performance/How_browsers_work#解析)这些文件的顺序是很重要的： -- 浏览器首先解析 HTML 文件，并从中识别出所有的 `` 和 `