HTML5页面中的结构元素（header、nav、article、aside、section、footer）
HTML5中的header元素
HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素常用来放置整个页面或页面内的一个内容区块的标题，可以包含网站LOGO图片，搜索表单或其他相关内容。它的基本语法格式如下：
<header>
<span>网页主题，可以使用h标签</span>
....
</header>从上面代码可以看出，由header标记开头，并由header标记结尾，中间嵌套的应该是h1一级标题标签，这里由于样式污染，自行替换即可。header元素并非head元素，在HTML网页中，并不限制header元素的个数。一个网页中可以使用多个header元素，也可以为每一个内容块添加header元素。
HTML5中的nav元素
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面，或者当前页面的其他部分。它的基本使用方法如下：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新文章</a></li>
<li><a href="#">热门动态</a></li>
</ul>
</nav>从以上代码我们呢可以看到，通过nav元素内部嵌套无序列表ul来搭建导航部分。通常一个HTML页面中可以包含多个nav元素，作为页面整体或不同部分的导航。nav元素可用于一下几种情况：
传统导航条目前主流网站上都有不同层级的导航条，其作用是跳转到其他网站的其他页面。可参考鳄鱼教程的顶部导航
侧边栏导航条目前主流博客网站以及电商网站都有侧边栏导航，可参考鳄鱼教程手机端的侧边导航。目的是将当前文章或者当前商品页面跳转到其他文章或其他商品页面。
页内导航条在当前页面的几个重要组成部分之间进行跳转。比方说网站中的文章目录导航。
翻页操作切换的是网页的内容部分，可以通过单击“上一页”或“下一页”切换，也可以通过单击实际的页码数跳转到某一页。
HTML5中的article元素
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。它的基本使用方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>article元素的使用</title>
</head>
<body>
<article> <!--h标签用p标签代替-->
<header>
<p>第一章</p>
</header>
<section>
<header>
<p>第一节</p>
</header>
</section>
</article>
<article>
<header>
<p>第二章</p>
</header>
<section>
<header>
<p>第二节</p>
</header>
</section>
</article>
</body>
</html>HTML5中的aside元素
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。aside元素的用法主要有以下几种：
- 1.被包含在article元素内作为主要内容的附属信息
- 2.在article元素之外使用，作为页面或站点全局的附属信息部分。最常用的形式是侧边栏，其内容可以是友情链接，广告单元等。
我们来看一下aside元素的基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aside元素的使用</title>
</head>
<body>
<article>
<header>
<p>标题</p>
</header>
<section>
文章主要内容
</section>
<aside>相关文章</aside>
</article>
<aside>右侧菜单</aside>
</body>
</html>HTML5中的section元素
section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由于内容和标题组成。在使用section元素时，不要将section元素用作设置样式的页面内容，那是div元素的特性。如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。在没有标题的内容区块不要使用section元素定义。我们来看一下它的使用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>section元素的使用</title>
</head>
<body>
<article>
<header>
<p>鳄鱼君的个人简介</p>
</header>
<p>鳄鱼君是一个非常帅的男生，会打篮球，什么都会！</p>
<section>
<p>评论</p>
<article>
<p>评论者：璐璐</p>
<span>鳄鱼君真的像介绍的呢样！</span>
</article>
<article>
<p>评论者：杰斯</p>
<span>鳄鱼君人很好的！</span>
</article>
</section>
</article>
</body>
</html>HTML5中的footer元素
footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。与header元素相同，一个页面可以包含多个footer元素。也可以在article元素或section元素中添加footer元素。它的基本使用方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>section元素的使用</title>
</head>
<body>
<article>
文章内容
<footer>
文章分页列表
</footer>
</article>
<footer>
页面底部
</footer>
</body>
</html>上面代码中，使用了两对footer元素，其中第一对footer元素用于为article元素添加了区域底部，第二对footer元素用于为页面定义底部。
