teaching-design/data/Web/2.md

个人主页——HTML文档结构与文本内容 教学设计

课题	个人主页——HTML文档结构与文本内容
课时	1课时（40分钟）
教学目标	知识目标：理解 HTML 元素、标签、属性和嵌套关系，掌握标题、段落、换行、强调等文本标签的语义。 技能目标：能够使用规范的 HTML 文档结构完成个人主页的页头、个人介绍和学习目标区域，并通过缩进检查层级。 素养目标：形成语义化表达和结构先行的开发意识，养成规范缩进、及时保存和浏览器验证的习惯。
教学重难点	重点：HTML 文档基本结构；常用文本标签；元素嵌套与缩进。 难点：根据内容含义选择合适标签，而不是仅根据默认显示效果选择标签。
教学资源准备	上节课项目文件、个人简介素材单、标签功能卡、结构错误示例、Visual Studio Code、现代浏览器。

教学过程

教学环节	教学内容	教师活动	学生活动	设计意图
1. 任务回顾导入 （5分钟）	回顾项目目录和首个页面，提出“让浏览器读懂内容层级”的任务。	问题展示 展示全部使用普通文本的页面，提问：“标题、正文和重点为什么难以区分？” 目标明确 说明本课要建立清晰的个人介绍内容结构。	页面诊断 观察页面并指出信息层级不清的问题。 素材准备 整理姓名、专业、兴趣和学习目标等文字。	从已有页面的问题出发，引出标签语义与内容结构的必要性。
2. 标签结构探究 （10分钟）	学习文档声明、html、head、body 以及元素的开始标签、内容、结束标签和属性。	结构拆解 用层级图讲解 HTML 文档，标出 lang、meta charset、title 的作用。 错误辨析 展示漏写结束标签、层级交叉和字符乱码示例，引导判断原因。	图示记录 在任务单补全文档结构图。 纠错讨论 小组修正错误代码，说明标签应正确嵌套的理由。	通过可视化和纠错活动理解结构规则，避免只会机械复制模板。
3. 文本标签示范 （8分钟）	学习 h1 至 h3、p、strong、em 等标签及其语义。	代码演示 将个人简介拆分为主标题、栏目标题和段落，演示重点信息的语义化标记。 对比讲解 比较用多个换行制造间距与使用段落组织内容的差异。	跟随编码 在页面中添加姓名主标题、三个栏目标题和介绍段落。 语义判断 根据内容选择标题级别和强调方式。	将标签直接应用于项目文本，建立“内容含义决定标签”的基本原则。
4. 个人介绍实践 （13分钟）	完成页头、关于我、学习目标三个内容区，检查层级和浏览器显示。	任务分解 给出验收清单：页面标题正确、仅一个 h1、栏目层级清楚、段落完整、重点突出。 巡回点拨 针对标签遗漏、嵌套错误和缩进混乱进行个别指导。	独立开发 根据个人素材完善文本内容，使用标签组织信息。 浏览调试 保存并刷新页面，结合编辑器格式化功能检查缩进和闭合。	以清晰标准引导学生独立完成真实内容区，在实践中巩固结构和语义。
5. 展示评价总结 （4分钟）	展示典型作品，归纳 HTML 文本结构设计原则。	作品点评 选择层级清晰和存在典型问题的页面，对照验收清单点评。 要点归纳 总结“一个主标题、层级不跳跃、段落表达完整”。	成果说明 展示页面并解释一个标签选择。 自查修正 根据反馈修正一处结构问题。	通过说出选择理由深化语义理解，形成依据标准改进作品的习惯。

板书设计

HTML 文档结构

html
├── head：页面信息
│   ├── meta charset
│   └── title
└── body：可见内容
    ├── h1：页面主标题
    ├── h2：栏目标题
    └── p：正文段落

原则：语义正确、层级清楚、嵌套规范

教学成效与反思

教学成效	学生能够识别 HTML 文档的主要组成，使用标题和段落标签完成个人介绍区域。多数作品层级清楚、内容完整，学生开始关注标签含义和代码缩进。
教学反思	部分学生把标题标签当作“调字号工具”，容易跳级使用。评价时应要求学生说明栏目关系，并用页面结构图辅助选择标签；对闭合错误可借助编辑器高亮快速定位。