一个 Web 网站不是"一堆网页文件"这么简单，它由四件东西凑成：域名（门牌）、服务器主机（房子）、Web 服务器软件（门房）、内容文件（货）。四件齐了才立得起来；而搭这四件的方式有一整条光谱——从自己买机器装软件写页面（什么都要管）到拖拽式建站平台（什么都不用管），管得越少越贵，这条光谱正好对应 1.8 讲的 IaaS / PaaS / SaaS。
从今天起，拆的是每天都在发生、却几乎没人说清的那三秒钟：在地址栏敲一个网址，按回车，页面出来了——这中间到底过了几道手？
第三章把通用语言（TCP/IP）讲透了：地址、路由、端口、DNS、DHCP 全会了。可那些都是"怎么把数据送到"。这一章要讲的是"送到了之后，怎么了"——也就是应用程序自己那套规矩：网页是怎么被取回来的、为什么能点链接跳页、为什么能输入密码登录、为什么有的页面快有的慢。
一句话：第三章讲管道，第四章讲管道里流的东西怎么变成你眼前那个页面。
打开网页要走的链路，前三步第三章已经讲完了：
| 步骤 | 谁在干 | 出处 |
|---|---|---|
| 把域名换成 IP | DNS 解析模块 + DNS 服务器 | 3.21、3.22 |
| 跟服务器建立连接 | TCP 三次握手 | 3.5 |
| 数据怎么出门 | 私有地址 → NAT → 路由器逐跳转发 | 3.14、3.7 |
| 找到那个程序 | 端口号（80 / 443） | 3.17 |
本章新增的，只有最后一步：数据到了服务器，那个程序拿它干了什么，又是怎么把网页送回来的。
一、先给"Web 网站"下个准确的定义
平时说"网站"，脑子里想的是屏幕上那个页面。但那一屏东西是结果，不是网站本身。
| 部件 | 通俗说法 | 缺了会怎样 |
|---|---|---|
| 域名 | 网站的门牌（example.com） |
得靠一串 IP 访问——没人记得住、也没法换服务器 |
| 服务器主机 | 网站的房子（一台 24h 开机的机器） | 关机了页面就打不开 |
| Web 服务器软件 | 网站的门房（收请求、给文件） | 装了机器也没人应答请求 |
| 内容文件 | 网站的货（HTML / CSS / JS / 图片） | 服务器应答了，但"箱子里是空的" |
（对应上面第一张图）
这里最容易混的是中间两件，我拿生活里的楼做个类比：
- 服务器主机 = 房子（一台 24 小时开着机的电脑，收 1.7）
- Web 服务器软件 = 门房（跑在房子里、守着大门等你来的那个程序）
房子和门房是两回事。你可以换一栋房子（把网站迁到新服务器）而门房还是原来那套软件；也可以在同一栋房子里让两个门房各管一个站（一台服务器托管多个网站，靠域名区分，这在独立服务器上非常常见）。
那个"门房"到底是谁
Web 服务器软件是这四件里唯一必须"跑起来"的——它整天空转着等，一有人敲门就干三件事：
- 守在门口——盯着 80 端口（HTTP） 和 443 端口（HTTPS）（这两个号的出处见 3.17 的已知端口名册）
- 看你要什么——收到请求，从中读出"你要哪个文件"（
/index.html、/images/logo.png） - 把货递出去——从网站根目录找到文件，打包成响应送回；找不到就回一句 404
实际用哪套，主流就三个名字：
| 软件 | 常在哪见到 | 特点 |
|---|---|---|
| Apache | 老牌网站、本机学习（XAMPP 里就是它） | 资格最老、模块最多、配置写起来啰嗦 |
| nginx | 现在的主流：大流量站点、反向代理 | 轻、快、扛并发 |
| IIS | Windows Server 环境 | 微软家、和 Windows 域打通 |
1.7 说"服务器 = 24 小时待命跑服务程序的电脑"——那个"服务程序"，在 Web 场景里就是本节这位门房。
所以"网站服务器"这个词其实是两层意思叠在一起：硬件那一层（房子）+ 软件那一层（门房）。听懂这一点，后面看到"换服务器"（换机器）和"换服务器软件"（换 nginx / Apache）就不会混。
别急：你的电脑也能当服务器
这一点值得先破掉心理门槛——门房不看机器贵不贵，只看有没有程序在开着。
cd 任意一个放了几张网页的文件夹
python -m http.server 8000
然后在浏览器打开 http://localhost:8000——一个真网站就这么跑起来了（这条命令 1.7 的 Demo07 里用过，本节 Demo38 会再走一遍，这次带着"看门房怎么干活"的眼光）。区别只在于：它在你自己电脑上、只有你能访问、关机就没了。
二、网站是怎么被"构建"出来的
知道了四件东西，构建一个网站无非就是把这四件凑齐。凑法有三条路，核心区别是"哪几件由你负责"：
| 路线 | 你要负责 | 谁负责其余 | 典型做法 |
|---|---|---|---|
| 全自建 | 四件全管 | 没人帮你 | 买 VPS / 独立服务器 → 自己装 nginx → 传文件 → 配域名解析 |
| 半托管 | 只管内容文件（有时加一点配置） | 平台管机器和软件 | 虚拟主机 / 云主机一键镜像 / 托管型建站环境 |
| 全托管 | 什么都不用管，甚至内容都是拖出来的 | 平台全包 | WordPress.com、各类 SaaS 建站平台、电商平台店铺 |
1.8 那节把云服务按"你租到服务器的第几层"分成三类。现在把它套到建站上，严丝合缝：
| 建站路线 | 你租到了第几层 | 云服务叫法 |
|---|---|---|
| 租 VPS，自己装系统、装 nginx、传文件 | 只租到硬件（厨房给你，锅碗自己买） | IaaS |
| 只写代码/传页面，运行环境平台给 | 租到运行环境（半成品披萨） | PaaS |
| 用建站平台拖页面，什么都不碰 | 直接租到应用程序（进店堂食） | SaaS |
租得越多，你管得越少——但灵活度也越低。 想改点底层配置时会发现平台不给开那个口子，这是全托管的必然代价（1.8 的原话："鱼与熊掌"）。
那"构建"这个词，到底指哪些动作
以全自建这条最硬的路为例，把动作摊开看，其实和 2.5 的网络设计五步是同一个骨架：
| 步骤 | 干什么 | 回收旧账 |
|---|---|---|
| ① 备内容 | 写好 HTML / 备好图片，放成一棵目录树 | — |
| ② 备房子 | 买或租一台机器，装好操作系统 | 1.7 内部部署 vs 云服务 |
| ③ 装门房 | 安装 Web 服务器软件，指定"网站根目录"指到哪 | 本节 |
| ④ 挂门牌 | 注册域名 → 在 DNS 里把域名指向这台机器的 IP | 3.21 资源记录 A、3.22 |
| ⑤ 开门验客 | 从手机流量（不走自家 Wi-Fi）打开域名，能显示就算成 | 3.12 三层递进排障法 |
第 ⑤ 步那个"用手机流量试"是条实用经验：走自家 Wi-Fi 访问可能被内网路径"抄近道"掩盖问题（收 3.14 NAT 单向性——对外能不能访问，只有从外面试才知道）。
三、网页本体里装的是什么
"内容文件"这箱货，日常就这几类：
| 文件 | 干什么 | 类比 |
|---|---|---|
| HTML | 内容与结构（标题、段落、链接、图片位置） | 房子的骨架 |
| CSS | 外观（颜色、字号、间距、布局） | 装修 |
| JavaScript | 行为（点击响应、动态更新、请求数据） | 水电煤气（能动能干活） |
| 图片 / 字体 / 视频 | 素材 | 家具 |
- 静态：文件本来就存在，门房找到就发。访问
logo.png一万次，发的都是同一个文件。 - 动态：文件不存在，是服务器上的程序现场生成的。典型场景：登录后页面顶部显示"欢迎你，波仔"——这行字不在任何文件里，是程序查到你的账号后拼出来的。
动态内容的背后通常还有数据库（一个专门存数据的程序）：程序收到请求 → 查数据库 → 拿数据 → 和事先写好的模板拼在一起 → 才变成 HTML 发给你。
动态内容越多的网站（论坛、后台系统、电商），服务器越吃力——因为它每次都得"现场干活"，不能像静态文件那样直接扔出去。这也是 1.7 说的"服务器不够就得弹性伸缩"的现实来源。
双击文件走的是 file://，浏览器直接读硬盘，不经过网络、也不经过任何门房。从服务器打开走的是 http://，中间隔了 DNS、TCP、HTTP 一整条链（本章要讲的就是这条链）。
两个最实际的差别：① 本地能用的某些脚本能力，从 http:// 打开会被浏览器限制（安全策略）；② 页面里那些"请求数据"的动作，本地根本没有服务器可问。
四、把这四件串起来：一次访问的完整时间线
（对应上面第二张图）
| 时刻 | 谁在做 | 发生了什么 |
|---|---|---|
| 1 | 你 | 地址栏输入 https://example.com/index.html 回车 |
| 2 | 浏览器 | 把网址拆成三块：协议 https / 域名 example.com / 路径 /index.html |
| 3 | 解析模块 + DNS | 查 IP：本机缓存 → hosts → 依次问 DNS 服务器（3.21、3.22） |
| 4 | 你的电脑 ↔ 服务器 | 三次握手建连接（3.5），目标是 443 端口（3.17） |
| 5 | 路上的设备 | 数据包出门：查路由表（3.7）→ 问网关 MAC（3.16）→ 经 NAT 换地址（3.14）→ 逐跳接力（1.4） |
| 6 | 服务器上的门房 | 收到请求，找到文件，发回响应（状态码 + 内容） |
| 7 | 浏览器 | 读到 HTML，发现里面还引用了 CSS、JS、图片 → 再发一长串请求 |
| 8 | 你 | 页面画出来了 |
打开一个网页，从来不是一次请求。
你只敲了一个网址，浏览器随后为页面里每一个 CSS、每一个脚本、每一张图片、每一个字体各发一次请求——一个普通首页常常是几十到上百次请求。
这就解释了三个日常现象： - 为什么页面是一点点"长出来"的（先文字后图片）——文件到齐的先后不同 - 为什么缓存清掉后第一次打开特别慢（3.21/3.22 讲的冷热查询，在资源层也是一样） - 为什么"图片太多网页就卡"——不是字节量大，而是请求次数多（每次都要建连接、走一遍链路）
这不是"网络慢"，是一个页面本来就由几百个小包裹拼成。第一次打开某网站的"卡一下"，跟 3.18 讲的 TCP 慢启动、3.21 讲的冷查询，说的是同一件事的不同层。
五、动手 Demo38：把一个网站拆开看
1. 数清一个网页的"包裹数"（最有冲击力的一步）
打开任意一个门户网站，按 F12 → 切到 网络（Network） 面板 → 刷新页面。
看面板左下角的请求数和总传输大小。你会看到一百多条记录——这一百多条，就是刚才讲的那一串请求（这也正是 1.6 的 Demo06"F12 看应用层对话"的放大版）。
2. 看门房说的话（收 3.5 的 curl -v）
curl -I https://www.example.com
-I 只取响应头。重点看三行：状态码（200 正常 / 301·302 跳转 / 404 找不到 / 500 服务器自己出错）、Content-Type（这是个什么文件）、Server（门房是哪个软件——经常能直接看出 nginx 还是 Apache）。
3. 自己当一次门房（收 1.7 的 Demo07）
cd 一个放了几个 .html 的文件夹
python -m http.server 8000
浏览器打开 http://localhost:8000。这次注意看这条命令的窗口——你每刷新一次页面，它就打印一行日志。
那一行日志，就是门房的工作记录："谁在什么时候要了什么文件、我回答了什么"。真实网站的服务器日志，就是这张表的放大版（1.7 讲的"监控"里最有用的那一项）。
4. 认一遍"网址的五脏六腑"
https://www.example.com:443/path/page.html?q=1#top
└─┬─┘ └──────┬───────┘└┬┘└─────┬─────┘└─┬─┘└┬┘
协议 域名(=IP) 端口 路径 查询 锚点
- 协议：用哪套门房语言（
http明文 /https加密） - 域名：3.21 学过的那个"电话簿名字"，由 DNS 换成 IP
- 端口：不写就按协议默认（80 / 443，收 3.17）
- 路径：要货架上的哪个文件（给门房的"取货单"）
- 查询串
?q=1：给服务器的附加参数（搜索关键词、翻到第几页） - 锚点
#top：只给浏览器自己看，服务器根本收不到——它只是"跳到页面第几节"的指令
5. 30 秒实验：给一个网页做体检 在 F12 网络面板里点一下 "大小"列排序，回答三个问题： ① 一共几个请求？② 有没有一个特别大的文件（通常是图片或视频）？③ 重复刷新一次，哪些请求变成了"缓存命中"（状态 304 或显示 memory / disk cache）？ —— 这三问就是前端优化的全部起点。先看清楚，再谈优化。
六、常见误区
- ❌ "网站就是一堆网页文件" → 还有域名、服务器主机、Web 服务器软件三件；文件只是其中的"货"（本节第一张图）
- ❌ "服务器是一种特殊的机器" → 跑着服务程序的电脑就是服务器（收 1.7）；你的笔记本跑
python -m http.server那一刻也是 - ❌ "打开一个网页 = 一次请求" → 一次 HTML 请求后面跟着几十上百次资源请求，页面是拼出来的
- ❌ "域名和网站是一回事" → 域名是门牌：可以换门牌、也可以一个门牌挂多个站（一台服务器托管多站）
- ❌ "做网站一定得买服务器" → 从自建到建站平台是一整条光谱，对应 IaaS / PaaS / SaaS（收 1.8）；租得越多管得越少
- ❌ "80 和 443 是随便挑的号" → 它们是 HTTP / HTTPS 的已知端口（收 3.17）：服务端守着固定号，客户端才找得到
- ❌ "网页上的字是一个一个从服务器传来的" → 服务器发的是文本文件（HTML），排版和绘制是浏览器干的活
- ❌ "本地能打开，说明网页没问题" →
file://和http://是两条完全不同的路，本地能跑不代表上线能跑（反之亦然）
七、动手自测
- Web 网站由哪四件东西组成？各用一句大白话说清它是干什么的。
- "服务器主机"和"Web 服务器软件"有什么区别？能不能只换其中一个？
- 一台机器上跑两个不同的网站，靠什么区分？
- Web 服务器软件一整天在干什么？它守的是哪两个端口？
- 建站的三条路（自建 / 半托管 / 全托管）分别对应 1.8 的哪一类云服务？
- 静态内容和动态内容的本质差别是什么？动态内容背后通常还有什么？
- 你敲了一个网址，为什么浏览器发了上百次请求？
- 网址里的
#top，服务器能收到吗？为什么？ - 从"敲网址"到"看到页面"的八个时刻，哪个环节是本章新讲的？前几个环节分别是第三章的哪几节？
- 想让别人访问你家的服务器，为什么建议用手机流量试，而不是用自家 Wi-Fi？
答案：
① 域名（门牌，靠 DNS 换成 IP）、服务器主机（房子，24h 开机的机器）、Web 服务器软件（门房，收请求给文件）、内容文件（货，HTML/CSS/JS/图片）。
② 前者是硬件（一台机器），后者是软件（nginx / Apache / IIS）。能分别换：搬家换机器而门房不变，或者同机器换一套服务器软件继续服务（也正因此，"网站服务器"这个词有两层意思）。
③ 靠域名区分：同一个 IP 收到请求，门房从请求头里认出"你要的是哪个域名"，再去对应的网站根目录取文件——这正是 1.7 说的"一台服务器能跑多个服务"。
④ 一直空转着等请求：守着 80（HTTP）/ 443（HTTPS） 端口，收到请求 → 找文件 → 回响应，找不到就 404。
⑤ 自建 = IaaS（只租到硬件/机器）；半托管 = PaaS（租到运行环境）；全托管 = SaaS（直接租到应用程序）。规律：租得越多，管得越少，灵活度越低。
⑥ 静态文件本来就存在于磁盘上，找到就发；动态内容是程序现场生成的。动态背后通常有数据库。
⑦ 因为页面不是单个文件：HTML 里引用的每个 CSS、JS、图片、字体，浏览器都得各要一次。所以"卡"很多时候是请求次数多，不是字节量大。
⑧ 收不到。# 后面是锚点，只给浏览器自己用来"跳到页面某一段"，从不出现在发给服务器的请求里。（对比第二节的 ?q=1 查询串，那个是要发给服务器的。）
⑨ 新讲的是最后一步（HTTP 请求与应答、门房怎么给货）。前几步：查 IP → 3.21 / 3.22；建连接 → 3.5；出门与转发 → 3.7 / 3.14 / 3.16；端口定位 → 3.17。
⑩ 因为走自家 Wi-Fi 访问可能被内网路径"抄近道"掩盖问题（内网直达，不经过 NAT 出墙那一趟）。对外可不可达，只有从外面试才作数（收 3.14 NAT 单向性）。
八、下一步学什么
- ☑ 4.2 制作Web网页（HTML） —— 下一节：制作Web网页（HTML）。本节把网站由什么构成说清了（四件套），下一节接过其中"内容文件"那一件，拆开看网页文件里到底写了什么。
相关笔记
- 对必要的设置进行自动设置（DHCP） —— 上一节：把设备自己配好；本节开始讲配好之后怎么去访问别人的服务
- 运行和管理服务器（服务器、云服务、内部部署） —— "服务器 = 24h 待命跑服务程序的电脑"的出处；本节的"门房"就是那个服务程序
- 使用服务器的哪个部分？云服务的分类（SaaS、PaaS、IaaS） —— 建站三条路的学名出处：租到第几层决定你要管多少
- 网络的电话簿（域名解析、主机名、DNS） —— 域名、主机名、URL 的分工；本节把 URL 拆成五段来看
- 根据端口号分配数据到应用程序（端口号、已知端口号） —— 80 / 443 这对已知端口的出处；门房守的就是这两个号
- 接收和传输数据的规则（使用TCP/IP进行通信） —— 打开网页前那三次握手；本节时间线的第 4 步
- 对应用程序的数据进行可靠传输（TCP） —— 慢启动解释了"第一次打开网站总会卡一下"
- 通信过程中所使用的语言（网络架构） —— 应用层这一格终于有了主角；HTTP 就是本节那位门房的语言
- 如何构建网络（网络的设计） —— 网络设计五步；本节"建站五步"是同一个骨架
- 从私有网络到互联网间的通信（NAT） —— 为什么"对外可不可达"必须从外面试（NAT 单向性）