html文档结构元素相关概念

1 结构元素

1.1 header元素

header元素是一种表示头部的结构元素，通常用来放置整个网页或页面内一个内容区块的标题，但也可以包含其他的元素，例如标题（<h1>~<h6>）、导航部分（<nav>）或普通内容（<p>和<span>）等部分。

1.2 article元素

article元素是一种表示大段内容的结构元素。使用article元素可以在网页中定义独立的、完整的内容，例如：文章、博客、帖子、评论等。

1.2.1 文章区的结构

设计要求中的文章区由文章标题和文章内容组成。HTML5中的语义化元素article可表示一个文章区，在其中可以嵌套header元素来表示文章的标题，文章的内容可用段落标签来设定。
代码结构如下：

<article>
  <header>文章标题</header>
  <p>文章的段落内容</p>
</article>

1.3 aside元素

aside元素用于定义当前页面或当前文章的附属信息，包括当前页面或当前文章的相关引用、侧边栏、广告以及导航等有别于主体内容的部分。

1.4 footer元素

footer元素用于定义脚注部分，例如在父级内容块中添加注释、在文章区中添加作者信息、在网页底部添加版权信息等。

1.4.1 页脚区的设置

footer元素用于定义文档或节的页脚。作为文档的页脚，通常可以包含页面的版权信息和联系人信息。

1.4.2 版权信息

版权信息通常由版权符号©和相关的信息组成，在网页中显示版权符号©需要使用特殊字符©，例如要显示“©2008 Yang”，相应的代码为：
©2008 Yang

1.4.3 联系人信息

版权信息通常也嵌套在页脚区，使用语义化元素address来设置，address元素中的文本通常显示为斜体。代码结构如下：

<footer>
  <address>联系人信息</address>
</footer>

1.5 figure/figcaption元素

figure元素用于表示独立的流内容，例如图像、图表、照片、代码等等。figcaption元素用于定义figure元素的标题，要嵌套在<figure>中，通常被置于 <figure> 中的第一个或最后一个子元素的位置。

1.5.1 文章区中引入图类对象的语义元素

设计要求的文章区中要插入能被搜索引擎识别的图类对象，可用HTML5中的语义化元素figure来设置，在其中可以嵌套figcaption元素来表示图的名称，该元素通常被置于figure 元素的第一个或最后一个子元素的位置。
代码结构如下：

<figure>
  <img src=图的路径>
  <figcaption>图的名称</figcaption>
</figure>

2 页面节点元素

2.1 section元素

section 元素用于定义文章的节（区段），比如章节、页眉、页脚或文档中的其他部分。通常由内容及其标题组成。
文章节的设置
HTML5中的语义化元素section可表示一个文章的节，在其中可以嵌套节标题，文章节的内容可用段落标签或其他标签来设定。
代码结构如下：

<section>
  <header>文章的节标题</header>
  <p>文章的段落内容</p>
</section>

2.2 nav元素

nav元素用于代表页面的一个部分，是一个可以作为页面导航的链接组，主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。

2.2.1 文章区的结构

设计要求文章区设置一个导航区。HTML5中的语义化元素nav可表示一个导航区，在其中可以嵌套超链接标签（a）来实现跳转，外部超链接的常用属性有href和title，href的取值为链宿的路径，title的取值为鼠标悬停在链源上显示的文本。
代码结构如下：

<nav>
  <a href="链宿的路径" title="显示文本">链源</a>
   ......
</nav>

2.3 address元素

address元素用于一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。如果address元素位于article元素内部，则它表示article元素所包含文章内容的作者的联系信息，如果直接位于body元素内，那么表示该网页的作者的联系信息。

3 相关概念选择题及参考答案

3.1 选择题

1、

元素主要用于定义页面的什么内容？

A、
文章

B、
版权信息

C、
导航

D、
辅助内容

2、以下选项，哪个不属于语义化的元素？

A、
<header>

B、
<aside>

C、
<span>

D、
<footer>

3、在HTML5中，（ ）元素用于定义文章的页眉信息。

A、
<headers>

B、
<header>

C、
<group>

D、
<hgroup>

4、aside元素用于定义当前页面或当前文章的附属信息。

A、
正确

B、
错误

5、figcaption元素用于表示独立的流内容，例如图像、图表、照片、代码等。

A、
正确

B、
错误
6、

元素主要用于定义页面的什么内容？

A、
文章的侧栏区

B、
文章的节

C、
文章的标题

D、
文章的版权信息

7、

元素主要用于定义页面的什么内容？

A、
页眉

B、
页脚

C、
导航

D、
注释

8、下列选项中，用于表示该网页作者联系信息的是（ ）元素。

A、
figure

B、
section

C、
details

D、
address

9、HTML5的目标就是通过一些新标签、新功能为开发更加简单、独立、标准的通用Web应用提供标准。

A、
正确

B、
错误

10、address元素用于代表页面的一个部分，是一个可以作为页面导航的链接组。

A、
正确

B、
错误

3.2 参考答案

1、A
2、C
3、B
4、A
5、B
6、B
7、C
8、D
9、A
10、B