2.6.7-﹤ figure ﹥ … ﹤ figure ﹥ 标签（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）
2024-05-31
|
4页
|
76人阅读
|
0人下载
特供
内容正文：
教案
编号：PT-323 流水号：116 （首页）共 4页
课程
《网页设计与制作(html5+css3+javascript)》
一体化 理论
章节（课题）及内容
﹤ figure ﹥ … ﹤ /figure ﹥ 标签
班级日期
中职
2024.05
授课方式
讲授与任务驱动相结合
课时
1
作业题数
1
拟用时间
40分钟
教学目标
使学生理解以下理论知识：
· 了解HTML5中<figure>标签的作用和语义。
· 掌握<figure>标签的基本用法和相关属性。
· 学会在<figure>标签中嵌套其他元素。
教学资源准备
多媒体设备
课本教材
学生练习素材
教学重点
1<figure>标签的作用和语义。 2<figure>标签的基本用法和相关属性。
3. 在<figure>标签中嵌套其他元素的方法。
教学难点
1<figure>标签与其他HTML5语义化标签的区别。 2. 如何在<figure>`标签中合理地组织内容。
教学方法
讲授法、任务驱动法、演示法、体验探究法等。
· 案例分析法：通过实际案例，让学生更好地理解和掌握<figure>标签的应用。
· 任务驱动法：布置具体任务，引导学生动手实践，提高解决问题的能力。
授课教师： 审阅签名：
教学过程
教学活动内容
时间分配教学方法
课前导入
1. 回顾之前学过的HTML基本标签。
2. 引出HTML5中语义化标签的概念，说明其在网页中的作用。
2分钟
讲授新课
练习指导
要了解HTML5中`<figure>`标签的作用和语义，首先需要了解HTML5中的语义化标签。
1<figure>`标签的作用和语义：
HTML5中的语义化标签是为了更好地描述网页内容的结构和意义。`<figure>`标签用于表示页面中的图像、图表、代码等内容，具有独立的语义意义。它可以帮助搜索引擎和辅助设备更好地理解页面内容。
2<figure>`标签的基本用法和相关属性：
`<figure>`标签的基本用法很简单，只需将其包裹在需要展示图像、图表、代码等内容的区域内即可。例如：
```html
<!DOCTYPE html>
<html>
<head><title>Figure标签示例</title></head>
<body>
<h1>网站标题</h1>
<p>这是一篇关于HTML5的文章，详细介绍了HTML5的语义化标签。</p>
<figure>
<img src="example.jpg" alt="示例图片">
<figcaption>这是一张示例图片，展示了HTML5的语义化标签。</figcaption>
</figure>
</body>
</html>
```
`<figure>`标签没有特定的属性，但可以使用全局属性（如`class`、`id`等）来设置样式或进行其他操作。
3. 在`<figure>`标签中嵌套其他元素：
在`<figure>`标签中，可以嵌套各种元素，如`<img>`、`<figcaption>`等，以满足实际需求。例如：
```html<figure>
<img src="example.jpg" alt="示例图片">
<figcaption>这是一张示例图片，展示了HTML5的语义化标签。</figcaption>
</figure>
```
在这个示例中，我们在`<figure>`标签中嵌套了一个`<img>`标签和一个`<figcaption>`标签，展示了图片和图片的标题和描述。这样的组合可以帮助用户更好地了解网页的结构和内容。
总结：
-<figure>`标签用于表示页面中的图像、图表、代码等内容，具有独立的语义意义。
-<figure>`标签的基本用法很简单，只需将其包裹在需要展示图像、图表、代码等内容的区域内即可。
- 在`<figure>`标签中，可以嵌套各种元素，如`<img>`、`<figcaption>`等，以满足实际需求。这种嵌套结构有助于更好地组织页面内容，并提高页面的语义化程度。
10分钟
7分钟
自主学习
8分钟
练习训练
· 创建一个简单的网页，使用<figure>标签展示一张图片。
· 在<figure>标签中嵌套<figcaption>元素，添加图片的标题和描述。
12分钟
布置作业
1. 完成课后习题。
2. 在个人网站或博客中添加一个使用<figure>标签的图片展示区域。
1分钟
总结回顾
1<figure>标签用于表示页面中的图像、图表、代码等内容，具有独立的语义意义。 2<figure>标签的基本用法很简单，只需将其
第 1 页，共 2 页
学科网（北京）股份有限公司
$$
资源预览图
1
2
所属专辑
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。