模块二 HTML基础 HTML5新增文档结构标签.pdfVIP

网页设计与Web应用开发基础

课程名称可修改课程名称可修改

课程名称可修改

模块二HTML基础

COURSECOURSETITLETITLE

COURSETITLE

HTML5新增文档结构标签

NAMENAME白会肖可修改可修改

知识

HTML5新增文档结构标签

目标

技能

会使用HTML5新增文档结构标签制作网页

目标

1.学习过程中形成乐于探究的意识和敢于创新

素质的精神。

目标2.养成主动与他人交流合作的精神。

•为了更好地表达HTML的文档结构和语义，HTML5新增了许多用于

表示文档结构方面的元素，用以取代HTML4中的DIV元素。HTML5

提供的文档结构标签主要有以下几个：

header

article

section

nav

aside

footer

•作用

header定义了页面或内容区域的头部信息，诸如放

置在页面头部的站点名称、Logo和导航栏、搜索框以及

放置在内容区域的标题、作者、发布日期等信息。

•基本语法

header头部相关信息/header

•语法解释

header/header标签对之间可以包含h1~h6

六个标题以及p、span等标签。

•作用

article用于表示页面中一块独立的、完整的相关内

容块，可独立于页面其他内容使用。例如一篇完整的论坛

帖子、一篇博客文章、一个用户评论、一则新闻等。

•基本语法

article独立的文档内容/article

•语法解释

article通常会包含一个header(包含标题部分）

或标题字以及一个或多个section或p标签。

•作用

section用于对页面的某块内容进行分块，如将文

章划分不同的章节。

•基本语法

section块内容/section

•语法解释

section/section标签对之间通常由标题及内

容组成，所以其中一般会包含h1~h6以及p等标签。

•作用

nav用于定义页面上的各种导航条，一个页面中可以

拥有多个nav元素，作为整个页面或不同部分内容的导航。

•基本语法

nav…/nav

•作用

aside用于定义当前页面或当前文章的附属信息部分，

可以包含与当前页面或主要内容相关的引用、侧边栏、

广告、导航条等内容，通常作为侧边栏内容。

•基本语法

aside…/aside

•作用

footer主要用于为页面或某篇文章定义脚注内容，

包括文章的版权信息、作者联系方式等内容，一个页面

可以包含多个footer元素。

•基本语法

footer脚注内容/footer

我学会了什么？

使用HTML5新增文档结构标签制作网页：

header

article

section

nav

aside

Footer

谢谢！