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