第3单元 HTML列表应用-制作大国工匠人物列表网页（教案1：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称HTML列表应用——制作大国工匠人物列表网页授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络，接入超星教学平台）授课学时40分钟*2学时教材分析本节选自单元3核心内容3.1HTML的列表，是HTML进阶排版的基础技术。教材围绕无序列表、有序列表、自定义列表及嵌套用法展开，结合大国工匠案例设计实操，既是对HTML基础标签的延伸，也是后续导航菜单、复杂排版的核心铺垫，兼具实操性与德育价值。学情分析1.前置基础：已掌握HTML文档基本结构、文本标签（标题、段落）及简单样式，能独立编写静态文本网页，熟练操作VSCode，具备基础代码编写与预览能力，可衔接列表知识点。

2.学情特点：动手能力强、具象思维突出，对大国工匠等正能量案例兴趣浓厚；抽象逻辑较弱，对列表嵌套层级关系需分步引导，易混淆标签用法。

3.潜在不足：缺乏标签嵌套规范意识，对不同列表的应用场景区分模糊，需通过实例对比与实操纠错化解。教学目标【知识目标】：

1.掌握无序列表（<ul>）、有序列表（<ol>）、自定义列表（<dl>）的核心标签及语法规则。

2.理解列表嵌套逻辑，能运用嵌套列表实现多级内容排版。

【能力目标】：

1.能综合运用三种列表制作大国工匠人物列表网页，规范编写列表标签代码。

2.能排查列表标签遗漏、嵌套错误等问题，提升自主纠错能力。

【素质目标】：

1.了解大国工匠事迹，渗透工匠精神，培养精益求精的职业素养。

2.养成规范编码、注重网页排版美观性的良好习惯。教学重点1.无序列表、有序列表、自定义列表的核心标签用法及应用场景区分。

2.列表嵌套的层级逻辑与规范编写，实现多级内容排版。教学难点1.列表嵌套的层级把控，避免因标签嵌套顺序错误导致排版混乱。

2.结合实际需求合理选择列表类型，实现内容与排版的适配。教学准备1.硬件：机房计算机、投影仪、音响。

2.软件：超星教学平台（上传教材案例源码、列表标签对照表、工匠事迹素材）、VSCode。

3.素材：大国工匠人物事迹文本、列表嵌套示例图、常见错误对照表、实操任务单。教学方法1.主导方法：项目引领任务驱动教学法。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、小组协作法。板书设计核心内容：1.列表类型（无序列表<ul>/有序列表<ol>/自定义列表<dl>）；2.嵌套规则（层级清晰、标签配对）；3.应用：多级排版+内容适配。二、教学设计教学环节教学内容师生活动设计意图/时间环节一：情境导入，项目发布（亮点：德育渗透+任务拆解）1.情境导入：播放1分钟大国工匠短视频片段，结合教材案例讲解大国工匠精神内涵，展示成品“大国工匠人物列表网页”，对比纯文本网页与列表排版网页的差异，引出列表在网页排版中的优势。

2.知识衔接：快速回顾HTML文档结构、标题及段落标签用法，提问“如何让杂乱的人物信息规整排版？”，衔接列表知识点。

3.项目发布：明确核心项目“制作大国工匠人物列表网页”，拆解为3个子任务——制作基础列表、实现列表嵌套、优化排版与内容补充，明确成果要求（包含三种列表类型，排版规整）。

4.素材发放：通过超星平台下发大国工匠事迹文本、网页布局示例图，引导学生熟悉素材。教师：播放视频，渗透工匠精神；展示成品网页，拆解结构与技术要点；提问回顾旧知，明确项目目标与任务分工；发放素材并讲解使用说明。

学生：观看视频，感悟工匠精神；观察成品网页，梳理列表排版优势；回忆HTML基础标签，明确学习目标；下载素材，熟悉大国工匠事迹与实操要求。设计意图：以正能量案例激发兴趣，融合德育与专业教学；拆解任务降低难度，衔接前置知识，为实操铺垫。时间：10分钟。环节二：示范讲解，夯实基础（亮点：实例对比+易错点标注）1.三种列表基础用法（理实一体化演示）：

（1）无序列表：演示编写大国工匠人物列表，讲解<ul>（容器）、<li>（列表项）标签语法，标注“标签必须配对，列表项独占一行”，预览默认圆点标记效果。

（2）有序列表：将无序列表改为有序列表，讲解<ol>标签用法，演示数字标记效果，说明有序列表适用于有先后顺序的内容。

