页面分解、超链接与文件路径
多页网站先做分解：列出有几页，再列出每一条跳转。跳转关系表列不出来，就不要急着让 AI 生成。
把一件大事拆成几件能分别完成的小事；多页网站分解得到页面清单和跳转关系表。
一条跳转写一行：从哪一页、点什么、去哪一页。
首页的约定文件名，平台默认找它，别人也知道从它进；取别的名字不算错，但别人要猜。
| 从哪一页 | 点什么 | 去哪一页 |
|---|---|---|
| index.html | 课程卡片上的「去打分」 | rate.html |
| rate.html | 底部的「提交评分」 | done.html |
| rate.html | 左上角的「返回课程列表」 | index.html |
| done.html | 中间的「返回课程列表」 | index.html |
选课避雷指南的跳转关系表。三页的站通常就是四条：两条往前，两条回头（标黄）。
列表 → 打分 → 结果
结果页进得去，出不来
后两页各加一条回到列表的跳转
每一页都进得去、出得来
超链接的 href 写哪个文件名，点击就打开哪个文件。每次跳转都记进浏览历史，返回箭头沿着它往回走。
写成 <a href="rate.html">，点击后打开 href 里的文件；文字、按钮、整块卡片都能做成超链接。
浏览器自动记下的跳转顺序，返回和前进按钮就在这条记录上走。
<!-- index.html · 课程卡片 --> <a class="go" href="rate.html">去打分</a> <!-- rate.html · 左上角 --> <a class="back" href="index.html">← 返回课程列表</a> <!-- rate.html · 底部的「提交」也是一个超链接 --> <a class="submit" href="done.html">提交评分</a> <!-- done.html · 中间 --> <a class="back" href="index.html">返回课程列表</a>
只放按钮，不写点击后做什么
点了没有反应
<a href="done.html">提交评分</a>
浏览器直接打开 done.html
页面里不做「返回」链接
手机上很多人不用返回键，找不到回去的路
打分页、结果页各有「返回课程列表」
不用返回键也能回到列表
本课程一律用相对路径：从当前文件出发去找，整个文件夹拷到哪里都能用。绝对路径绑在某一台计算机上，换一台就断。
只写文件名或相对位置，浏览器从当前文件所在的位置出发去找。
从盘符或网址开头写全的地址，绑定在某一台计算机的某一个位置上。
| 相对路径的写法 | 从当前文件出发 |
|---|---|
| rate.html | 旁边那个文件 |
| pages/rate.html | 往下一层，进 pages 文件夹 |
| ../index.html | 往上一层 |
href="C:/Users/…/rate.html"
自己电脑上能点，发给同学一点就报错
href="rate.html"
整包搬走照样能用
提示词里提过自己的文件夹位置
AI 容易写出 C:/Users 开头的路径
在代码里搜冒号加斜杠
搜到就要求 AI 改成只写文件名
href 里写的名字在旁边找不到对应的文件，链接就断。点不过去时，按文件名、位置、路径写法的顺序查。
| 顺序 | 查什么 | 怎么查 | 对应现象 |
|---|---|---|---|
| 先查 | 文件名和 href 是否一字不差 | 打开文件夹逐字核对，包括大小写和 .html 后缀 | 文件在，名字对不上 |
| 再查 | 文件是否在同一个文件夹 | 另存对话框的默认位置每次不同，三个文件容易存到三处 | 名字对，文件不在旁边 |
| 最后查 | href 是否写成了完整路径 | 在代码里搜「:/」，搜到就改成只写文件名 | 本机能点，别人一点就断 |
选项少用单选，选项多用下拉，需要自由发挥才用文本框。能选就不要让人手写。
页面上让人选择和填写的元素，如单选 radio、下拉 select、文本框 textarea。
你的年级：＿＿＿＿
收上来大三、三年级、23 级三种写法
你的年级：○大一 ○大二 ○大三 ○大四
收上来只有一种写法
直接写在文件里的内容是静态内容，谁打开都一样。这一版做不到的功能，写进「本版不做」。
直接写在文件里的内容，谁打开都一样，打分提交之后也不会变。
提示词里列出「本版不做」的一段，限定这一版只做到哪里。
"做一个选课避雷指南"
AI 补上登录注册、搜索筛选、点赞回复，做成一个完整产品
"本版不做：登录注册、搜索筛选、点赞回复"
只做这一版要的三页
三页各写一份样式，每个文件都能单独打开，代价是改配色要改三处。本课程选这种，因为交付时少拷一个文件的代价更大。
只改了首页那一份
点过去整页突然换了个颜色
"三份文件的配色要一致，全部改成绿色，其他内容不要改动"
一次改三份，比手动改三遍可靠
提示词分两步：先只要结构和跳转关系，和跳转表对过再生成。修改时加护栏话术。
| 提示词中的规定 | 不写时 AI 常见的做法 |
|---|---|
| 生成三个独立的 HTML 文件，首页命名 index.html | 三页合并进一个文件，用脚本切换：地址栏不变，返回键失效，拆不出单独一页给人看 |
| href 只写文件名，不要写完整路径 | 写成绝对路径，换一台电脑必断 |
| 三份文件的配色必须一致 | 点过去整页突然换了个颜色 |
| 每份文件都自带完整样式，不要单独的 css 文件 | 少拷一个文件，页面就只剩纯文字 |
修改时附上的一句限定：只改哪一个文件，其他部分保持不动。
"把提交按钮改成能跳转"
三份代码都重新给了一遍，首页配色也变了，整站要重新验
"只改打分页这一个文件，其他保持不动"
拿到后只替换打分页，其余两页不用重验
先列跳转关系表，再分两步生成。四条跳转走通后做三个破坏实验，最后整包交给同组验收。
四条，一句一条，写成"从哪一页、点什么、去哪一页"，写在作业文档里
产出：四条跳转先要结构和跳转关系，和自己的表对一遍；确认后再发第二步
产出：三段代码三个文件存进同一个文件夹；文件名和 href 逐字核对，再搜「:/」确认没有完整路径
产出：一个文件夹每条都点一遍，包括两条返回；不通就修，修时加护栏话术，只改那一个文件
产出：走得通的三页站单独拷走中间那页点返回；把它改名后回首页点过去；正常走到第三页按返回箭头。各截一张图，做完把文件放回、名字改回
产出：三张实验截图整个文件夹压成一个包发给同组，不作任何说明；对方四条跳转都走通，才算交付完成
产出：同组的运行截图第 5 步只有本章有，不要跳过。
| 从哪一页 | 点什么 | 去哪一页 | |
|---|---|---|---|
| 往前 | 列表页 | 操作页 | |
| 往前 | 操作页 | 结果页 | |
| 回头 | 操作页 | 列表页 | |
| 回头 | 结果页 | 列表页 |
换成自己题目的文件名。"点什么"写清位置和文字，如"底部的「提交评分」"。标黄的两条最容易漏。
点不过去时先按现象找原因；修改时加护栏话术，只动出问题的那一个文件。
| 现象 | 原因 | 处理 |
|---|---|---|
| 三页全塞进了一个文件 | 没有写"生成三个独立的 HTML 文件" | 写明文件数量和首页文件名，重新生成 |
| 点了提示找不到文件 | 文件名和 href 里写的对不上 | 打开文件夹逐字核对，包括大小写和 .html 后缀 |
| 本机正常，同学打开就断 | href 写成了完整路径 | 在代码里搜「:/」，改成只写文件名 |
| 点过去颜色变了 | 三份文件各有一份样式，只改了一份 | 三份一起发给 AI，要求配色统一，其他不动 |
| 某一页没有回去的入口 | 跳转关系表漏了返回那两条 | 补一句"每一页左上角都要有返回首页的链接" |
| 三个文件存到了不同地方 | 另存对话框的默认位置每次不同 | 先建好文件夹，三次另存都手动切到这个文件夹 |
| 星星点不动，分数也不变 | 这一版没有写行为，属于正常状态 | 不必修改，本章要求的是跳转走得通 |
| 存成了 .html.txt | 保存类型选错 | 显示文件扩展名，重新另存，保存类型选「所有文件」 |
提交四项内容，按七条标准验收；选做一项。
按教师提供的作业模板（Word）填写，开头注明所选题目；提交渠道见课堂通知，当堂提交。
零代码应用开发 · 第 5 章 多页网站