## 《探秘网页与代码》教学设计
**课题：** 探秘网页与代码
**课时：** 1课时（40分钟）
**授课对象：** 小学高年级或初中一年级学生（有初步计算机操作基础）
—
### 一、教学目标
**1. 知识与技能**
– 了解网页的基本构成（HTML、CSS、JavaScript）及其作用。
– 学会在浏览器中查看网页源代码。
– 能够识别简单的HTML标签（如 `
`、`
`、``），并能修改标签内容改变页面显示。
**2. 过程与方法**
– 通过“侦探探秘”的情境，引导学生主动观察、分析网页背后的代码。
– 采用“查看—猜想—修改—验证”的探究方法，培养学生动手实践能力。
**3. 情感态度与价值观**
– 激发学生对网页技术的好奇心，消除对代码的畏难情绪。
– 培养规范书写代码的习惯，体会“所见即所得”背后的逻辑美。
—
### 二、教学重难点
**重点：** 理解网页由代码生成，学会查看源代码，认识基本HTML标签。
**难点：** 区分HTML（结构）、CSS（样式）、JavaScript（行为）的不同角色；理解代码与页面显示的对应关系。
—
### 三、教学准备
– 教师准备：PPT课件、一个简单的本地网页文件（或在线网页示例）、代码编辑器（记事本或VS Code）、投影或学生机（每组一台）。
– 学生准备：每人一台电脑（或两人共用），浏览器（Chrome/Edge）。
—
### 四、教学过程
#### （一）情境导入——网页背后的“秘密”（5分钟）
教师展示一个漂亮的网页（如学校首页或一个趣味游戏页面），提问：“同学们，你们知道这个页面是怎么做出来的吗？它背后藏着什么？”
学生自由发言（“程序员写的”“有代码”）。
教师揭秘：每一个网页背后都有一份“神秘文件”——代码。今天我们就化身“网页侦探”，一起去探秘网页背后的代码世界。
**引出课题：** 《探秘网页与代码》。
—
#### （二）新授环节——破解代码的三层密码（20分钟）
**1. 第一层：查看源代码（侦探的第一步）**
教师演示操作（以Chrome为例）：
– 在网页空白处右键 → 选择“查看网页源代码”（或按 `Ctrl+U`）。
– 展示源代码窗口：一堆由尖括号组成的“奇怪文字”。
提问：“这些尖括号里藏着什么秘密？”引出 **HTML** 的概念。
**2. 第二层：HTML——网页的骨架**
用比喻：盖房子需要“骨架”，网页的骨架就是HTML。
– 展示简单HTML代码片段：
“`html
这是我的第一个网页
我爱学编程！
“`
– 解释标签：`
` 是“一级标题”，`
` 是“段落”。
– 小活动：让学生观察刚才“查看源代码”里有没有类似 `
`、`
` 这样的标签。找一找。
**3. 第三层：CSS与JavaScript——衣服和动作**
– **CSS（样式）** ：负责“好不好看”。举例：字体颜色、大小、背景、位置。展示对比图（无CSS的纯HTML页面 vs 有CSS的漂亮页面）。
– **JavaScript（行为）** ：负责“动不动”。举例：点击按钮弹出提示框、轮播图自动切换、表单验证。现场演示一个简单的弹窗代码效果。
小结：**HTML是内容，CSS是外观，JS是交互** —— 三个好朋友一起工作，才有了我们看到的丰富多彩的网页。
**4. 动手实践：修改代码，改变网页（侦探动手改造）**
教师分发一个简单的本地网页文件（`index.html`），内容如下：
“`html
欢迎来到我的网页
这是一个段落。
“`
任务一：将 `
` 中的文字改成自己的名字，比如“欢迎来到张小明的网页”。
任务二：在 `
` 后面加上一行 `
我学会了查看源代码！
`。
操作步骤：
– 右键网页文件 → 用“记事本”打开。
– 修改代码 → 保存 → 刷新浏览器页面。
– 观察变化。
学生动手操作，教师巡回指导。鼓励学生尝试把 `
` 改成 `
` 看效果。
**5. 拓展：还可以更酷——初识开发者工具（选讲）**
教师演示按 `F12` 打开“开发者工具”，在“元素”面板中实时修改文字和样式，不保存也能看到效果。让学生体验“即时修改”的乐趣（适合进度快的班级）。
—
#### （三）巩固练习——侦探闯关（8分钟）
**闯关一：连连看**（PPT展示）
将左侧的代码标签与右侧的效果连起来。
| 代码 | 效果 |
|——|——|
| `
` | 一级标题 |
| `
` | 段落 |
| `
` | 显示图片 |
| `
**闯关二：我是小侦探**
展示一段有错误的HTML（比如缺少闭合标签），让学生找出问题并改正。
**闯关三：猜一猜**
教师显示一段CSS代码（如 `color: red;`），提问“这段代码可能让文字变成什么颜色？”学生回答红色。
**闯关四（小组讨论）**：
“如果我想在网页里插入一张照片，应该用哪个标签？怎么做？”学生讨论后派代表回答（``）。
—
#### （四）课堂小结（4分钟）
教师引导学生回顾：
1. 网页背后由什么组成？（HTML、CSS、JavaScript）
2. 怎样查看一个网页的“真面目”？（右键→查看源代码）
3. 修改代码后为什么要保存并刷新？（代码需要重新加载）
教师总结：今天我们揭开了网页的神秘面纱。代码并不可怕，它就像一套积木，用不同的标签搭建出我们看到的网页。希望大家以后上网时，也能想一想“这个页面背后的代码长什么样”，做一个有好奇心的小侦探。
—
#### （五）拓展与作业（3分钟）
**基础作业：** 回家后用记事本制作一个最简单的“自我介绍”网页，至少包含一个标题、一个段落和一张图片（图片可以是本地照片或网络图片），保存为 `.html` 文件并打开查看效果。
**进阶挑战（选做）：** 尝试给自己的网页加一个背景颜色（搜索“HTML 背景颜色”或“CSS background-color”），看能不能实现。
**预告：** 下节课我们将学习如何用CSS把网页打扮得更漂亮，敬请期待！
—
### 五、板书设计
“`
探秘网页与代码
网页 = 代码 → 浏览器 → 看到的页面
┌─────────┐
│ HTML │ ← 骨架（标题、段落、图片）
├─────────┤
│ CSS │ ← 皮肤（颜色、大小、位置）
├─────────┤
│ JS │ ← 动作（点击、弹窗、轮播）
└─────────┘
查看秘籍：右键 → 查看源代码
修改秘籍：记事本改代码 → 保存 → 刷新
“`
—
### 六、教学反思
本节课以“侦探探秘”为主线，从学生熟悉的网页浏览体验切入，将抽象的代码概念转化为“骨架—皮肤—动作”的生动比喻，降低了认知门槛。实际操作环节让学生亲手修改代码并立刻看到变化，带来了强烈的成就感，有效激发了兴趣。
不足之处是，部分学生对“标签闭合”概念理解较慢，需要在后续课中通过更多对比练习来巩固。另外，由于课时有限，CSS和JS只能点到为止，后续可安排专题课深入。如果条件允许，建议使用在线代码平台（如CodePen）让学生实时共享作品，增强互动性。
整体而言，本节课达到了“激发好奇心、消除神秘感、初步能动手”的目标，为后续系统学习网页制作打下了良好基础。
