上QQ阅读APP看书，第一时间看更新
1.3.3 课堂案例——使用nav元素
nav元素在HTML5中用于包裹一个导航链接组，以说明这是一个导航组，同一个页面中可以同时存在多个nav元素。
并不是所有的链接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。例如，页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用nav元素是最恰当的。在HTML5中，可以直接将导航链接列表放到<nav>标记中，代码示例如下。
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="#">个人简介</a></li>
<li><a href="#">工作经历</a></li>
</ul>
</nav>
导航可以是页与页之间导航，也可以是页内的段与段之间导航，如以下代码示例。
<!doctype html>
<title>页面之间导航</title>
<header>
<h1>网站页面之间导航</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">公司介绍</a></li>
<li><a href="news.html">公司新闻</a></li>
</ul>
</nav>
</header>
该示例是页面之间的导航，nav元素中包含了3个用于导航的超链接，即“首页”“公司介绍”“公司新闻”。该导航可用作全局导航，也可放在某个段落作为区域导航。在浏览器中的效果如图1.8所示。
图1.8 页面之间导航
图1.9 页内导航
下面的示例是页内导航，在浏览器中的效果如图1.9所示。
<!doctype html> <title>页内导航</title> <header></header> <article> <h2>文章的标题</h2> <nav> <ul> <li><a href="#p1">段一</a></li> <li><a href="#p2">段二</a></li> <li><a href="#p3">段三</a></li> </ul> </nav> <p id=p1>段一</p> <p id=p2>段二</p> <p id=p3>段三</p> </article>
nav元素适用于哪些位置呢？
（1）顶部传统导航条：现在主流网站上都有不同层级的导航条，其作用是从当前页面跳转到网站的其他主要页面上。图1.10所示为顶部传统导航条。
（2）侧边导航：现在很多企业网站和购物类网站上都有侧边导航。图1.11所示为右侧导航。
图1.10 顶部传统导航条
图1.11 右侧导航
（3）页内导航：页内导航的作用是在本页面几个主要的组成部分之间进行跳转，图1.12所示为页内导航。
在HTML5中不要用menu元素代替nav元素。过去有很多Web应用程序的开发人员喜欢用menu元素进行导航，但menu元素是用在Web应用程序中的。
图1.12 页内导航