本章精髓 多页网站就是几份文件互相写着对方的名字。其间没有别的机制，靠的是超链接与"从当前文件出发去找"的相对路径，因此文件夹不能拆开。
学完本章后，你应该能够：
- 把一个想法拆成几个页面，并列出完整的跳转关系表；
- 用超链接把几份文件连成一个走得通的小网站；
- 说清相对路径与绝对路径的区别，并解释为什么拆开文件夹就断链；
- 页面点不过去时，判断是文件名错了、文件不在了，还是路径写法不对；
- 在生成时挂约束段、在修改时挂护栏话术，让它不多做也不乱改。
配套演示文件
第05章演示_选课避雷指南／
第05章演示_破坏实验.html
第05章演示_跳转关系图.html
①
先做出三页走得通的站
四条跳转 · 约束段 · 护栏话术
先把跳转关系列出来，再让它生成。
1.1本章成品：《选课避雷指南》
同学写给同学的选修课评价。三个页面放在同一个文件夹里，双击 index.html 就能从头点到尾：课程列表看一眼，挑一门去打分，提交之后有明确反馈，每一页还能回到列表。
index.html
课程列表
三门课，每门一张卡片，卡片上有一个「去打分」
→
rate.html
打分页
选星级、选一个标签、写一句话，底部一个「提交评分」
→
done.html
结果页
一个对勾加一句提示，中间一个「返回课程列表」
后两页各有一条回头路，都指回 index.html
跳转关系写清楚，一共就四条。三页的站通常都是这个数：两条往前，两条回头。
index.html
课程卡片上的「去打分」
rate.html
rate.html
底部的「提交评分」
done.html
rate.html
左上角的「返回课程列表」
index.html
done.html
中间的「返回课程列表」
index.html
本章方法 动手之前先列跳转关系表：从哪一页、点什么、去哪一页。四条跳转，四行字，列不出来就不要急于让它生成。
1.2本章新技巧：约束段与护栏话术
这两句话是整个学期用得最多的：
生成时挂一段「本版不做」；修改时挂一句「其他部分保持不动」。
前一句管住它不要多做。不写，它会把三页的站补全成一个带登录注册、搜索筛选、点赞回复的完整产品。后一句管住它不要改动别处。不写，你让它改打分页，它会把首页也重写一遍，于是整站要重新验一次。
本章还有一个特有的问题：多数工具默认给你单文件，会把三页合并进一个文件，用脚本切换显示。必须明确要求三个独立文件。
1.3可直接复制的提示词
发给 AI第一步 · 只要结构和跳转关系
我要做一个"选课避雷指南"，使用者是本校大二大三学生，在手机上查看。
本版要做：① 浏览课程列表与评价 ② 给一门课打分 ③ 提交后有明确反馈。
本版不做：登录注册、搜索筛选、点赞回复、平均分实时计算。
请只输出两样，不要生成任何代码：
① 一共几个页面，每个页面从上到下有哪几块内容；
② 跳转关系，一句一条，写成"从哪一页、点什么、去哪一页"。
发给 AI第二步 · 结构确认之后再发
按上面确认的结构和跳转关系生成，要求：
生成三个独立的 HTML 文件，首页命名 index.html；
页面之间用超链接互相跳转，href 只写文件名，不要写完整路径；
我要把三个文件放在同一个文件夹里双击运行；
手机优先、单列布局、绿色为主色，三份文件的配色必须一致；
每份文件都自带完整样式，不要单独的 css 文件；
不引用任何外部链接、字体或图标库；中文使用 UTF-8。
本版不做：登录注册、搜索筛选、点赞回复。
发给 AI改东西时 · 护栏话术
打分页底部的"提交评分"按钮，现在点了没反应。
请改为：点击后打开 done.html。
只改打分页这一个文件，其他两个页面和全部样式保持不动，
改完把这一个文件的完整代码给我。
生成三个独立的 HTML 文件，首页命名 index.html
它把三页合并进一个文件用脚本切换，跳转就无从练习
href 只写文件名，不要写完整路径
写成绝对路径，换一台电脑必断
每份文件都自带完整样式，不要单独的 css 文件
少拷一个文件，页面就只剩纯文字
其他两个页面和全部样式保持不动
改一处而重写了别处，整站都要重新验一遍
1.4大模型的常见偏差
三页塞进一个文件 它会用脚本做"切换视图"，看上去也能点，但那不是三个页面：地址栏不变，浏览器返回键失效，也拆不出单独一页给人看。"三个独立的 HTML 文件"这一句必须写。
href 写成完整路径 在提示词里提到过自己的文件夹位置时尤其容易出现，它可能写成 C:/Users 开头的一长串。拿到代码之后搜索冒号加斜杠，有就要求它改成只写文件名。
改一页而三页都被改了 你让它修改打分页，它把三份代码都重新给了一遍，而且首页的配色也变了。护栏话术要写，拿到之后也只替换你要求它改的那一份。
备用方案 现场生成不顺时，直接打开 第05章演示_选课避雷指南／index.html，三页是现成的；破坏实验用 第05章演示_破坏实验.html 当场演示，不必真去动文件。
②
分解，然后让它们手拉手
本章重点
分解 · 超链接 · 相对路径 · 默认首页
本章的核心内容集中在这一部分和下一部分。
本章要学的术语 · 八个
01分解decomposition
02超链接hyperlink
03相对路径relative path
04绝对路径absolute path
05默认首页index.html
06浏览历史history
07表单控件form controls
08静态内容static content
这八个术语会原样出现在报错信息、平台界面与技术文档中。前五个在本部分讲解，后三个在第四部分讲解。
2.1五个知识点，一个一个看
01分解：把一件事拆成几页几个功能
现象：同样一句"做个选课评价的东西"，有人能马上说出要三页，有人说不出。
概念：分解（decomposition）是把一件大事拆成几件能分别完成的小事，这是程序员的第一本事。对多页网站来说，分解的产物就是页面清单加跳转关系表。画不出跳转箭头，就说明还有页面进得去出不来。
类比：搬家之前先按房间列箱子，比抱起什么装什么快得多。
02超链接：在自己身上写上对方的文件名
index.html
<a href="rate.html">
→ 打开
rate.html
href 里写谁，点了就打开谁
现象：点一下「去打分」，页面就换了一个。
概念：超链接写成 <a href="rate.html">，href 里填要打开的文件名。文字、按钮、整块卡片都能做成超链接。文件名写错一个字母，链接就跳不过去。
类比：书页上写着"翻到第 12 页"。
03相对路径：从当前文件出发去找
rate.html旁边那个文件
pages/rate.html往下一层
../index.html往上一层
起点是当前文件，不是磁盘根目录
现象：href 里只写了一个文件名，既没有盘符，也没有网址。
概念：只写文件名或相对位置的写法叫相对路径（relative path），浏览器从当前文件所在的位置出发去找。本课程一律用相对路径，好处是整个文件夹拷到哪里都能用，代价是文件夹内部的结构不能拆。
类比：照片在我旁边那个文件夹里。人搬到哪里，这句话都成立。
04绝对路径：写死在某一台计算机上
C:/用户/桌面/rate.html→
绑在这一台机器上→换台机器必断
rate.html→
跟着文件夹走→整包搬走照样能用
本章最容易出问题的一处
现象：自己电脑上点得好好的，发给同学，他一点就报错。
概念：从盘符或网址开头写全的地址叫绝对路径（absolute path）。它绑定在某一台计算机的某一个位置上，换一台机器，或者把文件夹挪个地方，链接就失效。大模型在本机预览时容易写出这种路径，交付前要逐条检查。
类比：照片在我家书房第三个抽屉。搬了家，这句话就不成立了。
05默认首页：习惯命名为 index.html
选课避雷指南← 一个文件夹
└ index.html← 从这里进
└ rate.html
└ done.html
名字不是随便取的，这是个约定
现象：三个文件里，别人一拿到就知道先双击 index.html。
概念：index.html 是默认首页的行业约定。放到平台上时，平台默认就去找这个名字；发给别人时，对方也知道从它进。首页取别的名字不算错，但别人需要猜。
类比：进小区先找门口那一栋，不必有人指路。
2.2整站走得通，就靠这四行
三个文件加起来一百多行，真正决定"走不走得通"的只有四行，就是那四条跳转。
index.html节选 · 一张课程卡片
<div class="course">
<p class="name">数据可视化基础</p>
<p class="meta">大数据学院 · 2 学分 · 平均分 4.6</p>
<!-- 整个文件夹能不能走通，就靠这一行 -->
<a class="go" href="rate.html">去打分</a>
</div>
rate.html 与 done.html节选 · 另外三条跳转
<!-- 打分页左上角 -->
<a class="back" href="index.html">← 返回课程列表</a>
<!-- 打分页底部的"提交"，其实也是一个超链接 -->
<a class="submit" href="done.html">提交评分</a>
<!-- 结果页中间 -->
<a class="back" href="index.html">返回课程列表</a>
href="rate.html"
只写文件名，不写盘符路径。浏览器就在这个文件旁边找同名文件。
写错一个字母，或者文件被改了名，点下去就提示找不到
「提交」用的是 <a> 不是 <button>
这里要的是跳转，不是执行动作。用 a 标签，浏览器直接打开另一个文件。
用 button 而不写行为，就成了点击无效的按钮
三份文件各写了一遍 <style>
样式在三份文件里各存了一份。这是单文件优先的代价。
改配色要改三处，漏一处点过去就换了个颜色
整份文件没有 <script>
星星、单选、输入框都点得动，但什么也不会发生。这一版没写"点了之后做什么"，本章要达到的是跳转走得通。
③
亲手把它弄断一次
破坏实验 · 浏览历史 · 断链排查
这套结构看上去牢固，实际上很容易断。
3.1破坏实验三连
打开 第05章演示_破坏实验.html，左边是这个文件夹，右边是一个小浏览器。把文件拿走或改名，再去点链接，看它怎么断。
实验一
把 rate.html 单独拷到桌面上打开，点「返回课程列表」
找不到文件。旁边根本没有 index.html
实验二
把 rate.html 改名成 rate2.html，回列表页点「去打分」
也找不到了。href 里写的还是原来那个名字
实验三
正常点到第三页，再按浏览器左上角的返回箭头
一页一页退回去，这条路不用你写
前两个失败的原因是同一个：href 里写的名字，在旁边找不到对应的文件。相对路径的全部含义就是这一句，它的好处和代价都从这里来。
讨论如果把三个文件分别发给三位同学，每人一个，会发生什么？三个人各自看到的是什么？
3.2第六个知识点
06浏览历史：跳转会被自动记下
现象：点到第三页，按浏览器左上角的返回箭头，能一页一页退回来。
概念：每次跳转都会记进浏览历史，返回和前进按钮就是在这条记录上走。因此页面里的"返回"链接并非必需，但仍然要做，在手机上很多人不使用浏览器的返回键。
类比：翻过的书页还能翻回去。
3.3点不过去时，按这个顺序查
链接点不动只有三种原因，逐条排除通常一次就找到。
先查
文件名和 href 里写的是不是一个字
打开文件夹逐字核对，包括大小写和 .html 后缀。
文件在，名字对不上
再查
那个文件在不在同一个文件夹里
另存时对话框默认的位置每次不同，三个文件容易存到三个地方。
名字对，文件不在旁边
最后查
href 是不是写成了完整路径
在编辑器里搜冒号加斜杠，搜到就改成只写文件名。
本机能点，别人一点就断
跳转关系图也能帮你找问题。打开 第05章演示_跳转关系图.html，把四条箭头逐条关掉一条，页面会立刻指出哪一页变成了进得去出不来。做自己的站时，用同样的办法数一遍箭头。
④
工程权衡与数据质量
表单控件 · 静态内容 · 没有免费的选择
这一部分讲两件将来一直会遇到的事：怎么让人填，以及取舍怎么做。
4.1另外两个知识点
07表单控件：能选就不要让人填写
radio选项少，几个里挑一个
select选项多，收进下拉里
textarea非要自由发挥才用
选什么控件，决定了收上来的数据整不整齐
现象：打分页上有圆点单选、有下拉菜单、有一个大文本框。
概念：这些叫表单控件。选项少用 radio，选项多用 select，需要自由发挥才用 textarea。能选就不要让人填写，填空项越多，收上来的数据格式越不统一。
类比：问卷上"你的年级"给出四个选项，比让人手写好。手写会出现大三、三年级、23 级三种答案。
08静态内容：谁打开都一样
文件里写着 4.6→页面显示 4.6
你打开是 4.6，同学打开也是 4.6
打完分，那个数字不会变
现象：三门课的名称与平均分看上去像真实数据，填完打分点提交，那个 4.6 没有任何变化。
概念：这些内容直接写在文件里，叫静态内容。想增加一门课，要自己再抄一整段；想让分数随打分变化，这一版做不到，那需要另一套机制。
类比：印好的菜单，不是电子屏上实时更新的那一种。
4.2工程权衡第一课：没有免费的选择
三个文件各写了一遍样式，于是有了一个新麻烦：改配色的人只改了首页那一份，另外两份漏掉了，点过去整页突然变成另一个颜色。这不是罕见错误，是单文件做法的必然代价。
三页各写一份样式本课程的选择
每个文件都能单独打开，拷给谁都不缺东西
改一次要改三处，漏一处就出现刚才那种情况
抽出一个公共样式文件
改一处三页全变，页数越多越省事
不再是单文件，少拷一个就只剩纯文字
本课程选左边，理由只有一句：交付时少拷一个文件的代价，比改三处更大。选了左边就要接受那个麻烦，改样式时把三个文件都过一遍。
一种更省事的做法。让大模型修改时，把三个文件一起交给它，明确写出"三份文件的配色要一致，全部改成绿色，其他内容不要改动"。它一次改三份，比手动改三遍更可靠。
讨论如果这个站有十个页面，你还会选"每份文件各写一遍样式"吗？多少页是你的分界线？说出你的理由。
4.3前沿三分钟：网站的"页"，本来就是一份文件
每章固定栏目 · 一条与当章内容相关的行业动态
早年的网站就是这样做的：一个文件夹，里面若干 .html，互相用超链接连着。今天许多大型网站已经不是这种结构：整站只有一个文件，内容由脚本切换，地址栏里的"页"也由脚本模拟出来。
两种做法各有代价。后一种切换快、体验连贯，但页面要等脚本执行完才显示，而且拆不出单独一页给人。前一种原始，可是每一页都是一份实实在在的文件：能单独发送、能存档、若干年后仍然打得开。
本课程采用前一种，理由与单文件相同：作品要能交到别人手上。将来需要做一个几十页的站时，再考虑另一条路不迟。
⑤
上机实验
三选一 · 六步 · 整包交付
上机环节由此开始，当堂完成并提交。
5.1三个题目，任选其一
题目 A
食堂窗口测评
窗口列表 → 打分页 → 提交成功，三页走通。
通用
题目 B
读书会书单交换
书目列表 → 想读登记 → 登记成功，三页走通。
偏文科
题目 C
实验室仪器预约
仪器列表 → 选时段 → 预约成功，三页走通。
偏理工
三个题目结构相同：列表页 → 操作页 → 结果页，加两条返回，一共四条跳转。允许更换题材，验收标准不变。
5.2上机六步
照着走，每一步都有产出。第五步是本章独有的，不要跳过，亲手把它弄断一次，才会真正记住文件夹不能拆。
1
列跳转关系表
四条，一句一条，写成"从哪一页、点什么、去哪一页"。写在作业文档里
产出：四条跳转
2
分两步生成
先要结构和跳转关系，和自己那张表对一遍；确认后再发第二步
产出：三段代码
3
建文件夹，三个文件存进去
文件名和 href 逐字核对；存完在代码里搜冒号加斜杠，确认没有完整路径
产出：一个文件夹
4
四条跳转全点一遍，包括两条返回
有一条不通就修，修的时候挂护栏话术，只改那一个文件
产出：走得通的三页站
5
三个破坏实验，各截一张图
单独拷走中间那页点返回、把它改个名回首页点过去、正常走到第三页按返回箭头。做完把文件放回去、名字改回来
产出：三张实验截图
6
整个文件夹压包发给同组
只发压缩包，不作任何说明。对方四条跳转都能走通，才算交付完成
产出：同组的运行截图
5.3共同验收标准
三个独立文件在同一个文件夹
首页命名 index.html，没有单独的样式文件
打开文件夹数一遍，正好三个 .html
四条跳转全部走得通
两条往前、两条回头，没有断头路
从首页出发，每条链接都点一次
href 全部是相对路径
只写文件名，没有盘符和完整路径
在编辑器里搜冒号加斜杠，搜不到才算过
三页配色一致
点过去不会突然换个颜色
四条跳转走一遍，看有没有变色
断网也能走完全程
不引用网上的字体、图标、图片
断开网络连接，重新走一遍四条跳转
操作页用了合适的表单控件
选项少的用单选，选项多的用下拉，不该让人手写的不留文本框
数一数页面上有几个要手写的框
同组同学解压后能独立走完
只发压缩包，不作任何说明
让他截一张走到第三页的图发回来
5.4常见错误与处理
三页全塞进了一个文件
没有写"生成三个独立的 HTML 文件"
在指令里写明文件数量与首页文件名，重新生成
点了提示找不到文件
文件名和 href 里写的对不上
打开文件夹逐字核对，包括大小写和 .html 后缀
同学打开就断，本机却一切正常
href 写成了完整路径
在代码里搜冒号加斜杠，改成只写文件名
点过去颜色变了
三份文件各写一份样式，只改了一份
把三份一起发给它，要求配色统一，其他不动
某一页没有回去的入口
跳转关系表漏了返回那两条
补一句"每一页左上角都要有返回首页的链接"
三个文件存到了不同地方
另存对话框默认的位置每次不同
先建好文件夹，三次另存都手动切换到该文件夹
星星点不动，分数也不变化
这一版没有写行为，属于正常状态
不必修改，本章要达到的是跳转走得通
存成了 .html.txt
保存类型选错
显示文件扩展名，重新另存，保存类型选「所有文件」
5.5提交内容
作品文件夹
三个 .html，首页命名 index.html
整个文件夹压成一个包
跳转关系表
四条，一句一条，写成"从哪一页、点什么、去哪一页"
写在作业文档里
三张实验截图
拷走一个文件、改一个文件名、按返回箭头，各一张
三张截图各配一句说明
同组运行截图
对方解压后走到第三页的样子
截图，能看出并非本人的机器
提交方式：按教师提供的作业模板（Word）填写，文档开头注明所选题目。提交渠道见课堂通知。当堂提交。
5.6再进一步（选做）
给这个站再加一页，例如一页"我提交过的评价"。加完之后重新数一遍跳转：页数从三页到四页，跳转从四条变成了六条。
页数加一，要维护的连线不止加一。这也是多页站做到十几页之后，人们开始想别的办法的原因。
本章五条结论
- 多页网站就是几份文件互相写着对方的名字。没有别的机制，靠的是超链接和相对路径。
- 动手之前先列跳转关系表。从哪一页、点什么、去哪一页，一句一条。画不出箭头，就说明还有页面进得去出不来。
- 相对路径的好处和代价来自同一句话：从当前文件出发去找。所以整包搬走照样能用，也所以文件夹不能拆。
- 生成时挂"本版不做"，修改时挂"其他部分保持不动"。这两句是整个学期用得最多的。
- 没有免费的选择。三页各写一份样式换来每个文件都能单独打开，代价是改一次要改三处。选了哪一边，就要接受那一边的麻烦。