为什么不一直用 HTML
本节课目标:你会亲手改一次"手写多页 HTML"的导航：改一个字，就得在 5 个页面里分别修改 5 次。改完之后，你会直观地理解为什么需要框架。
你的 Steve's Repair 官网已经做出来、也调好看了(设计基础、skills)。它现在是一个个单独的 HTML 文件:首页一个、服务一个、价格一个、关于一个、联系一个。页面数量增多后，会出现一个较为棘手的问题，这一节让你自己改一遍就明白了。
这一节不写代码、不装任何东西,只在这个网页里操作。它是一节铺垫:先让你亲身体会痛点,后面 1.9 认识框架 才会讲怎么解决。
每一页都自己抄了一份导航
几乎每个网站顶部都有一条导航栏（首页 / 服务 / 价格 / 关于 / 联系），即页面之间用于跳转的一排链接。你手写的每个 HTML 文件，都需要各自包含一份相同的导航。5 个页面意味着 5 份完全相同的导航，各自存放在独立的文件内。
这 5 份导航内容完全相同，却是 5 段彼此独立的文本。修改其中一份，其余四份仍保持原样。
动手：改一次导航，看看要改几次
▸ 操作：选中一个页面 → 输入新导航文字 → 点"应用到选中页" → 重复直到 5 页全改完。
点一张卡片下方的"选这页"选中它,改好文字后点"应用到选中页"。
5 页都改完了。 为了修改一处文案，你重复了 5 次几乎相同的操作。若页面增加到 20 个，或导航包含 8 个链接，工作量将更加繁琐。
而且这还是在操作过程中未出现任何失误的情况。下面让你看看万一改漏一页会怎样。
改漏一页,长这样
当页面数量达到 20 个时，最容易发生的不是疲劳，而是在修改过程中遗漏了某一页。漏掉的那一页,导航就和别的页对不上。问题在于:这种错当场很难发现,你得一页页点开比对才看得出来。下面是一个改漏的现场,左边那页就是被忘掉的:
首页 / 服务 / 价格 / 关于我们 / 联系
价格.html · 已改,导航是新的
首页 / 服务 / 价格 / 关于 / 联系
联系.html · 漏改了,还停在旧导航
两页摆一起一眼能看出差别,可你平时不会把 5 页并排看。访客今天进"价格"页看到"关于我们",明天进"联系"页看到"关于",就会觉得这个网站制作得很不专业。页面越多,越容易漏,越难自己发现。
手写多页 vs 使用框架
手写多页 HTML
- 每页都复制一份导航和页脚
- 修改一处，需要逐一前往多处同步修改
- 页面越多,越容易改漏、改错,越难维护
有"框架"之后
- 导航和页脚只写一份,这一份叫"组件"
- 每个页面都引用这同一份
- 改那一份,所有页面自动跟着变
HTML 本身没有问题。你前面所学的知识依然有效。问题只在页面数量增多、重复内容增多的情况下才暴露出来。框架并不取代 HTML，它帮助你管理重复，最终生成的产物仍然是浏览器能够识别的网页。
一段内容在多个页面中反复出现，而你希望一次修改即可同步到所有页面，这正是框架和组件要解决的问题。框架长什么样、怎么让 Agent 把 Steve's Repair 搬过去,后面会讲。在动手搬之前,先在 1.8 存档（Git） 建立一个安全网,避免改坏后无法恢复;然后 1.9 认识框架 里你会看到"改一处、全部自动变"是如何实现的。
动手练习：把 5 页改完
▸ 操作：真的把 5 页都改一遍，别只看不点。计数器走到 5，你会收到一段话。下面这几条做到了，这一节就算过：
这一节 · 自检
这一节过了,往下走。
前两项动手做到了会自动勾上;后两项自己确认后再勾。
模拟器未响应？对照以下情况排查：
一、点了"应用到选中页"没动静:多半是没先选页。先点某张卡片下方的"选这页",卡片描蓝边了再点应用。
二、计数器不涨:同一页改两次只算一次,它数的是"有几页被改过"。去选还没改的那几页(左边有红杠的)再改。
三、整个装置都点不动:这是网页里的小程序,刷新一下页面再试；仍无效则先理解上方那张"改漏"示意图，道理相同。
做完想一想:如果 Steve 后来又要加一个"预约"页,变成 6 页、7 页,你愿意每次修改导航都从头重复操作吗?把感受记一句话,下一关用得上。
小测
Steve 的站现在有 12 个页面,每页顶部都各自抄了一份相同页脚。他想把页脚的电话号码换成新的。手写 HTML 的话,这件事最大的麻烦是什么?
对"组件""框架"还有疑问，想请人用通俗的语言为你解释？把问题发到群里问问大家，或者直接向 Abel 或助教提问，请他们用"导航只写一份、各页引用"的方式为你讲解。