Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第3讲次 任务4 结构标签和分组标签.docx

教案

序号：3

授课日期

课时数

4

章节名称

任务4结构标签和分组标签

教学内容

重点

结构标签和分组标签

难点

结构标签和分组标签的使用

教学目的与要求

理解并掌握HTML5新增标签的使用方法。

教学方法

与手段

教师采用任务驱动法，使用教学PPT辅助授课。

教师操作演示，学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题，通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

（任务4结构标签和分组标签

4.1结构标签：headernavarticleaside标签）

实操任务目标发布（制作“唐诗欣赏”页面、“温州地标性建筑”网页）

图3-SEQ图\*ARABIC\r11“唐诗欣赏”页面

图3-SEQ图\*ARABIC2

图3-SEQ图\*ARABIC2“温州地标性建筑”网页

准备知识介绍

结构标签

header标签

定义文档或者文档一部分区域的页眉，它可以作为介绍内容或者导航链接栏的容器。

在一个文档中，可以定义多个header标签，也可以为每一个独立内容块添加header标签。

子任务：

图3-SEQ图\*ARABIC3header标签的使用

nav标签

定义：定义导航链接的部分。

并不是所有的HTML文档都要使用到nav元素。

nav元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

子任务：

图3-SEQ图\*ARABIC4nav标签的使用

article标签

用于定义独立的内容，标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。其内可以用多个section进行内容划分。

article标签的潜在来源：论坛帖子、博客文章、新闻故事、评论等。

子任务：

图3-SEQ图\*ARABIC5article标签的使用

aside标签

定义article标签外的内容。

aside的内容应该与附近的内容相关，用于定义页面或者文章的附属信息部分，如页面内容相关的引用、侧边栏、广告等有别于主要内容的部分。

子任务：

图3-SEQ图\*ARABIC6aside标签

第二学时

（任务4结构标签和分组标签

4.1结构标签section、footer标签，4.2分组标签）

结构标签

section标签

定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

如果article标签、aside标签、nav标签更符合使用条件，那不要使用section标签。

没有标题的内容区块不要使用section定义。

footer标签

定义文档或者文档的一部分区域的页脚。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

可以在一个文档中使用多个footer元素。

子任务：

图3-SEQ图\*ARABIC7footer标签的使用

分组标签

figure标签与figcaption标签

figure标签：规定独立的流内容（图像、图表、照片、代码等）。

figcaption标签：定义figure元素的标题（caption）。

figcaption标签应该被置于figure元素的第一个或最后一个子元素的位置。

图3-SEQ图\*ARABIC8figure标签和figcaption标签的使用

hgroup标签

将多个标题（主标题、副标题或者子标题）组成一个标题组。该标签被用来对标题元素进行分组，通常与h1~h6标签、figcaption标签配合使用。

图3-SEQ图\*ARABIC9hgroup标签的使用

第三学时

实战演练——制作“唐诗欣赏”网页

案例描述：设计并制作唐诗欣赏页面，网页效果如下。

图3-SEQ图\*ARABIC10制作“唐诗欣赏”网页

第四学时

强化训练——制作“温州地标性建筑”网页

案例描述：设计并制作“温州地标性建筑”页面，网页效果如下。

图3-SEQ图\*ARABIC11“温州地标性建筑”网页

课后作业

1、完成线上的作业，并做好预习。

2、完成书本“4.4课后实训”练习。

图SEQ图\*ARABIC12“教育网站”网页

发布任务，学生能够有目标地进行学习

教师操作演示

学生模仿实践

教师演示操作

学生模仿实践