3.1.3 nav元素
nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素,只需要将主要的、基本的链接组放进nav元素即可。例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等,这时使用footer元素是最恰当。一个页面中可以拥有多个nav元素,作为页面整体或不同部分的导航。
接着让我们来看一个nav元素的使用示例,在这个示例中,一个页面由几部分组成,每个部分都带有链接,但只将最主要的链接放入了nav元素中,如代码清单3-7所示。
代码清单3-7 nav元素示例
<body>
<h1>技术资料</h1>
<nav>
<ul>
<li><a href="/">主页</a></li>
<li><a href="/events">开发文档</a></li>
…more…
</ul>
</nav>
<article>
<header>
<h1>HTML 5与CSS 3的历史</h1>
<nav>
<ul>
<li><a href="#HTML 5">HTML 5的历史</a></li>
<li><a href="#CSS 3">CSS 3的历史</a></li>
…more…
</ul>
</nav>
</header>
<section id="HTML 5">
<h1>HTML 5的历史</h1>
<p>讲述HTML 5的历史的正文</p>
</section>
<section id="CSS 3">
<h1>CSS 3的历史</h1>
<p>讲述CSS 3的历史的正文</p>
</section>
…more…
<footer>
<p>
<a href="?edit">编辑</a> |
<a href="?delete">删除</a> |
<a href="?rename">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版权所有:陆凌牛</small></p>
</footer>
</body>
在这个例子中,第一个nav元素用于页面导航,将页面跳转到其他页面上去(跳转到网站主页或开发文档目录页面);第二个nav元素放置在article元素中,用作这篇文章中两个组成部分的页内导航。
具体来说,nav元素可以用于以下这些场合:
传统导航条。现在主流网站上都有不同层级的导航条,其作用是将当前画面跳转到网站的其他主要页面上去。
侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航,其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
除此之外,nav元素也可以用于其他所有你觉得是重要的、基本的导航链接组中。
请注意:在HTML 5中不要用menu元素代替nav元素。过去有很多Web应用程序的开发员喜欢用menu元素进行导航,我想有必要再次强调,menu元素是用在一系列发出命令的菜单上的,是一种交互性的元素,或者更确切地说是使用在Web应用程序中的。