编辑模式 · 点击文字即可修改 · Ctrl+S 导出 再次按 E 或点击左上角退出
模块 2.3

互联网是怎么工作的

浏览器、域名、DNS、端口、服务器

零到全栈 · 李勃老师 · 2026

网页不是凭空出现的。
浏览器里看到的东西,总得先来自某个地方

这一节我们就把这条链路从头到尾走一遍:从你电脑里的一个 html 文件,一直到互联网上任何人都能访问的网页。

HANDS-ON

先从一个文件开始

第一步:在终端里创建文件
# 回到家目录,创建项目文件夹 cd ~ mkdir zero-to-tech cd zero-to-tech touch index.html # 确认文件已创建 ls
第二步:把这段代码写入 index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个全栈网站</title> </head> <body> <h1>你好,互联网</h1> <p>这是我的第一个全栈网站</p> </body> </html>

用 vim 或 VS Code 都可以写入这段代码。完成后用 cat ~/zero-to-tech/index.html 验证内容是否正确写入。

OPEN IN BROWSER

用浏览器打开它

方式一:通过访达(Finder)
# 在终端里打开文件夹 open ~/zero-to-tech

访达会打开这个文件夹,找到 index.html,双击它——浏览器会自动打开并显示页面。

方式二:直接用终端打开
# 跳过访达,直接在浏览器打开 open ~/zero-to-tech/index.html

一行命令直接打开文件,浏览器立刻显示结果。两种方式都建议各试一次。

Windows 用户:open 命令可能不可用,在文件管理器中找到文件后双击,或右键选择"用浏览器打开"。

FILE & WEBPAGE

代码文件和浏览器里的网页,是什么关系

index.html
源文件
你在编辑器里写的代码,保存在本地磁盘上
browser
浏览器读取并解释
浏览器打开文件,按照 HTML 规则解析其中的内容
webpage
你看到的网页
代码被渲染成有标题、有段落的可视页面

你在 VS Code 或 vim 里改的是代码文件,浏览器里显示的是这个文件被读取、被解释之后的结果。它们不是同一个形态,但有直接关系。

一个网页最开始完全可以只是你电脑里的一个文件。

SERVER

那台远程的电脑,通常就叫服务器

你每天在做什么
访问网站 = 访问另一台电脑的内容

浏览器既然能打开你自己电脑里的 index.html,当然也能打开其他电脑上提供的内容——这正是你每天都在做的事。

服务器可以提供
持续对外开放的那台电脑
  • 网页文件(html、css、js)
  • 图片、视频等静态资源
  • 接口数据(登录、搜索、推送)
  • 任何它愿意对外提供的内容

服务器不是什么神奇的东西,本质上就是一台联网的电脑,只不过它的主要工作不是给某个人本地使用,而是持续地对外提供服务。

IP ADDRESS

浏览器要先找到那台服务器

类比现实世界
找楼需要地址,找服务器需要 IP

现实世界里你要找一栋楼,需要地址。网络世界里,一台联网的设备也需要地址——这个地址就是 IP 地址。

可以把它理解成:一台联网设备在网络中的唯一地址。

IP 地址长什么样
120.55.66.77
  • 对机器而言:非常方便
  • 对人而言:不好记、不好读、不好传播
  • 换地址以后也需要重新通知所有人
DOMAIN NAME

所以才会有域名

baidu.com
百度搜索引擎。你不需要记它背后的 IP 地址,只需要记这个名字。
github.com
全球最大代码托管平台。你每次访问时,它的 IP 地址可能已经变了。
google.com
谷歌搜索引擎。域名让你不需要关心它到底在哪台机器上。

域名的作用,可以先理解成:给机器地址起一个更方便人记忆和输入的名字。 你平时在浏览器里输入的,通常不是 IP 地址,而是域名。

DNS

DNS 负责把域名翻译成 IP 地址

你在浏览器里输入
github.com
DNS 查询
浏览器向 DNS 系统询问:这个域名对应哪个 IP?
DNS 返回对应的
140.82.121.4
找到服务器
浏览器用这个 IP 地址找到目标服务器,继续访问

域名是给人看的名字,DNS 负责把它翻译成机器要用的 IP 地址。这个翻译过程发生在你每次访问网站时,速度非常快,你几乎感觉不到。

DNS = Domain Name System,域名系统。可以先把它理解成互联网的"通讯录"。

PORT

找到服务器以后,还要找到具体服务

端口是什么
同一台电脑上不同服务的入口

一台服务器上可能同时运行好几个不同的服务。浏览器找到服务器以后,还需要确认:我应该连哪个入口,才能拿到网页内容?

端口就是用数字标记的这些入口,一台服务器可以开放多个端口。

后面会频繁遇到的两个端口
:80
普通 HTTP 访问。http://xxx.com 默认请求 80 端口。
:443
HTTPS 加密访问。https://xxx.com 默认请求 443 端口。

平时你访问网站,这些端口号会被省略——浏览器会根据 http 或 https 自动选择。

FULL CHAIN

把整条链路连起来

01 你在浏览器里输入一个域名,按下回车
02 浏览器先去查这个域名对应的 IP 地址
03 DNS 把这个域名对应的 IP 地址告诉浏览器
04 浏览器根据 IP 地址找到那台服务器
05 浏览器通过某个端口(80 或 443)连接到服务器上的具体服务
06 服务器收到「请求」(request),把网页内容作为「响应」(response)返回给浏览器
07 浏览器把这些内容显示成你看到的网页——这个过程完成了

这条链路看起来很长,实际上有许多工作不需要你自己来做。下一节我们会真正把这个过程走起来。

CHECKPOINT

学完这节,你至少应该能做到

知道浏览器不仅能打开网站,也能打开本地网页文件
知道 html 文件和浏览器里看到的网页之间是什么关系
知道访问网站时,本质上是在访问另一台电脑(服务器)提供的内容
知道服务器可以先理解成一台联网的、对外提供服务的电脑
知道域名、IP、DNS、端口分别在这条链路里承担什么角色
能用自己的话大致解释"输入网址后发生了什么"
零到全栈

"输入网址后发生了什么"
不再是黑盒了

接下来,我们去部署第一台真实的服务器,亲自把这条链路走通。

零到全栈 · 模块 2.3 完