（3）自定义列表：演示编写“工匠精神术语解释”列表，讲解<dl>（容器）、<dt>（术语）、<dd>（描述）标签用法，标注“<dd>默认缩进，与<dt>一一对应”。

2.列表嵌套示范：

（1）基于有序列表嵌套无序列表，演示教材范例3-1代码，讲解“外层有序列表按年份分类，内层无序列表列人物”的层级逻辑。

（2）标注易错点：嵌套时列表项内必须包含完整子列表，避免标签交叉嵌套；缩进对齐便于排查错误。教师：在VSCode中逐行编写代码，实时预览效果，对比三种列表差异；标注易错点，讲解应用场景区分；引导学生观察嵌套列表的层级关系与代码对应效果。

学生：跟随演示仿写代码，测试三种列表显示效果；记录语法规则、应用场景及易错点；模仿嵌套列表编写，梳理层级逻辑，标注缩进技巧。设计意图：以实例对比突破列表类型区分难点，分步演示降低抽象性，贴合职校生具象思维，夯实重点知识。时间：20分钟。环节三：自主实操，分层突破（亮点：分层任务+精准帮扶）分步实操任务（4人一组，小组协作，分层设计）：

1.基础层（必做）：

（1）制作基础列表：新建“craftsman.html”文件，完善文档结构，用有序列表按年份（2021年、2022年）分类，内层嵌套无序列表填写至少3位对应年份大国工匠姓名及职业，完成核心内容排版。

（2）添加自定义列表：在网页底部添加“工匠精神术语”自定义列表，包含2个术语及描述（如“精益求精”“爱岗敬业”）。

2.提高层（选做）：

（1）优化排版：为列表添加标题（<h2>），用<hr>分隔不同列表区域，调整文本对齐方式。

（2）故障排查：小组内互设错误（如标签遗漏、嵌套交叉、自定义列表搭配错误），结合错误对照表自主排查修正，记录解决方法。教师：巡视指导，重点帮扶列表嵌套、自定义列表用法困难的学生；提供错误对照表，引导小组互查纠错；针对共性问题（如嵌套错误、标签遗漏）集中讲解修正方法。

学生：小组协作完成实操任务，分工负责代码编写、效果测试、故障排查；自主排查并修正错误，记录解决思路；完成基础任务后尝试提高层内容，优化网页排版。设计意图：分层任务兼顾不同水平学生，小组协作提升效率，故障排查针对性突破嵌套难点，强化自主实操与问题解决能力。时间：25分钟。环节四：小组互评，优化提升（亮点：标准对照+成果打磨）小组任务：

1.成果互评：每组对照互评标准（标签规范、列表类型适配、嵌套层级清晰、排版美观、无语法错误），交叉测试网页，标注问题并提出修改建议。

2.优化完善：根据小组建议修改代码，补充大国工匠事迹细节，调整列表排版，确保网页内容完整、格式规范，符合成品要求。

3.成果提交：每组上传优化后的网页文件至超星平台，推选1份作品进行展示，分享编写思路与故障排查心得。教师：明确互评标准，引导小组聚焦核心重难点；点评优秀作品，讲解典型错误的修正方法；总结列表用法与嵌套技巧，强化规范意识。

学生：小组内交叉互评，主动发现并修正问题；学习优秀作品的排版亮点，打磨自身网页；展示作品，分享实操心得，深化知识理解。设计意图：通过互评强化规范编码意识，借助同伴互助解决个性化问题，成果展示提升表达能力，巩固重难点知识。时间：15分钟。环节五：课堂小结，布置作业1.小结：梳理本节课核心内容（三种列表标签用法、嵌套逻辑、应用场景），回顾重难点与易错点，强化“标签配对、层级清晰、排版规范”的实操原则，再次渗透工匠精神。

2.作业布置：明确课后任务，引导学生巩固知识，为下节课媒体元素学习铺垫。教师：引导学生自主总结，补充完善知识框架；通过超星平台发布作业，附上列表标签对照表供课后复习。

学生：梳理核心知识点与实操流程，记录作业要求；保存网页文件，自主复习列表用法，预习HTML5媒体元素相关内容。设计意图：固化知识体系，强化实操思维与德育渗透；通过作业延伸巩固重难点，实现知识衔接。时间：10分钟。三、课后作业和教学反思课后作业1.优化课堂制作的大国工匠列表网页，新增2023年大国工匠人物（至少2位），完善自定义列表术语解释，重新上传至超星平