first commit

data/Web/4.md

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