HTML5之主体元素结构

主体结构元素

主体结构元素，压实为了语义可以结构化，说白了就是为了更好的SEO,再直白一点就是为了浏览器更好的抓数据，包含的元素：article、section、nav、aside、time

（1）article 使用频率低

从语义上理解是文章、页面。通常的用法：一遍文章，一个页面和独立完整的内容。这个标签强调的是内容的独立性。同时，一般article元素里面会嵌套一个header

<article>
    <header>
        html5课程
    </header>
    <p>轻松学习htm5，欢迎来到<a href="http://www.huadianedu.con">华点</a></p>
</article>

（2）section 频率低

章节，通常的用法：文章中的一段，这一段通常有标题和内容组成。

特点：强调分段分块

<article>
    <h1>苹果</h1>
    <p>是一种可以吃的水果，而且大家都喜欢吃，圆圆的</p>
    <section>
        <h3>红富士</h3>
        <p>是一种红色的苹果</p>
    </section>
    <section>
        <h3>国光</h3>
        <p>是一种青色的，酸酸的苹果</p>
    </section>
</article>

 

（3）nav（navigation）导航 使用频率高

通常用在导航栏

<header>
    <div class="logo"></div>
    <nav>
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
        </ul>
    </nav>
</header>

（4）aside旁边，侧边

通常用法：放在article元素里面，作为附属信息部分，或者参考信息之类的。

放在article元素外面，作为整个页面的附属信息

<aside>
    <nav>
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王二</li>
        </ul>
    </nav>
</aside>

（5）time 使用频率极低

时间标签，通常用法，表示24小时的某个时刻或者某个日期。

注意：该标签，所有浏览器都不支持。