HTML5的结构学习(1) --- 新增的主体结构元素
解释：代表文档、页面和应用程序中独立的、完整的、可以被独自引用的内容。
主要用途：博客中的文章、评论，贴吧中的帖子，或者独立的插件等。
article中可以包含多种元素例如：
复制代码
<article>
<header>日记随笔</header>
<p>发表日期：
<time pubdate="pubdate">2014/09/18</time>
</p>
<p>今天早上下雨，天气很冷需要加衣服</p>
<footer>我的博客</footer>
</article>
复制代码
同时article中也可以嵌入article：
复制代码
<html>
<head></head>
<body>
<article>
<h1>日志列表</h1>
<section>
<article>
<header>
日记随笔
</header>
<p>发表日期： <time pubdate="pubdate">2014/09/18</time> </p>
<p>今天早上下雨，天气很冷需要加衣服...</p>
</article>
<article>
<header>
日记随笔
</header>
<p>发表日期： <time pubdate="pubdate">2014/09/18</time> </p>
<p>今天早上下雨，天气很冷需要加衣服...</p>
</article>
</section>
</article>
</body>
</html>
复制代码
2.section元素
解释：用于网站或者应用程序中的内容进行分块。一个section元素通常由标题和内容组成。
用途：划分不同内容区块。
section就是用于内容的分段，例如：
复制代码
<article>
<h1>NBA 球队</h1>
<p>NBA用东西区共有30支球队组成</p>
<section>
<h2>金州勇士队</h2>
<p>金州勇士队位于美国奥克兰。。。。。。</p>
</section>
<section>
<h2>洛杉矶湖人队</h2>
<p>洛杉矶湖人队位于美国娱乐中心洛杉矶。。。。。。</p>
</section>
</article>
复制代码
NBA球队介绍首先是一段独立的内容，因而使用article元素，而每支球队的介绍是彼此并列需要使用分段，所以使用section分隔。
其实这里的article 和section就算互换使用也未尝不可（article可以看做一种特殊的section），主要是看这段元素在你当前的网页中强调的是什么，强调独立性使用article，强调分段使用section。
可以访问https://gsnedders.html5.org/outliner/检查你代码结构中没有section 标题的部分，不要为没有标题的内容区块使用section标签。
注意：section并非一个普通的容器元素，当一个容器元素需要直接被定义样式或者脚本定义行为时，推荐使用的是p。
3.nav元素
解释：页面导航的链接组
用途：页面导航
nav元素就是用于包裹页面导航元素，例如：
复制代码
<nav>
<ul>
<li>主页</li>
<li>我的博客</li>
<li>论坛</li>
.....
</ul>
</nav>
复制代码
注意：不要使用menu元素代替nav
4.aside元素
解释：用来表示当前页面和文章的附属信息部分
用途：用于与当前页面相关的引用、边侧栏、广告和导航条。
aside主要有两种用法：
1.被包含在article中作为主要内容的分属信息部分，其中内容可以是与当前文章相关的参考资料、名词解释。
例如：
复制代码
<header>
<h1>HTML5新元素</h1>
</header>
<article>
<h1>aside标签的使用</h1>
<p>aside标签同article一样都是HTML5中新加入的元素，但是一般用于与主体内容相关元素。如名词解释、引用等等。。。。。。。</p>
<aside>
<h1>名词解释</h1>
<dl>
<dt>article</dt>
<dd>HTML5新元素，用于表示独立元素</dd>
</dl>
</aside>
</article>
复制代码
2.在article元素之外使用，作为页面或者站点全局的附属信息部分使用。例如友情连接、广告和其他文章列表。
复制代码
<aside>
<h1>本周热门文章</h1>
<ul>
<li>
<span>0</span><a href="....">iPhone6 回事目前技术上最先进的手机吗？</a>
</li>
<li>
<span>1</span><a href="....">Git工作流指南：集中式工作流</a>
</li>
<li>
<span>2</span><a href="....">图解KMP算法(Javascript实现)</a>
</li>
...
</ul>
</aside>
上一篇： Oracle和Mysql分页的区别
下一篇： cad2008的快捷键大全汇总