H5--主体元素结构与非主题元素结构

主体结构元素

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

（1）article—使用频率低

<article>
    <header>
        HTML5课程
    </header>
      <p>轻松学习HTML5，欢迎来到<ahref="http://huadianedu.com">华点</a></p>
</article>

 

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

（2）section—使用频率低

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>H5发展史</li>
            <li>CSS3发展史</li>
            <li>ENScript发展史</li>
        </ul>
    </nav>
</header>

（4）aside –使用频率低

aside元素语义：旁边、侧边。

通常的用法：

放在article元素里面，作为附属信息部分，比如参考信息，名称解释。

放在article元素外面，作为整个页面的附属信息，比如侧边栏、友情链接、广告区域。

<article>
    <h1>马云是谁</h1>
    <p>马云，男，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市（原嵊县）谷来镇， 阿里巴巴集团主要创始人，现担任阿里巴巴集团董事局主席、日本软银董事、TNC（大自然保护协会）中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事。</p>
    <aside>
        <h1>参考资料</h1>
        <p>搜狗百科</p>
    </aside>
</article>
   <aside>
       <nav>
           <ul>
               <li><ahref="#"></a>张三</li>
               <li><ahref="#"></a>李四</li>
               <li><ahref="#"></a>王五</li>
               <li><ahref="#"></a>赵六</li>
           </ul>
       </nav>
   </aside>

（5）time---压根就不用

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

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

非主体结构元素

（1）  header标签

一般用来放置整个页面的标题。比如说一个新闻的页面，haeder一般放新闻的把标题。如果一个官方网址，一般header用来放logo和 网站导航。

（2）footer标签

一般用来放置脚注，主要包含：作者的信息、copyright。

（3）address标签

一般用来呈现联系信息，主要包括：网站的联系方式、电子邮箱、地址、电话号码等等。

<header>
    <div class="logo">这是放logo的区域</div>
    <nav>
        <ul>
            <li><ahref="">首页</a></li>
            <li><ahref="">教程</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>html5 的教程</h2>
    <p>详细的教程，请访问华点网站<a href="http://huadianedu.com">点击跳转</a></p>
</article>

<footer>
    <p>copyright 2017 华点软件学院（嘉兴）</p>
    <address>
        <p>地址：南湖科技城</p>
        <p>电话：[phone]</p>
        <p>邮箱：[e-mail]</p>
    </address>
</footer>