# 个人主页——列表与表格信息展示 教学设计
| **课题** | **个人主页——列表与表格信息展示** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解有序列表、无序列表和表格的语义及适用场景，掌握 `ul`、`ol`、`li`、`table`、`tr`、`th`、`td` 的结构关系。
**技能目标**：能够用列表呈现技能与兴趣，用表格呈现学习经历，并检查行列对应关系。
**素养目标**：培养信息分类和结构化表达能力，养成先分析数据关系再选择页面元素的习惯。 |
| **教学重难点** | **重点**：列表类型选择；表格行、列、表头结构；规范嵌套。
**难点**：将原始个人资料转换为层次清楚的列表和二维表格，避免使用表格进行页面布局。 |
| **教学资源准备** | 个人主页项目、技能兴趣素材卡、学习经历数据表、结构错误示例、Visual Studio Code、浏览器。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 信息整理导入**
（5分钟） | 比较长段落与结构化信息，明确技能清单和成长经历展示任务。 | **案例对比**
展示同一组资料的段落版、列表版和表格版，提问哪种更易查找。
**任务明确**
提出为个人主页新增“我的技能”和“成长经历”区域。 | **阅读比较**
从查找速度和关系表达角度评价三种形式。
**资料分类**
将个人素材分为并列项、顺序项和行列数据。 | 从信息表达效率出发，引导学生依据数据关系选择合适结构。 |
| **2. 列表结构探究**
（9分钟） | 学习无序列表、有序列表及列表项的嵌套规则。 | **语义讲解**
用兴趣爱好说明并列关系，用学习计划说明先后关系，比较 `ul` 与 `ol`。
**代码辨析**
展示把 `li` 写在列表外部的错误，说明父子关系。 | **关系判断**
为四组信息选择列表类型并说明理由。
**跟随编码**
完成技能清单和三步学习计划。 | 将标签选择建立在信息关系上，巩固正确嵌套与语义表达。 |
| **3. 表格结构示范**
（8分钟） | 学习表格、行、表头和数据单元格的组织方式。 | **网格讲解**
把学习经历表拆成“时间、经历、收获”三列，演示逐行编写代码。
**错误演示**
展示单元格数量不一致造成的错位，引导定位问题。 | **结构标注**
在纸面表格上标出行、列和表头。
**模仿操作**
输入表头和一行数据，观察浏览器默认效果。 | 用二维网格对应代码结构，帮助学生理解多层标签关系。 |
| **4. 信息模块实践**
（14分钟） | 完成技能列表、兴趣列表和学习经历表格，并进行结构检查。 | **任务发布**
要求至少使用两种列表，表格包含表头和三行数据；强调表格只用于数据。
**巡回指导**
检查列表父子关系、每行单元格数量和缩进，指导使用开发者工具查看结构。 | **独立开发**
根据个人资料完成两个列表和一个表格。
**协作核验**
同伴按“类型合适、嵌套正确、行列一致、内容真实”四项检查。 | 通过真实资料组织提升结构化表达能力，以同伴核验发现不易察觉的嵌套问题。 |
| **5. 成果总结评价**
（4分钟） | 归纳列表和表格的选择原则，展示阶段成果。 | **作品点评**
展示信息清晰的页面，指出用表格做布局的不当做法。
**规则总结**
概括“并列用无序、步骤用有序、二维数据用表格”。 | **口头归纳**
用自己的页面举例说明三种结构。
**自查修正**
根据规则调整一个不合适的结构。 | 将操作经验提炼为可迁移的选择规则，服务后续内容设计。 |
## 板书设计
```text
信息关系 → HTML 结构
并列信息：ul > li
顺序信息：ol > li
二维数据：table
├── tr > th
└── tr > td
个人主页成果：
技能清单 + 学习计划 + 成长经历表
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够依据数据关系选择列表或表格，完成技能、计划和经历模块。纸面网格标注有效降低了表格嵌套难度，同伴核验促进了行列一致性检查。 |
| **教学反思** | 少数学生仍倾向用空格或表格控制页面位置，说明内容结构与视觉布局尚未完全区分。课堂点评应明确 HTML 负责语义结构，布局将在 CSS 项目中完成，并通过反例强化边界。 |