前端学习（七） 内容分区元素（html）

内容分区元素，简单说明就是将页面分区：比如标题，导航，主内容，底部内容等等

1.article

文档，页面，应用或这站中可独立分配或可复用的结构

-通常含有标题（header）和脚注（footer）

-可嵌套

示例：

<article>

    <header>

        <h2>标题</h2>

    </header>

<div></div>

扫描二维码关注公众号，回复： 1640014 查看本文章

</article>

2.section

表示有主题的内容，通常的应用场景是：文章的章节，tab内容

<section>

    <h2>标题</h2>

    <div>内容</div>

</section>

3.div

无语义内容，html5前并没有语义的标签，到了h5之后，增加了相关语义标签，以后开发尽量用有语义的

区别：

div：无语义

section：主题性的内容

article：完整的独立内容

4.nav

含有多个链接的区域，比如导航

5.aside

表示和页面其他内容几乎无关的内容，场景有：article元素的附属信息（参考资料，名称解释），article元素之外的页面或站点的全局的附属信息（广告，侧边栏）

示例：

<section>

    <h2>标题</h2>

    <aside>note:在某个版本之后更新了新的功能<aside>

</section>

6.header

表示一个页面的头部，示例：

<header>

    <a href="">logo</a>

    <div>登录</div>

    <nav>

        <ul>

            <li>导航1</li>

        </ul>

    </nav>

</header>

7.h1-h6

标题

重要程度h1>h2>h3>h4>h5>h6

8.footer

页面的底部内容或者元素的页脚，常用场景

-文章的作者

-相关的链接

-版权

示例：

<footer>

    <a href="#">...</a>

</footer>