---
课时: 4
主题: 代码审查入门
核心能力: [韧性力, 拆解力]
核心工具: [Trae IDE]
时长: 90分钟
透明化层级: 结果层
适用路线: AICODE-06（有扣子/低代码经验的学生）
---
### 1. 课程目标
**知识目标：**
- 能识别一个 index.html 文件中 HTML、CSS、JavaScript 三个部分的物理位置（`` / `` 结束，中间所有内容都是 CSS，**装修部分**。
**师：** 再往下——`` 标签。从 `` 到 ``，这是**骨架部分**。
**师：** 最后——``，这是**电路部分**。
**师：** 在代码里找东西有一个神器——**Ctrl+F**，搜索框。
（教师演示 Ctrl+F 搜索 `` 部分，搜索"开始"或"游戏" |
| 第3题 | 找控制按钮颜色的代码 | CSS部分，搜索 `button` 或 `background` |
| 第4题（挑战） | 找计算反应时间的代码 | JS部分，搜索 `time` 或 `Date` |
**竞赛规则：** 每找到一题，举手报告行号。教师在白板上记录"第一个找到的同学"。
（教师走动观察，重点关注：）
- 有没有学生不知道从哪里搜起 → 先判断属于哪个区域再搜
- 有没有学生搜索关键词太宽泛导致结果太多 → 引导缩小关键词
- 有没有学生在死读代码而不用Ctrl+F → 提醒用搜索神器
**进度同步 (2分钟):**
**师：** 寻宝技巧总结——1. 先判断属于哪部分（装修/骨架/电路）；2. 再用Ctrl+F搜关键词。不需要读懂每一行，只需要找到那一行。
【诊断点：学生能否正确将"视觉效果"归类到CSS，"文字内容"归类到HTML，"点击行为"归类到JS】【应用层】
---
**【分段三：手动微调挑战——建立因果感】(15分钟)**
*本段重点：学生第一次不通过AI直接改代码，建立"改代码→看到效果"的因果链*
**讲解与演示 (5分钟):**
**预设误概念：**
- M1: 改代码会弄坏，不敢动
- M5: AI改了就行，我不需要看
**师：** 刚才我们找到了很多东西。现在来做一件更厉害的事——**不通过AI，直接用手改代码！**
（故意用夸张语气）
**师：** 但在改之前，先给你们一颗定心丸——
（教师演示 Ctrl+Z）
**师：** 看好了。我现在把背景颜色改成一个奇怪的值……
（将 `#0a0a1a` 改成 `#FF0000`，Ctrl+S保存，在浏览器刷新）
**师：** 哇，变红色了！现在……我按 Ctrl+Z 撤销——
（代码恢复，Ctrl+S保存，浏览器刷新，变回原来颜色）
**师：** **代码有后悔药！** 改错了随时撤销。所以——不要怕改代码。
（投影展示安全区域）
```
✅ 安全区（随便改，改错了 Ctrl+Z）：
颜色值：把 #FF6B6B 改成 #00FF00，或把 red 改成 blue
文字内容：把"开始游戏"改成"点我试试"
字体大小：把 font-size: 24px 改成 font-size: 32px
边框圆角：把 border-radius: 8px 改成 20px
⚠️ 小心区（改太大可能影响体验）：
游戏速度、分数、时间限制等数字参数
❌ 别碰区（这节课不动）：
HTML标签结构（、