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

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 Html定义列表 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解HTML定义列表的基本概念。 · 掌握<dl>、<dt>和<dd>标签的使用方法。 · 学会使用CSS对定义列表进行样式设置。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. <dl>、<dt>和<dd>标签的使用。 2. 定义列表的结构和语义。 3. CSS在定义列表样式设置中的应用。 教学难点 1. 定义列表与其他列表类型的区别。 2. 如何使用CSS对定义列表进行个性化样式设置。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过实际案例，让学生更好地理解和掌握定义列表的应用。 · 任务驱动法：布置具体任务，引导学生动手实践，提高解决问题的能力。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾之前学过的HTML列表类型（有序列表和无序列表）。 2. 引出定义列表的概念，说明其在网页中的作用。 2分钟 讲授新课 练习指导 要了解HTML定义列表的基本概念，首先需要了解定义列表的作用和特点。 1. 定义列表的基本概念： 定义列表（Description List）是一种用于表示术语及其定义的列表。它通常用于展示词汇解释、元数据等信息。定义列表的特点是语义化，它可以帮助搜索引擎更好地理解页面内容。 2. `<dl>`、`<dt>`和`<dd>`标签的使用方法： 定义列表使用`<dl>`标签表示，术语使用`<dt>`标签表示，定义使用`<dd>`标签表示。下面是一个简单的定义列表示例： ```html <!DOCTYPE html> <html> <head><title>定义列表示例</title> </head> <body> <dl> <dt>HTML</dt> <dd>超文本标记语言（HyperText Markup Language），用于创建网页的标准标记语言。</dd> <dt>CSS</dt> <dd>层叠样式表（Cascading Style Sheets），用于描述HTML或XML文档的外观样式。</dd> </dl> </body> </html> ``` 3. 使用CSS对定义列表进行样式设置： 定义列表的样式可以通过CSS进行设置。以下是一些常用的样式属性： - `list-style-type`：设置列表项的标记类型，如`none`（无标记）。 - `border`、`padding`、`margin`等：设置列表项的边框、内边距和外边距。 - `font-family`、`font-size`、`color`等：设置列表项的字体、字体大小和颜色。 下面是一个设置定义列表样式的示例： ```html <!DOCTYPE html> <html> <head><title>定义列表样式示例</title><style> dl { border: 1px solid #ccc; padding: 10px; margin: 20px; } dt { font-weight: bold; font-family: Arial, sans-serif; font-size: 16px; color: #333; } dd { font-family: Arial, sans-serif; font-size: 14px; color: #666; margin-left: 20px; } </style> </head> <body> <dl> <dt>HTML</dt> <dd>超文本标记语言（HyperText Markup Language），用于创建网页的标准标记语言。</dd> <dt>CSS</dt> <dd>层叠样式表（Cascading Style Sheets），用于描述HTML或XML文档的外观样式。</dd> </dl> </body> </html> ``` 在这个示例中，我们设置了定义列表的边框、内边距和外边距，以及列表项的字体、字体大小和颜色。同时，我们还设置了术语的字体样式。 10分钟 7分钟 自主学习 8分钟 练习训练 · 创建一个简单的定义列表，包括至少3个定义项。 · 对定义列表进行样式设置，使其具有美观的外观。 12分钟 布置作业 1. 完成课后习题。 2. 在个人网站或博客中添加一个使用定义列表的页面，并进行样式设置。 1分钟 总结回顾 1. 定义列表的基本概念和结构。 2. <dl>、<dt>和<dd>标签的使用方法。 3. 定义列表的语义化特点。 4. CSS在定义列表样式设置中的应用。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$