web前端开发——结构元素

header元素

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

article元素

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

文章区的结构

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

1. <article>
2. <header>文章标题</header>
3. <p>文章的段落内容</p>
4. </article>

aside元素

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

footer元素

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

figure/figcaption元素

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

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

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

1. <figure>
2. <img src=图的路径>
3. <figcaption>图的名称</figcaption>
4. </figure>