本篇教程探讨了换种姿势学习HTML5之一：HTML5的结构，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

article元素

————————————————————————————————————————————————————————

文档、页面、应用程序或站点中的字包含成分所构成的一个页面的一部分，并且这部分专用于独立地分类或复用；一个article元素通常有他自己的标题（可以放在header中），有时还有自己的脚注。

eg:

image
复制代码

  1  <article>
  2   <header>
  3      <h2>黑颜简介</h2>
  4         <p>黑颜：言情小说家</p>
  5     </header>
  6     <p>黑颜，网名。以《弃女》、《焰娘》两书惊艳于读者眼前。在喜欢看小说之余，开始动笔写小说。<br/>
  7     处女座，所在地：中国贵州 贵阳自认有完美主义倾向以及精神上的洁癖。但对于B型血者而言，<br/>
  8     与处女座完全相背的特质让她本人常常处于矛盾之中。做过志愿者、医生、业务员、教师，<br/>不喜欢受拘束，不喜欢一成不变</p>
  9     <footer>
 10      <p><small>摘自百度百科</small></p>
 11     </footer>
 12  </article>

复制代码

 

当然，article可以内嵌使用，和section可以嵌套使用

除了这种用法，article也可以来表示插件，它的作用是使插件看起来好像内嵌在页面

eg:

<article>
  <object>
    …
  </object>
</article>

 

 

 

section元素

————————————————————————————————————————————————————————

section——段或节；通常由内容+标题组成

section不是一个而普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐用div

其实section和article的区别在于，一个是文章，一个是文章中的节的关系，按照一般理解，就是article比section大了一级的意思。但是article可以看成一种特殊的section。如果一块内容相对独立完整，就是用article，一块内容有几段，就用section。

在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体CSS样式的套用。

 
nav元素

————————————————————————————————————————————————————————

构建导航，说白了本质是链接，不过它是一个包容器，就是你认为什么链接是导航页面，你就add到nav里面，具体用法是：

<nav>
 <ul>
   <li><a href="">XX</a></li>
   <li>...</li>
  </ul>
</nav>

 
aside元素

————————————————————————————————————————————————————————

用来表示当前页面或文章的附属部分，也可以认为该内容与article的内容是独立的，可用于摘录引用或者边栏这样的排版效果，用于广告或者一组导航元素，就是我们常常看见的侧边栏。总之它用来标识区分内容或者做文本解释。比如我们在做友情链接的侧边栏的时候，就可以用 aside嵌套 nav

 
time元素

————————————————————————————————————————————————————————

用于明确地对机器的时间和日期进行编码，并且以易读的方式展现它。

多种格式：

<time datetime="2015-10-03">就是现在</time>
<!--T表示日期与时间的间隔-->
<time datetime="2015-10-03T19:36"></time>
<!--Z表示机器编码使用UTC标准时间-->
<time datetime="2015-10-03T19:36Z"></time>
<!--+时差-->
<time datetime="2015-10-03T10:36+8:00"></time>

pubdate属性：如果出现多个时期，谁为准，用pubdate标志

 
新增的非主体结构元素

————————————————————————————————————————————————————————
header元素：

一个网页没有限制header的个数，一个header至少包括一个heading（h1~h6），也可以包括hgroup table from nav等等。
 
hgroup元素：

将标题及子标题分组，例如

<header>
     <hgroup>
        <h2>黑颜简介</h2>
        <h3>黑颜：言情小说家</h3>
     </hgroup>
</header>

 
footer元素：

脚注，前面出现了，没啥好说的
 
address元素：

就是<article>或文档作者联系方式，这个看你自己选，不过如果是写博客，我们一般都会这些

<address>
  <a href="博客文章地址">XXX</a>
</address>

 
sum up：

从功能来讲，HTML5在这方面主要是做了一个规范的作用，实用性上没有多少添加，就酱。    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！