HTML5新增内容-结构标签

结构标签

用来进行页面结构布局，本身无任何特殊样式 ，需要使用CSS进行样式设置

• article 定义一个独立的内容，完整的文章

• section 定义文档的章节，段落

• header 一般用于这三个地方：页面头部。文章的头部，页眉，标题。区块头部

• footer 文章的底部，页脚，标注

• aside 定义侧边栏

• figure 图片区域

• figcaption 为图片区域定义标题

• nav 定义导航菜单

结构标签只是表明各部分的角色，并无实际外面样式，与普通的div相同

article元素

一般用于地方：

• 文章内容部分

  article可以看成一个独立的部分，也可以看成别名的div,它内部可以包含标题及其他部分。

  注意：在严格意义上，每一个article元素内部都应该有一个header元素

实例

<article>
    <header>
    <h1>全球气温为什么不断上升？</h1>
    </header>
    <div>文章内容.....</div>
    <footer>
    <nav>下一篇</nav>
    </footer>
</article>

section元素

section元素一般用于某一个需要标题内容的区块。

说明：如果页面某个区块不需要标题，直接使用div元素。如果需要标题，则建议使用section元素。

注意：HTML5标准建议，section元素内部必须带有标题，也就是说，section元素内部必须带有一个header元素

<section>
    <header>理科</header>
    <ul>
        <li>数学</li>
        <li>语文</li>
    </ul>
</section>

header元素

一般用于地方：

• 页面头部

  header元素一般用于包括网站名称、页面LOGO，顶部导航，介绍信息等

• 文章头部

  header元素一般用于包含“文章标题”和“meta信息”两部分

• 区块头部（即section元素头部）

  header元素一般只包含区块的标题内容

footer元素

一般用于地方:

• 页面底部

• 文章底部

aside元素

aside元素一般用于表示跟周围区块相关的内容

一般用于地方：

• 如果aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关

• 如果aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，比如文章内容，文章点赞等

nav元素

一般用于地方：

• 顶部导航

  nav元素可以放到header元素内部，也可以放到header元素外部。放在哪里取决于开发需求

• 侧栏导航

• 分页导航