导航
想了解一下前端，以前没有深入研究过，一点一点学吧。
详见极客学院：http://www.jikexueyuan.com/course/733.html
在 HTML5 中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的元素。本文主要介绍 article 元素、section 元素、nav 元素、aside 元素、time 元素和 pubdate 属性。
一、article 元素
- article 元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章，一篇论坛帖子，一段用户评论或独立的插件，或其他任何独立的内容。
- article 元素可以嵌套使用。
- article 元素可以表示插件。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>article 元素</title>
</head>
<body>
<article>
<header>
<h1>桩白墨的博客</h1>
<p>欢迎来到桩白墨的博客</p>
</header>
<article>
<header>
作者
</header>
<p>评论</p>
<footer>
time
</footer>
</article>
<footer>
<p>这是底部</p>
</footer>
</article>
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width="600" height="400"/>
</object>
</article>
</body>
</html>
二、section 元素
- section 元素用于对网站或应用程序中页面上的内容进行分块。一个 section 元素通常由内容及其标题组成。
- 不要将 section 元素作为设置样式的页面容器（那是 div 的工作）。
- 如果 article 元素、aside 元素、nav 元素更符合使用条件，不要使用 section 元素。
- 如果没有标题内容，不要使用 section 元素。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>section 元素</title>
</head>
<body>
<section>
<h1>苹果</h1>
<p>这是一个水果，可以吃。而且很好吃。</p>
</section>
<article>
<h1>苹果</h1>
<p>这是一个水果，可以吃。而且很好吃。</p>
<section>
<h2>红富士</h2>
<p>这是一种外表很红的苹果，吃起来也不错。</p>
</section>
<section>
<h2>国光</h2>
<p>这是一种外表很红的苹果，吃起来也不错。</p>
</section>
</article>
<section>
<h1>水果</h1>
<article>
<h2>pingguo</h2>
<p>内容</p>
</article>
<article>
<h2>pingguo</h2>
<p>内容</p>
</article>
<article>
<h2>pingguo</h2>
<p>内容</p>
</article>
</section>
</body>
</html>
三、nav 元素
- nav 元素是一个可用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进 nav 元素，只需要将主要的、基本的连接组放入 nav 元素即可。
- nav 元素应用场景：
- 传统导航条
- 侧边栏导航
- 页內导航
- 翻页操作
- HTML5 中不能使用 menu 元素代替 nav 元素。menu 元素一般用在 web 应用程序中。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>nav 元素</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5 与 CSS3 的历史</h1>
<nav>
<ul>
<li><a href="#">HTML5 历史</a></li>
<li><a href="#">CSS3 历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5 历史</h1>
<p>......</p>
</section>
<section>
<h1>CSS3 历史</h1>
<p>......</p>
</section>
<footer>
<a href="#">删除</a>
<a href="#">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明：</small></p>
</footer>
</body>
</html>
四、aside 元素
- aside 元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>aside 元素</title>
</head>
<body>
<header>
<h1>js 入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文。。。。。。</p>
<aside>
<h1>名词解释</h1>
<p>语法：这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">2015-3-10</a></li>
<li><a href="#">大牛：真希望能好好学一下</a></li>
</ul>
</nav>
</aside>
</body>
</html>
五、time 元素和 pubdate 属性
time 元素
- time 元素代表某个日期或 24 小时中的某个时刻
- 明确、无歧义地对机器码时间进行编码
- 易读
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>time 元素</title>
</head>
<body>
<time datetime="2015-10-10">2015-10-10</time>
<time datetime="2015-10-10T20:00">2015-10-10</time>
<time datetime="2015-10-10T20:00Z">2015-10-10</time>
<time datetime="2015-10-10T20:00+09:00">2015-10-10</time>
</body>
</html>
pubdate 属性
- 可选的，布尔类型的属性。可用在 article 元素中的 time 元素上，意思是 time 元素代表了文章或整个网页的发布日期。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>pubdate 属性</title>
</head>
<body>
<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datetime="2015-10-10" pubdate="pubdate">2015-10-10</time>
</p>
<p>舞会时间
<time datetime="2015-10-12">2015-10-12</time>
</p>
</header>
</article>
</body>
</html>
没有公共留言板，在个博里面交流中有点膈应啊。
谢谢你的建议，我加上留言板试试。