作业 · 我的主题网站（第一步：HTML 骨架）
从兴趣出发，用 AI 把想法变成需求、变成代码，每一步都留下痕迹。
三步走：AI 帮你把主题写成需求文档 → 变更自己描述、同步进文档 → 按提示词生成多页面骨架。
本阶段只搭 HTML5 结构、样式分离留空——骨架立得住，后面才长得好。
为什么这样布置：① 主题来自兴趣，做起来有动力，交上来的网站人人不同；② 三步都配标准提示词——练的是「把要求说清楚」的提问能力；③ 生成出来的代码带逐标签注释，AI 写、你来懂，看懂注释就能看懂 HTML；④ 页面按板块拆成多个文件，正好练「多页面 + 导航互链」的真实项目结构。
作业要求（四步走）
每一步都留下可检查的产物
第 1 步定主题 + 需求文档
结合兴趣定主题，任选一款 AI 工具（WorkBuddy / Codex / Trae 等均可），用提示词生成 Markdown 格式需求文档（文档里要有你的名字）。
→
第 2 步需求变更
开发中想改需求？用自己的话描述改了什么、为什么改，改完同步到完整需求文档。
→
第 3 步生成网站骨架
用建站提示词生成多页面 HTML5 骨架：目录带名字前缀、注释解释每个标签、样式分离。
→
第 4 步提交
交三样：需求文档（含变更记录）、代码目录、AI 对话记录截图（注明所用工具）。
本阶段样式纪律：页面只通过 <link rel="stylesheet" href="style.css"> 引入外部样式表，style.css 本阶段留空（只写注释）。禁止写 style 属性、<style> 标签和 JS 逻辑——「结构/样式分离」本身就是要考的知识点。页面「素颜」是合格表现。
第 1 步 · 定主题，生成需求文档
提示词一：让 AI 当产品经理，产出 MD 格式需求文档
选题三原则：① 你真的感兴趣；② 范围够小（一个具体的事，而不是「美食网」这种大而空）；③ 纯静态能撑住（不需要登录、支付、实时聊天）。
🏀 运动向我的篮球装备测评 · 马拉松训练打卡日志 · 家乡徒步路线图鉴
🍜 美食向家乡小吃地图 · 宿舍电煮锅食谱 · 奶茶店测评笔记
🎮 兴趣向桌游推荐与规则速查 · 我的游戏收藏柜 · 动漫补番清单
🎵 文艺向我的歌单故事 · 摄影作品集 · 周末观影手账
🐱 萌宠向我家猫咪成长档案 · 校园流浪猫图鉴 · 养多肉避坑指南
📚 学习向我的考证倒计时计划 · 高数错题本 · 编程学习周记
🏠 家乡向家乡美食景点推荐 · 家乡方言小词典 · 春节习俗图解
🛠 实用向二手教材交换角 · 班级活动相册 · 个人简历主页
避坑：别选需要注册登录、在线支付、实时聊天的主题（纯静态做不了真功能，只能留占位）；也别贪大——「羽毛球装备页」好过「体育门户」，小而全才是好骨架。
提示词 ① · 生成需求文档
AI 工具任选其一即可：WorkBuddy、Codex、Trae 等。把〔〕里换成你的信息发给它，把输出保存为 需求文档.md：
提示词 ① · 需求文档生成
你是一名网站产品经理。我是学生〔你的姓名〕（学号〔学号〕），专业〔专业〕。
我想做一个关于〔你的主题〕的个人静态网站（纯前端，无登录、无后台），
访客是〔谁，如同学/同好〕。请帮我生成一份 Markdown 格式的《需求文档》，要求：
1. 文档标题第一行为「需求文档 · 〔主题名〕 · 〔你的姓名〕」，全文用 Markdown 语法（# 标题、表格、列表）；
2. 内容包含四节：① 主题与目标访客；② 功能板块表（列名：板块/目的/栏目内容/静态站可行性），板块 4~6 个；③ 每个板块的内容清单；④ 留给后续阶段（CSS/JS）的功能；
3. 规划页面结构：需要几个 HTML 页面、每个页面的文件名与职责（首页 index.html 和关于页 about.html 必须有，其余板块每板块一个页面，不要把所有内容塞进一个页面）；
4. 最后单独列一节「变更记录」，初始为空；
5. 只输出 Markdown 源码，方便我直接保存为 .md 文件。
鉴别三问（对 AI 输出逐条过）：① 这个功能纯静态做得到吗？② 内容我自己填得出来吗？③ 它对访客真的有用吗？AI 给 8 个板块你就删到 5 个——裁剪也是能力，删掉谁、留下谁，理由写进文档。
第 2 步 · 需求变更：自己描述，同步文档
提示词二：变更不许 AI 代笔，要留下你的判断
做到一半想加功能、砍板块、改栏目，是真实开发里最常见的事。规则很简单：
变更由你自己用文字描述清楚（AI 只帮你检查逻辑、不顺手重写），然后把变更同步进完整的《需求文档.md》——文档永远保持「最新完整版」，而不是散落的零碎消息。
描述一次变更，要写清三件事
- 改了什么：哪个板块、哪个栏目，从什么改成什么（增 / 删 / 改都要写）
- 为什么改：一句话理由（发现做不了？访客用不上？有更好的想法？）
- 影响哪里：牵动哪个页面文件、哪个导航链接，需不需要同步改代码
提示词 ② · 变更校对（只校对，不重写）
提示词 ② · 需求变更校对
我的需求文档有一处变更，请你只帮我检查语言是否通顺、有没有前后矛盾，
不要重写整份文档，也不要替我补充内容。我的变更描述如下：
〔用我自己的话写：把「××板块」从〔原内容〕改为〔新内容〕，
理由是〔一句话〕，这个变更影响〔哪个页面/导航〕〕
同步进文档的标准动作
## 二、功能板块 ← 改：直接更新这张表（删掉/修改对应行）
## 三、内容清单 ← 改：与新板块保持一致
## 六、变更记录 ← 加：追加一条变更日志
### 变更记录
- 2026-11-02 删除「探店直播区」板块：纯静态做不了，改为在笔记页加文字直播感受；影响：删除 live.html，导航去掉对应链接。（李小明）
评分关联：变更记录是过程分——有变更并规范同步的，比「一次成型从不变更」更容易拿到「需求与变更」这档分。零变更也可以，交一份「如实写无变更」的说明即可，不编造。
第 3 步 · 生成网站骨架
提示词三：多页面 + 名字前缀 + 逐标签注释 + 样式分离
提示词 ③ · 生成网站 HTML 骨架
提示词 ③ · 网站骨架生成
请根据《需求文档 · 〔主题名〕 · 〔你的姓名〕》为我生成网站 HTML 骨架，要求：
1. 代码目录名以我的名字为前缀：「〔你的姓名〕_〔主题名〕」，如「李小明_家乡小吃手账」；
2. 多页面结构：需求文档里每个功能板块一个独立的 .html 文件（首页 index.html、关于页 about.html 必须有），不要把所有内容写进同一个页面；每个页面都有相同的 header 导航，页面之间用相对路径互链；
3. about.html 是「关于」页面：包含一段我本人的个人介绍，必须写上我的名字〔你的姓名〕、专业〔专业〕和一项爱好；
4. 样式分离：所有页面只通过 <link rel="stylesheet" href="style.css"> 引入外部样式表；style.css 本阶段留空只写注释；禁止内联 style 属性和 <style> 标签；
5. HTML5 标准：每页含 <!DOCTYPE html>、<html lang="zh-CN">、<meta charset="UTF-8">、viewport 四件套；用语义标签 header/nav/main/section/article/aside/figure/figcaption/table/form/label 等，不用 div 套一切；
6. 注释是重点：给每个标签写中文注释，说明「这个标签是什么意思、为什么在这里用它」，比如 <!-- nav：导航区域，里面的 a 负责跳转到其他页面 -->，注释要能帮我快速记忆理解每个标签的含义；
7. 逐个文件输出完整代码，不要省略；图片放 images/ 子目录并全部带 alt。
生成后的目录长这样
李小明_家乡小吃手账/ # 目录名 = 名字前缀 + 主题名
├── index.html # 首页：开场白 + 小吃速查表
├── snacks.html # 小吃图鉴（板块2，独立一页）
├── notes.html # 探店笔记（板块3，独立一页）
├── board.html # 想吃留言板（板块4，独立一页）
├── about.html # 关于页：李小明的个人介绍（必交）
├── style.css # 外部样式表：本阶段留空只写注释（样式分离）
└── images/ # 图片子目录，img 全部带 alt
每个页面的内容区域模板（三段式）
不管首页还是板块页，每一页都长这个样子：头部（每页一样）→ 主要内容（本页独有）→ 尾部（每页一样）。把〔〕换掉、往 section 里填内容，页面就成了：
<header> # ① 头部：站名 h1 + nav 导航（每页相同）
<h1>站名</h1>
<nav>…首页 / 板块页 / 关于我…</nav>
</header>
<main> # ② 主要内容：一页只放一个 main（本页独有）
<section> # 一个功能板块 = 一个 section + 一个 h2
<h2>板块标题</h2>
…图片用 figure、步骤用 ol、数据用 table…
</section>
<section>…下一板块…</section>
</main>
<footer> # ③ 尾部：版权 + 姓名（每页相同）
<p>© 2026 你的姓名</p>
</footer>
- 头部、尾部每一页复制同一段，只改主要内容区——这就是模板的意义
- 每页都有 header / main / footer 三区，缺一区扣结构分
- 在线预览骨架模板 →（已含在下方 zip 里，可直接抄）
生成后你必须做的三件事
- 逐文件核对：需求文档的每个板块 ↔ 一个 .html 文件，一一对应；导航链接点一遍，没有断链
- 读注释学标签：把生成代码里的注释通读一遍，随机抽 3 个标签能说出「它是什么、为什么用在这」——验收时会问
- 改出自己的味道：文字换成你自己的话、about 页写你自己的介绍；AI 生成的是起点，不是终点
HTML5 标准自查点
AI 生成后，逐条核对
<!DOCTYPE html>、<html lang="zh-CN">、<meta charset="UTF-8">、<meta name="viewport"> 四件套每页齐全header / nav / main / footer 每页齐全；板块内容用 section / article，辅助说明用 aside- 图片用
figure + figcaption，img 全带 alt；表单每个输入框有 label(for) 关联
- 结构化数据用
table（带 caption），步骤类内容用 ol，术语用 dl
- 标题层级正确：每页一个
h1，区块 h2，小节 h3
- 样式分离：只有
<link> 引 style.css，全站无 style 属性、无 <style>、无 JS
AI 使用规范
AI 当施工队，你当验收员
- 允许：任选一款 AI 工具（WorkBuddy、Codex、Trae 等，用哪一个都行），用提示词①②③生成需求文档、校对变更、生成骨架代码
- 允许：追问「这个标签为什么用在这」，把答案写进你的学习笔记
- 必须：变更由你自己描述（提示词②），AI 不得代写变更理由、不得重写需求文档
- 必须：生成的代码要能通过「抽问 3 个标签」验收——看不懂注释就去查，直到能讲出来
- 禁止：让 AI 编造个人介绍（about 页必须写真实的你）、编造需求变更记录
- 提交时附 AI 使用记录：2~3 张对话截图（提示词 + AI 输出 + 你的追问/修改），并注明所用工具（WorkBuddy / Codex / Trae 等，任选其一）
提交规范
一个 zip，三样东西
李小明_家乡小吃手账.zip # zip 名 = 代码目录名（含名字前缀）
├── 需求文档.md # 最新完整版（含变更记录小节），文件内含学生姓名
├── 李小明_家乡小吃手账/ # 代码目录（名字前缀）
│ ├── index.html / snacks.html / notes.html / board.html / about.html
│ ├── style.css # 本阶段留空（样式分离的另一半）
│ └── images/
├── AI使用记录/ # 对话截图 2~3 张（注明所用工具：WorkBuddy / Codex / Trae 等）
└── 学习笔记.md（可选） # 记录你学到的标签与踩的坑，加分项
- 目录与 zip 命名：
姓名_主题名（如 李小明_家乡小吃手账）
需求文档.md 为 Markdown 格式、含学生姓名、保持最新完整版（含变更记录）- 页面 ≥ 2 个且导航互链无断链；
about.html 的个人介绍含姓名、专业、爱好
- 压缩为
.zip 上传；图片统一放 images/，路径用相对路径
评分标准（100 分）
结构 30 · 多页面 20 · 需求与变更 20 · 内容 10 · 规范 20
| 维度 | 得分要点 |
|---|
| 语义结构（30） | HTML5 四件套齐全；header/nav/main/footer 每页齐全；section/article/aside 用对场景；img 带 alt、表单有 label。抽问 3 个标签能解释含义。 |
| 多页面与导航（20） | 板块拆成独立页面、没有「一页塞所有」；导航互链无断链；about.html 存在且个人介绍含姓名、专业、爱好；代码目录名带学生名字前缀。 |
| 需求与变更（20） | 需求文档为 Markdown 格式、含姓名；板块表完整可行；有变更则自己描述三要素并同步进文档与代码；无变更则如实说明。 |
| 内容真实（10） | 自己的兴趣、自己的话、自己的介绍；alt 描述具体（不写「图片1」）。 |
| 规范与提交（20） | 样式分离（外部 link + style.css 留空）；注释清晰能帮助理解标签；命名/相对路径/AI 记录齐全。样式越界一项扣 10 分。 |
说明：本作业即「渐进式三阶段」的阶段一（HTML 骨架），主题可延续使用——本阶段 10% 计入过程分，后续 CSS、JS 阶段在同一目录继续生长。
交前自查清单
逐条打勾，再打包
- 需求文档.md 是 Markdown 格式、含我的姓名，变更（如有）已同步进完整文档
- 代码目录名 = 姓名_主题名；每个板块一个 html；导航互链全部点得通
- about.html 有我本人的介绍（姓名 + 专业 + 爱好）
- 每页四件套齐全；F12 检查无 style 属性、无 <style>、无 <script>
- 随机抽 3 个标签，我能说出它是什么、为什么用在这
- AI 使用记录截图已放入提交包；zip 命名正确
一句话记住这份作业
- 三步三条提示词：①MD 需求文档（含姓名）②变更自己描述、同步文档 ③多页面骨架（名字前缀 + about 页 + 逐标签注释 + 样式分离）。
- 页面要拆开：一个板块一个 html，导航互链——这是真实项目的样子。
- 注释是你的教材：AI 写注释、你来读懂，抽问能讲才算过关。
- 样式分离留白：style.css 留空等阶段二，「素颜」即合格。