HTML5新增的主体结构元素

1. section元素

<section>的作用：定义文档中的节，比如：章节、页眉、页脚或文档中其他部分；
<section>的结构代码：
    <section>
        <h1></h1>
        <p></p>
    </section>

setion的注意事项：

• 通常不推荐没有标题内容使用sction元素；
• 不要与article元素混淆；
• 不要将section元素作为设置样式的内容容器（用div；
• 如果article元素、aside元素、nav元素更符合使用条件，那不要使用section元素。

2. article元素

<article>的作用：定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
article 可以嵌套，内层的内容在原则上需要与外层的内容相关联。

<section>、<article>、<div>的区别:

1. <div>无语义；
2. <section>有语义，适合一段主题性的内容；
3. <article>有语义，表示的内容可以脱离上下文，可以作为完整的独立文档;

3. aside元素

<aside>的作用：一般表示网站当前页面或者文章的附属信息部分，可以包含与当前页面主要内容相关的广告、导航条、引用、侧边栏评语部分，以及其他区别与主要内容的部分；
<aside>的结构代码：
<article>
    <h1></h1>
    <p></p>
    <aside></aside>
</article>
---------------------
<aside>
    <h2></h2>
    <ul>
        <li></li>
        <li></li>
    </ul>
</aside>
---------------------
<aside>
    <p></p>
</aside>

4. time元素

<time>的作用：用于定义时间或者日期(datetime,pubdate属性)。
<time>的结构代码
    <p>
        <time datetime="2018-10-20" >2018-10-20</time>
    </p>
    <p>
        <time datetime="2018-10-20T18:15">2018-10-16<time>
    </p>
    <p>
        <!-- 是否为发布时间 -->
        <time pubdate="true"></time>
    </p>

5. nav元素

• nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。
• nav元素应用场景： 传统导航条、侧边栏导航、页内导航、翻页操作。