第2单元 HTML标记与文本排版-制作《七律·长征》古诗文网页（教案1：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称HTML标记与文本排版——制作《七律·长征》古诗文网页授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络，接入超星教学平台）授课学时40分钟*2学时教材分析本节选自单元2核心内容，涵盖HTML标记、语义元素及文本排版，是HTML基础的核心模块。教材以古诗文、中国基建素材为案例，兼具知识性与思想性，需强化实操落地，通过具象案例帮助学生掌握标签用法，为后续超链接、图像学习铺垫。学情分析1.前置基础：已掌握VSCode、HBuilderX等开发工具使用，能创建基础HTML文件并预览，具备计算机基本操作技能，可衔接标签实操。

2.学情特点：动手能力强、具象思维突出，对古诗文、基建等素材兴趣浓厚；抽象逻辑较弱，对标签语义、嵌套规则理解需实例引导。

3.潜在不足：缺乏代码规范意识，易混淆标签用法与文本样式，需通过分步实操与纠错训练强化。教学目标【知识目标】：

1.掌握HTML标签的语法规则、分类及属性用法，认识块级、行内元素及HTML5新增语义元素。

2.熟练掌握常用文本标签的使用，能完成文本排版、样式设置及特殊字符插入。

【能力目标】：

1.能运用标记与文本标签编写古诗文网页，实现规范排版与样式美化。

2.能排查标签嵌套、语法错误，培养自主纠错能力。

【素质目标】：

1.通过古诗文素材培养民族自豪感，结合基建情境认识网页宣传价值。

2.养成规范编写代码的习惯，提升细节把控能力。教学重点1.HTML标签的语法规则（闭合、嵌套）及常用文本标签的正确使用。

2.运用文本标签完成网页文本排版与基础样式设置。教学难点1.块级、行内元素的区别及正确嵌套逻辑，避免语法错误。

2.特殊字符的合理运用及文本标签的场景化选择。教学准备1.硬件：机房计算机、投影仪、音响。

2.软件：超星教学平台（上传教材案例源码、AI提示词模板、纠错素材）、VSCode。

3.素材：《七律·长征》原文及注释、标签语法对照表、特殊字符清单、实操任务单。教学方法1.主导方法：项目引领任务驱动教学法。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、纠错训练法。板书设计核心内容：1.标签（语法、闭合、嵌套；块级/行内元素）；2.文本标签（h1-h6、p、b、i等）；3.流程：编写→排版→预览→纠错。二、教学设计教学环节教学内容师生活动设计意图/时间环节一：情境导入，项目发布（亮点：基建素材+AI辅助）1.情境导入：展示港珠澳大桥、北盘江大桥等基建工程网页截图，结合教材情境说明网页文本排版的重要性；引出《七律·长征》古诗文素材，说明本节课核心任务。

2.项目发布：明确核心项目“制作《七律·长征》古诗文网页”，拆解为3个子任务——搭建HTML结构、运用文本标签排版、优化文本样式与特殊字符。

3.AI辅助：展示超星平台AI提示词模板（如“HTML标签嵌套规则”“文本标签场景用法”），引导学生利用AI解决疑问。教师：展示基建与古诗文网页案例，讲解项目目标与成果要求；演示AI提示词使用方法，强调AI辅助学习的作用。

学生：观察案例，明确学习目标；尝试用AI查询标签基础用法，记录核心要点。设计意图：以基建、古诗文素材激发兴趣，AI辅助贴合前沿教学，明确任务方向，衔接前置工具知识。时间：10分钟。环节二：理论精讲，案例演示（亮点：实例拆解+易错点标注）1.HTML标记基础：

（1）语法规则：讲解标签成对闭合、自闭合标签（如<br/>）用法，标注“标签与<间无空格、推荐小写”易错点；演示属性书写格式（属性=“值”）。

（2）元素分类：讲解块级（<p>、<h1>）、行内元素（<b>、<a>）区别，演示嵌套规则（块级可包含行内，行内不嵌套块级）。

（3）语义元素：简要介绍<header>、<footer>等HTML5新增元素，说明语义化优势。

2.文本标签演示：

（1）排版标签：演示<h1>-<h6>、<p>、<br/>、<hr/>用法，制作古诗文标题、段落与分隔效果。

（2）样式标签：演示<b>/<strong>、<i>/<em>、<u>等标签，设置文本加粗、斜体样式。

（3）特殊字符：讲解<、>等字符的实体表示，演示如何插入空格、版权符号。教师：采用理实一体化教学法，在VSCode中逐行编写代码，实时预览效果；标注易错点，引导学生对比标签差异。

学生：跟随演示仿写代码，观察标签效果；记录语法规则与易错点，梳理元素分类逻辑。设计意图：以实例拆解抽象理论，易错点标注降低失误率，贴合职校生具象思维，夯实重点知识。时间：20分钟。环节三：分步实操，突破难点（亮点：分层任务+自主纠错）分步实操任务（独立完成，分层设计）：

1.基础层（必做）：

（1）搭建结构：新建HTML文件，编写完整文档结构，用<header>包裹标题，<section>包裹正文。

（2）文本排版：用<h1>设置标题，<p>分段编写诗句与注释，用<br/>换行、<hr/>分隔内容。

2.提高层（选做）：

（1）样式优化：用<strong>、<em>设置标题、注释样式；插入特殊字符调整排版间距。

（2）纠错训练：故意植入标签嵌套错误（如行内嵌套块级），引导学生排查修正。教师：巡视指导，重点帮扶基础薄弱学生；提供纠错清单，引导学生自主排查语法错误；答疑解惑，强化难点突破。

学生：按分层任务编写代码，实时预览效果；自主排查错误，记录纠错方法；完成基础任务后尝试提高层内容。设计意图：分层任务兼顾不同水平学生，自主纠错强化难点突破，培养独立实操与问题解决能力。时间：25分钟。环节四：小组互评，优化提升（亮点：互评标准+案例点评）小组任务（4人一组）：

1.成果互评：每组对照互评标准（标签规范、排版合理、无语法错误），交叉检查网页，标注问题并提出修改建议。

2.优化完善：根据小组建议修改代码，补充特殊字符与文本样式，提升网页美观度。

3.案例分享：每组推选1份优秀作品，上传至超星平台，由作者分享编写思路。教师：明确互评标准，引导小组聚焦重难点；点评优秀作品，讲解典型错误（如标签嵌套混乱）的修正方法；总结文本标签使用技巧。

学生：小组内交叉互评，主动发现问题并修正；学习优秀作品亮点，优化自身网页；分享编写心得，深化知识理解。设计意图：通过互评强化代码规范意识，借助同伴互助解决个性化问题，案例分享提升表达与总结能力。时间：15分钟。环节五：课堂小结，布置作业1.小结：梳理本节课核心内容（标签语法、元素分类、文本标签、特殊字符），回顾重难点与易错点，强化“编写-预览-纠错”流程。

2.作业布置：明确课后任务要求，强调代码规范与成果提交节点。教师：引导学生自主总结，补充完善知识框架；通过超星平台发布作业，附上拓展资料（语义元素进阶用法）。

学生：梳理知识要点与实操流程，记录作业要求；保存网页文件，预习下一课时超链接内容。设计意图：固化知识体系，强化实操思维；通过作业延伸巩固重点，为后续学习铺垫。时间：10分钟。三、课后作业和教学反思课后作业1.优化课堂编写的古诗文网页，补充2个特殊字符，调整文本样式，确保代码规范、排版美观，上传至超星平台。

2.熟记常用文本标签与特殊字符实体，完成超星平台标签语