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

课程

《网页设计与制作(html5+css3+javascript)》

一体化     理论

章节（课题）及内容

﹤ aside ﹥ … ﹤ /aside ﹥ 标签

班级日期

中职

2024.05

授课方式

讲授与任务驱动相结合

课时

1

作业题数

1

拟用时间

40分钟

使学生理解以下理论知识：

• 了解HTML5中<aside>标签的作用和语义。
• 掌握<aside>标签的基本用法和相关属性。
• 学会在<aside>标签中嵌套其他元素。

教学资源准备

多媒体设备

课本教材

学生练习素材

1<aside>标签的作用和语义。 2<aside>标签的基本用法和相关属性。
3. 在<aside>标签中嵌套其他元素的方法。

1<aside>标签与其他HTML5语义化标签的区别。 2. 如何在<aside>`标签中合理地组织内容。

教学方法

讲授法、任务驱动法、演示法、体验探究法等。

  案例分析法：通过实际案例，让学生更好地理解和掌握<aside>标签的应用。

  任务驱动法：布置具体任务，引导学生动手实践，提高解决问题的能力。

课前导入

1. 回顾之前学过的HTML基本标签。
2. 引出HTML5中语义化标签的概念，说明其在网页中的作用。

2分钟

讲授新课

要了解HTML5中`<aside>`标签的作用和语义，首先需要了解HTML5中的语义化标签。

1<aside>`标签的作用和语义：

HTML5中的语义化标签是为了更好地描述网页内容的结构和意义。`<aside>`标签用于表示页面中与主要内容相关但可以独立于其存在的内容，如侧边栏、注释、广告等。它可以帮助搜索引擎和辅助设备更好地理解页面内容。

2<aside>`标签的基本用法和相关属性：

`<aside>`标签的基本用法很简单，只需将其包裹在需要展示侧边栏或相关内容的区域内即可。例如：

```html

<!DOCTYPE html>

<html>

<head><title>Aside标签示例</title></head>

<body>

 <main>

    <h1>文章标题</h1>

    <p>这是一篇关于HTML5的文章，详细介绍了HTML5的语义化标签。</p>

  </main>

  <aside>

10分钟