teaching-design/data/Web/4.md

个人主页——列表与表格信息展示 教学设计

课题	个人主页——列表与表格信息展示
课时	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分钟）	归纳列表和表格的选择原则，展示阶段成果。	作品点评 展示信息清晰的页面，指出用表格做布局的不当做法。 规则总结 概括“并列用无序、步骤用有序、二维数据用表格”。	口头归纳 用自己的页面举例说明三种结构。 自查修正 根据规则调整一个不合适的结构。	将操作经验提炼为可迁移的选择规则，服务后续内容设计。

板书设计

信息关系 → HTML 结构

并列信息：ul > li
顺序信息：ol > li
二维数据：table
          ├── tr > th
          └── tr > td

个人主页成果：
技能清单 + 学习计划 + 成长经历表

教学成效与反思

教学成效	学生能够依据数据关系选择列表或表格，完成技能、计划和经历模块。纸面网格标注有效降低了表格嵌套难度，同伴核验促进了行列一致性检查。
教学反思	少数学生仍倾向用空格或表格控制页面位置，说明内容结构与视觉布局尚未完全区分。课堂点评应明确 HTML 负责语义结构，布局将在 CSS 项目中完成，并通过反例强化边界。