Appearance
一次网页访问的完整旅程
这是本站第一课。学完它，你会明白"输入网址到看见页面"这不到一秒的时间里，互联网为你跑了多少个来回。
一、角色介绍：这台戏有五个演员
在开始之前，先认识一下接下来反复出现的五个角色：
- 浏览器（客户端）：你电脑上的 Edge/Chrome，负责"提出请求"和"把响应画成页面"
- DNS 服务器：互联网的"电话簿"，负责把域名翻译成 IP 地址
- 网络与路由：把数据包从你的电脑一跳一跳送到目的地的基础设施
- Web 服务器：网站所在的主机，负责"接住请求、返回内容"（你的站就住在 Vercel 的服务器上）
- 后端程序与数据库：动态网站里负责"算出响应内容、存取数据"的部分（纯静态站没有这两位，比如你的 myxbw.cn）
记住一句话：Web 的本质就是"客户端发请求，服务端给响应"，其余一切都是在给这句话加细节。
二、第一步：查电话簿 —— DNS 解析
你在浏览器输入 www.myxbw.cn 并回车。注意，浏览器不认识域名，它只认识 IP 地址（比如 76.76.21.61）。所以第一件事是问 DNS：这个域名对应哪个 IP？
查询顺序大致是：浏览器缓存 → 操作系统缓存 → 本地 DNS 服务器（运营商或你配的 8.8.8.8）→ 根域名服务器 → .cn 顶级域 → 权威 DNS（myxbw.cn 的权威 DNS 就是你配的阿里云 dns19/20.hichina.com）→ 拿到最终 IP。
💡 动手实验 1：按
Win+R输入cmd回车，在黑窗口里敲nslookup www.myxbw.cn，你会亲眼看到域名被翻译成了哪些 IP。这些 IP 就是 Vercel 分配给你网站的节点。
三、第二步：建立连接 —— TCP 与 HTTPS 握手
拿到 IP 后，浏览器要与服务器建立 TCP 连接（经典的"三次握手"：能听见吗→能→开聊）。由于你的站是 HTTPS，握手之后还要多一轮 TLS 握手：双方交换证书、协商加密密钥，之后所有数据都是密文传输。你在浏览器地址栏看到的小锁 🔒，就是对这一步的确认。
四、第三步：发出请求 —— HTTP 请求报文
连接就位，浏览器发出一条 HTTP 请求。它长得像这样（这就是你日后抓包时天天看的东西）：
http
GET / HTTP/1.1
Host: www.myxbw.cn
User-Agent: Mozilla/5.0 ...
Accept: text/html
Cookie: （如果有）- 第一行：方法（GET=要数据）+ 路径（
/= 首页）+ 协议版本 - 请求头：Host 说明要访问哪个站（一台服务器上可能住着很多站）、User-Agent 自报家门、Cookie 带上身份凭证
- 请求体：GET 通常没有；POST 的数据放在这里
💡 动手实验 2：打开
https://www.myxbw.cn，按F12→ 切到 Network（网络） 面板 → 刷新页面。点第一条请求，右侧就能看到真实的请求头和响应头——上面那段文字立刻不再抽象。
五、第四步：服务器干活 —— 找内容、算响应
请求到达 Vercel 的边缘节点后：
- 静态站（你的两个站都是）：服务器直接从分发好的文件里挑出对应的 HTML/JS/CSS 返回，快得像自动售货机
- 动态站（比如以后你自己写的 PHP/Python 程序）：后端代码会先执行——查数据库、算逻辑、拼页面——再把结果交出去
如果你配了防火墙规则，请求还会先过安检：我们在知识库部署的 block-scanner-paths 规则就是在这里把 /wp-admin、/.env 这类扫描请求直接拦成 403 的。
六、第五步：拿到回执 —— HTTP 响应与状态码
服务器返回的响应也分两部分：状态行 + 响应头 + 响应体。
http
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>...状态码是服务器的一句话总结，先记五组：
| 状态码 | 含义 | 记忆场景 |
|---|---|---|
| 200 | 成功 | 页面正常打开 |
| 301/302 | 永久/临时搬家 | myxbw.cn 跳到 www.myxbw.cn 就是 308 |
| 403 | 拒绝 | 防火墙拦截扫描器时的返回 |
| 404 | 找不到 | 路径写错了 |
| 500 | 服务器内部出错 | 网站代码崩了 |
七、第六步：渲染 —— 浏览器把代码变成页面
浏览器拿到 HTML 后开始解析渲染：读 HTML 搭建 DOM 树 → 遇到 CSS 算样式 → 遇到 JavaScript 执行脚本 → 页面里的 <img>、<link> 等标签还会触发更多的 HTTP 请求。所以你在 Network 面板里看到的不是一条请求，而是几十条——一条主文档加一堆资源，这正是下一阶段（前端三件套）的主角。
💡 动手实验 3：还是在 Network 面板，看页面加载到底发出了多少条请求、总共传了多少 KB。再点开
Doc类型过滤，找到那条 HTML 主文档，看看它的响应头里有没有x-frame-options: DENY——那是我们亲手加的安全响应头。
八、小结：把旅程串成一句话
text
输入网址 → DNS 查 IP → TCP/TLS 握手 → 发 HTTP 请求
→ 服务器（过防火墙 → 找内容/算逻辑）→ 返回 HTTP 响应 → 浏览器渲染 → 遇到资源再请求这节课的所有概念——DNS、TCP、HTTPS、请求、响应、状态码、渲染——之后每一课都会反复出现。做完三个动手实验再往下走，下一课我们拆开 HTTP 报文逐个字段讲：《HTTP 请求与响应：报文结构详解》。
📎 本课对应知识库阅读：《SQL 注入》第二节（你已经能看懂示例里
?id=1是怎么从 URL 进入服务器的了）。