第二单元 打地鼠
第6课 HTML：页面里有什么
这一课要认识 HTML：它管页面里「有什么」。先用 HTML 搭出能看见的洞和分数。
打地鼠的舞台要先搭起来：九个洞、一个分数，打开就能看见。
今天的成就感很简单——页面上已经是「地鼠场」的样子，而不只是一张白纸。
零件看得见，后面加「出鼠」「加分」才接得上。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 能说出：HTML 管页面里有哪些零件。
- 能指出标题、分数、洞、开始按钮各自在 HTML 里。
- 能搭出 3×3 洞位骨架（先不要 CSS 美化、不要 JS 计时）。
三、弄懂这件事
从这一单元起，要记住网页小游戏常用的三层名字：
1．HTML 是什么
HTML 管页面里「有什么」：标题、分数文字、九个洞、开始按钮……都是零件。
没有 HTML 零件，后面改颜色、写点击都无处下手。
今天的目标：打开页面就能看见「地鼠场」的骨架，而不是一张白纸。
2．和 CSS、JS 怎么分
CSS 管「长什么样」（颜色、大小）——下一课再练。
JavaScript（JS） 管「点了或到点会怎样」（加分、出鼠、倒计时）——也在后面课练。
顺序记住：先 HTML 骨架 → 再 CSS 好看 → 再 JS 会动。这一课只做第一层。
3．洞位怎么摆 + 怎么跟 AI 说
九个洞可以先做成九个按钮，排成三行三列；分数放在标题下方固定位置。
对 AI 说清楚：只要 HTML 结构，不要精美 CSS，不要计时和出鼠脚本。
别一次要求「又好看又会冒地鼠又有排行榜」。
点一点就明白
点下面的按钮，看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
打地鼠：能看见的洞
列出需要的标签零件清单。
做对了会怎样说明里同时写到了分数和洞（或点哪里），别人能对上画面。
做不出来怎么办骨架最少有：标题、分数、九个洞按钮、开始。
做出 3×3 洞位骨架页。
做对了会怎样预览里能清楚数出九个洞（或九个可点区域）。
做不出来怎么办用九个按钮排成三行三列，先摆出洞的位置。
给分数一个固定位置。
做对了会怎样无论怎么点，分数显示一直在固定位置，不会失踪。
做不出来怎么办把分数放在标题正下方固定位置。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l06.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例：写清目标、范围和怎样算做成；请整段使用，不要只丢半句。工具嵌在下方。本课文件是 show/l06.html。
做单个 HTML，标题「打地鼠」。只要骨架，先不要倒计时、不要随机出鼠。 页面一打开就要看见： - 上方：分数（初始 0）和「开始」按钮； - 下方：3×3 共九个洞按钮（文字写「空」即可）。 不要服务器。 输出要求：必须用 ```html 文件名 给出完整可运行 HTML（含 <style> 与需要的 <script>），不要只回复说明，不要只贴 CSS/JS 片段。页面打开后要立刻看得见内容，不要只有标题和大空框。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
一上来就让 AI 写完整游戏脚本，结构却乱。
用一张大图代替可点的洞。
七、带走这几句
- 记住：HTML 管页面里有什么（标题、按钮、分数在哪）。
- 顺序别乱：先骨架（HTML），再样式（CSS），再逻辑（JS）。
八、打勾再往下
- 九个洞在结构里。
- 分数有位置。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
HTML 主要管？
洞位更合适的是？
本课优先？