2.2.7-HTML水平线标签及其属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 HTML水平线标签及其属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握HTML中<hr>标签的基本用法。 · 熟悉<hr>标签的主要属性及其设置方法。 · 能够使用<hr>标签及其属性创建美观的水平线效果 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · <hr>标签的基本语法和常用属性。 · 如何通过属性设置水平线的样式、颜色、宽度和对齐方式 教学难点 · 如何根据页面需求灵活运用<hr>标签及其属性。 · 水平线与其他HTML元素的搭配与布局。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过展示精美的网页实例，引导学生分析其中<hr>标签的应用。 · 实践操作法：让学生亲自动手编写代码，体验<hr>标签的使用效果。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的HTML基本结构，包括<html>、<head>和<body>标签。 · 展示几个包含水平线的网页截图，引导学生观察并思考水平线在网页中的作用。 2分钟 讲授新课 练习指导 `<hr>` 标签是 HTML 中用于创建水平线的元素。它是一个自闭合标签，不需要额外的结束标签。`<hr>` 标签的主要属性包括： 1. `width`：设置水平线的宽度。可以使用像素值（如 `width="100"`）或百分比（如 `width="50%"`）来设置宽度。 2. `size`：设置水平线的高度。可以使用像素值（如 `size="2"`）来设置高度。 3. `color`：设置水平线的颜色。可以使用颜色名称（如 `color="red"`）、十六进制值（如 `color="#FF0000"`）或 RGB 值（如 `color="rgb(255,0,0)"`）来设置颜色。 4. `align`：设置水平线的对齐方式。可以使用 `left`、`center` 或 `right` 来设置对齐方式。 以下是一些使用 `<hr>` 标签及其属性创建美观水平线效果的示例： ```html <!DOCTYPE html> <html> <head> <title>水平线示例</title> </head> <body> <h1>标题1</h1> <hr width="50%" align="center" color="blue" size="2"> <p>这是一段文本。</p> <hr width="100" align="left" color="green" size="1"> <p>这是另一段文本。</p> <hr width="75%" align="right" color="red" size="3"> </body> </html> ``` 在这个示例中，我们创建了三个不同的水平线，分别设置了不同的宽度、对齐方式、颜色和高度。这些属性可以根据需要进行组合和调整，以创建各种美观的水平线效果。 10分钟 7分钟 自主学习 8分钟 练习训练 · 在HTML文档中插入一条宽度为“80%”，居中对齐的水平线。 · 创建一个包含多种颜色和样式的水平线，观察它们的效果。 12分钟 布置作业 1. 完善自己的个人主页，添加至少两条具有不同样式的水平线。 2. 收集5个使用<hr>标签的精美网页实例，分析它们的布局和样式特点。 1分钟 总结回顾 1. <hr>标签用于在HTML文档中创建水平线。 2. 主要属性包括size、width、align、color和noshade。 3. 合理运用<hr>标签可以增强页面的视觉效果和层次感。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$