模块 2.3：互联网是怎么工作的
- 零到全栈
- April 12, 2026
Table of Contents
网页不是凭空出现的。浏览器里看到的东西，总得先来自某个地方。
尝试做一个网页文件
首先，请看这四行命令：
cd ~
mkdir zero-to-tech
cd zero-to-tech
touch index.html
相信经过上节课的学习，你已经可以看懂这四行命令了。
它的意思就是在你的家目录下，新建一个文件夹 zero-to-tech，然后进入这个文件夹，在这个文件夹里新建一个 index.html 文件。
如果你完全理解了这四行命令，接下来逐行执行它们。
接着，我们需要在这个 index.html 中写入以下代码（千万别手敲，用复制和粘贴）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，互联网</h1>
<p>这是我的第一个网页，现在它还只是一个本地的 HTML 文件。</p>
</body>
</html>
在前面的课程中，你已经学习了两种在文件中编辑代码的方式：Vim 和 VS Code。你可以任意选择一种方式，把上述代码粘贴进 index.html 代码文件中。
无论你选择了什么方式，当你完成编辑并保存代码之后，你都可以尝试用下面这个命令，来查看 index.html 文件是否已经包含了上述代码：
cat ~/zero-to-tech/index.html
如果终端里已经完整打印了上述代码，那么你已经完成了本课程至今第一份代码文件的编辑和管理。
用浏览器打开它
刚才创建的这份 index.html 文件带有 .html 后缀，你的电脑会优先用 Web 浏览器打开它。有两种用浏览器打开 index.html 的方式，这两种方式我建议你都尝试一下。
方式一
首先，我们在电脑上打开这个 zero-to-tech 文件夹，找到这个新建的文件。
这里告诉你一个在 Mac 上用终端快速打开文件夹的命令：
open ~/zero-to-tech
你会看到访达 (Finder) 已经打开了这个文件夹，并且里面放着我们的 index.html 文件。接下来请你尝试双击这个文件，你会观察到，它会被浏览器打开。
方式二
如果你愿意，也可以跳过访达这一步，而是在终端里通过下面这个命令，用浏览器打开 index.html：
open ~/zero-to-tech/index.html
如果你用的是
Windows，不一定能直接使用open，那就按路径在文件管理器中找到index.html文件，并双击文件，或者右键选择用浏览器打开。
打开以后，你会在浏览器里看到：
- 一个有标题、有段落、有卡片的页面
- 页面里写着“你好，互联网”
- 页面里还写着“这是我的第一个网页…”等文字
现在先把这件事看清楚：
你在浏览器里看到的网页，来自你刚才保存的那个
index.html文件。
你刚才在 VS Code 或 Vim 里改的是代码文件。
而浏览器里显示的是这个代码文件被读取、被解释之后的结果。
第三部分：代码文件和网页是什么关系
现在你的电脑里同时存在两样东西：
- 一个
index.html文件 - 一个浏览器里打开的网页
它们不是同一个形态，但它们有直接关系。
可以这样理解：
html文件是网页内容的源文件- 浏览器负责读取这个文件，并把它显示成网页
而且你刚才复制进去的那些代码同时包含了：
- 页面结构定义
- 文字内容
后面讲前端基础时，你会再回头拆开认识这些东西。
到这里，网页这件事就不再那么抽象了。
它完全可以只是你电脑里的一个文件。
不同的电脑之间如何通过浏览器分享内容
现在把问题往前推一步。
浏览器既然能打开你自己电脑里的 index.html，
那它能不能打开其他电脑上提供的网页内容呢？
其实，这正是你每天都在做的事。
你平时访问一个网站时，它本质上就是：
你的浏览器，正在通过网络访问另一台电脑上提供的内容
真实的网站当然不一定只是一个单独的 html 文件，它还可能包含：
- 其他代码文件
- 图片
- 视频
- 动态数据
但对当前这一节来说，先抓住这一层已经够用了：
浏览器能打开本地网页文件，也能访问远程电脑提供的网页内容
那台远程的电脑，通常就叫服务器
如果一台电脑愿意持续对外提供内容、接收请求、返回结果，
那么在这个语境下，它通常就叫：
服务器
新手可能经常会对这里出现的“返回”这个词感觉到困惑，因为中文语境中这个词一般表示同一个主体去了一个地方再原封不动地回来。但是在计算机技术领域下，这个词一般表示的是服务端对客户端的“回复”行为。
你可以把服务器理解成一台联网的电脑，只不过它的主要工作不是给某个人自己使用，而是对外提供服务。
比如它可以提供：
- 网页文件
- 图片
- 接口数据
- 登录入口
当我们打开一个网站，就是在访问远程服务器上提供的这些内容。
浏览器访问网页时，要先找到那台服务器
如果网页内容在另一台电脑上，
浏览器要做的第一件事，就是先找到那台电脑。
现实世界里，你要去找一栋楼，需要地址。
网络世界里，一台联网设备也需要地址。
这个地址，通常就是：
IP 地址
我们可以把它理解成：
一台联网设备在网络中的地址
比如：
120.55.66.77
这种地址对机器很方便，但对人不太友好。
所以才会有域名
如果所有网站都靠人去记 IP 地址，会很麻烦：
- 不好记
- 不好读
- 不好传播
- 换地址以后也很麻烦
所以互联网里又有了另一个东西：
域名
比如：
baidu.comgithub.comgoogle.com
域名的作用，可以先理解成：
给机器地址起一个更方便人记忆和输入的名字
所以你平时在浏览器里输入的，通常不是 IP 地址，而是域名。
DNS 负责把域名翻译成 IP 地址
到这里，一个问题会自然冒出来：
你输入的是域名，但浏览器真正要找的是 IP 地址，那中间谁来负责转换？
负责这件事的，就是：
DNS
我们可以先把 DNS 理解成：
一个把域名翻译成 IP 地址的系统
比如你输入：
github.com
浏览器不会直接知道它对应哪台机器。
它需要先查：
github.com对应的 IP 地址是什么？
查到以后，浏览器才能继续往下访问。
找到服务器以后，还要找到具体服务
现在浏览器已经通过域名和 DNS，找到了目标服务器。
但事情还没结束。
因为一台服务器上，不一定只跑一个服务。
比如同一台服务器上，可能同时有好几个不同的服务在运行，就好像我们自己的电脑也可以同时做很多不同的事情。
所以浏览器还要继续确认一件事：
我这次到底要连这台电脑上的哪一个服务？
这里就要引出另一个词：
端口
端口可以理解成一台电脑里的不同入口
什么是端口？你可以把它理解为：
同一台电脑上，不同网络服务的不同入口。
服务器在同一个 IP 地址上可以开启好多个端口。
浏览器找到服务器以后，也还要知道：
我应该连哪个端口，才能拿到网页内容？
端口是用数字表示，比如后面我们会很频繁地聊的两个端口：
80443
这两个端口通常有默认的含义：
80常常和普通网页访问有关443常常和 HTTPS 加密访问有关
比如我们访问 http://xxxxx.com，就是在请求服务器的 80 端口；如果是访问 https://xxxx.com，那就是在访问服务器的 443 端口了。
我们目前已经知道：
服务器是一台电脑，端口是这台电脑上某个具体服务的入口。
现在把整条链路连起来
到这里，可以把整件事重新说一遍了。
当你在浏览器里输入一个网址并按下回车时，
大致的流程是：
- 你在浏览器里输入一个域名
- 浏览器先去查这个域名对应的 IP 地址
- DNS 把这个域名对应的 IP 地址告诉浏览器
- 浏览器根据 IP 地址找到那台服务器
- 浏览器再通过某个端口访问这台服务器上的具体服务
- 服务器把网页内容返回给浏览器
- 浏览器把这些内容显示成你看到的网页
如果你能把这七步用自己的话说出来，
那你对“输入网址后发生了什么”就已经不是完全黑盒了。
请注意，上述这个链路整体而言有两个信息发送方向：一个是从用户开始，向服务器发送「请求」（request）；另一个是服务器收到「请求」之后，向用户浏览器返回对应内容作为回应（response）。
而这个链路看起来很长，实际上有许多工作是不需要我们自己来做的，下一节我们会真正把这个过程走起来。
这节课结束时，你至少应该做到什么
学完这一节，你至少应该做到下面几件事：
- 知道浏览器不仅能打开网站，也能打开本地网页文件
- 知道
html文件和浏览器里看到的网页之间是什么关系 - 知道访问网站时，本质上是在访问另一台电脑提供的内容
- 知道服务器可以先理解成一台联网的、对外提供服务的电脑
- 知道域名、IP、DNS、端口分别在这条链路里承担什么角色
- 能用自己的话大致解释“输入网址后发生了什么”
如果这些你已经具备了，那下一节进入服务器实践时，你会更容易理解自己到底在连接什么、配置什么、发布什么。