2.2.5-﹤ span ﹥ 标签（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 ﹤ span ﹥ 标签 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： 1. 让学生了解<span>标签的基本用法和作用。 2. 学会使用<span>标签对文本进行样式设置。 3. 培养学生的编程思维和逻辑分析能力。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. <span>标签的属性及用法。 2. 使用<span>标签进行文本样式设置。 教学难点 1. 如何根据需求选择合适的CSS样式。 2. <span>标签与<div>标签的区别。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 实例演示法：通过实例展示<span>标签的使用方法。 · 讲解法：详细解释<span>标签的属性和用法。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的HTML基本结构。 · 介绍CSS样式表的作用及基本概念。 2分钟 讲授新课 练习指导 `<span>`标签是HTML中的一个内联元素，它用于对文本进行样式设置。以下是`<span>`标签的属性及用法，以及如何使用`<span>`标签进行文本样式设置的示例： 1. `<span>`标签的属性： - `class`：用于为元素指定一个或多个类名，以便应用CSS样式。 - `id`：用于为元素指定一个唯一的ID，以便在JavaScript中进行操作或应用CSS样式。 - `style`：用于直接在元素上设置内联样式。 2. `<span>`标签的用法： ```html <p>这是一个<span class="highlight">重要</span>的文本。</p> <p>这是一个<span id="special">特殊</span>的文本。</p> <p>这是一个<span style="color: red;">红色</span>的文本。</p> ``` 3. 使用`<span>`标签进行文本样式设置： 要使用`<span>`标签进行文本样式设置，你需要结合CSS样式表。以下是一个示例： ```html <!DOCTYPE html> <html> <head><style> .highlight { color: blue; font-weight: bold; } #special { font-style: italic; } </style> </head> <body> <p>这是一个<span class="highlight">重要</span>的文本。</p> <p>这是一个<span id="special">特殊</span>的文本。</p> <p>这是一个<span style="color: red;">红色</span>的文本。</p> </body> </html> ``` 在这个示例中，我们使用了`<span>`标签的`class`和`id`属性，以及内联样式`style`，来设置文本的颜色、字体样式和粗细。通过结合CSS样式表，我们可以实现更丰富的文本样式设置。 10分钟 7分钟 自主学习 8分钟 练习训练 · 请写出以下句子的HTML代码，并使用<span>标签设置文本颜色为红色：这是红色的文本。 · 请使用<span>标签为以下句子中的“重要”二字添加加粗样式：这是一段重要的文字。 12分钟 布置作业 1. 完成课后习题。 2. 在自己的网页项目中使用<span>标签进行文本样式设置。 3. 思考如何在实际项目中灵活运用<span>标签。 1分钟 总结回顾 1. <span>标签的基本用法和作用。 2. <span>标签的属性及用法。 3. 使用<span>标签进行文本样式设置的方法。 4. <span>标签与<div>标签的区别及应用场景。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$