WHY IT MATTERS
先用一句白话理解
打开网页像在餐厅点餐：URL 是桌号和菜名，DNS 帮你找到餐厅，HTTP 是订单，浏览器则把送来的 HTML、CSS、JavaScript 组装成一道能看、能操作的菜。
LEARNING OUTCOMES
学完你能做到什么
说清浏览器从收到 URL 到绘制页面的主要步骤
读懂常见 HTTP 状态码、请求头、响应头与缓存结果
使用 Elements、Network、Console 和 Performance 面板定位基础问题
用 Git 保存可回退的开发历史，并能阅读官方文档和兼容性信息
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
URL、DNS、TCP、TLS 与 HTTP/HTTPS 的职责边界
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
请求方法、状态码、Content-Type、缓存与压缩
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
HTML 解析、DOM、CSSOM、渲染树、布局、绘制与合成
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
文件系统、终端、编辑器、浏览器开发者工具
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Git 提交、分支、合并与小步提交习惯
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
MDN、标准规范与 Web Platform Baseline 的阅读方法
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
在 Network 面板找到文档、样式、脚本和图片请求
能解释 200、301、304、404、500 分别意味着什么
独立修复一次路径错误、样式未加载和脚本异常
完成第一个可访问的多页面静态站点
HANDS-ON PROJECT
动手任务
制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。
交付清单
- ✓可直接打开的三页站点
- ✓一张标注关键请求的 Network 瀑布图
- ✓三个故障的复现步骤、根因和修复说明
- ✓至少五次语义清晰的 Git 提交记录
MINIMUM RUNNABLE CODE
可直接保存为 index.html 的第一张网页
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>我的第一张 Web 名片</title>
</head>
<body>
<header>
<h1>你好，我在学习 Web</h1>
<nav aria-label="主要导航"><a href="#goal">学习目标</a></nav>
</header>
<main id="goal">
<p>打开开发者工具，在 Network 面板刷新一次页面。</p>
</main>
<script type="module">
window.addEventListener("load", () => {
console.log("页面及其依赖资源已经加载完成");
});
</script>
</body>
</html>先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 在 Network 面板找到文档、样式、脚本和图片请求
- 能解释 200、301、304、404、500 分别意味着什么
- 独立修复一次路径错误、样式未加载和脚本异常
- 完成第一个可访问的多页面静态站点
改变约束，验证你真的理解
- 不看教程，独立完成：说清浏览器从收到 URL 到绘制页面的主要步骤
- 不看教程，独立完成：读懂常见 HTTP 状态码、请求头、响应头与缓存结果
- 不看教程，独立完成：使用 Elements、Network、Console 和 Performance 面板定位基础问题
- 不看教程，独立完成：用 Git 保存可回退的开发历史，并能阅读官方文档和兼容性信息
把实验变成能交付的工程
- 可直接打开的三页站点
- 一张标注关键请求的 Network 瀑布图
- 三个故障的复现步骤、根因和修复说明
- 至少五次语义清晰的 Git 提交记录
- 检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
把浏览器、搜索引擎和互联网当成同一件事
看到报错就复制答案，没有先读第一条有效错误信息
一次提交大量无关改动，导致问题无法回退和定位
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
先不急着背标签。你会亲手观察一次页面请求经历 DNS、HTTPS、HTTP、解析和渲染的全过程，并学会用开发者工具回答“页面为什么没出来、为什么这么慢”。
Q02如果只能保留三个验收结果，应该保留什么？＋
可直接打开的三页站点；一张标注关键请求的 Network 瀑布图；三个故障的复现步骤、根因和修复说明
Q03学习过程中最需要主动避免什么？＋
把浏览器、搜索引擎和互联网当成同一件事；看到报错就复制答案，没有先读第一条有效错误信息；一次提交大量无关改动，导致问题无法回退和定位
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“制作三页个人技术名片站，并记录首页从请求到渲染的完整链路。故意制造三个错误，再用 DevTools 找到根因。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：说清浏览器从收到 URL 到绘制页面的主要步骤
- □核心机制已用最小实验验证：在 Network 面板找到文档、样式、脚本和图片请求
- □风险已检查：把浏览器、搜索引擎和互联网当成同一件事
- □风险已检查：看到报错就复制答案，没有先读第一条有效错误信息
- □风险已检查：一次提交大量无关改动，导致问题无法回退和定位
- □交付物可复现：可直接打开的三页站点
- □交付物可复现：一张标注关键请求的 Network 瀑布图
- □交付物可复现：三个故障的复现步骤、根因和修复说明
- □交付物可复现：至少五次语义清晰的 Git 提交记录
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。