2.5.2-html无序列表（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 html无序列表 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握HTML无序列表的基本语法结构。 · 学会使用<ul>和<li>标签创建无序列表。 · 了解无序列表的样式属性和应用。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. HTML无序列表的基本语法结构。 2. 无序列表的样式属性和效果展示。 教学难点 1. 无序列表在实际网页中的应用场景。 2. 如何自定义无序列表的样式。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际案例，让学生更好地理解无序列表的应用。 · 实践操作法：让学生亲自动手编写代码，加深对知识点的理解和掌握。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课学习的HTML基本标签和结构。 2. 展示几个简单的网页实例，引导学生观察其中的无序列表元素，并提问学生：“你们知道这些无序列表是如何实现的吗？” 2分钟 讲授新课 练习指导 要掌握HTML无序列表的基本语法结构，首先需要了解无序列表的创建和样式设置。 1. 使用`<ul>`和`<li>`标签创建无序列表： 无序列表使用`<ul>`标签表示，列表项使用`<li>`标签表示。下面是一个简单的无序列表示例： ```html <!DOCTYPE html> <html> <head> <title>无序列表示例</title> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body> </html> ``` 2. 无序列表的样式属性和应用： 无序列表的样式可以通过CSS进行设置。以下是一些常用的样式属性： - `list-style-type`：设置列表项的标记类型，如`disc`（实心圆）、`circle`（空心圆）、`square`（实心方块）等。 - `list-style-image`：设置列表项的自定义标记图像。 - `list-style-position`：设置列表项标记的位置，如`inside`（列表项内部）、`outside`（列表项外部）。 下面是一个设置无序列表样式的示例： ```html <!DOCTYPE html> <html> <head> <title>无序列表样式示例</title> <style> ul { list-style-type: circle; list-style-position: inside; } li { font-family: Arial, sans-serif; font-size: 16px; color: #333; } </style> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body> </html> ``` 在这个示例中，我们设置了无序列表的标记类型为空心圆，并将标记位置设置为列表项内部。同时，我们还设置了列表项的字体、字体大小和颜色。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 请学生自己动手创建一个包含五个项目的无序列表。 2. 要求学生为创建的无序列表设置不同的样式属性。 3. 让学生分析并解决在实践过程中遇到的问题。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计一个简单的网页，其中包含至少两个无序列表，要求合理运用无序列表的样式属性。 1分钟 总结回顾 1. HTML无序列表的基本语法结构：<ul>和<li>标签的使用。 2. 无序列表的样式属性：list-style-type、list-style-image等。 3. 无序列表在实际网页中的应用场景。 4. 如何自定义无序列表的样式以满足设计需求。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$