首页 > 代码库 > HTML5 中的Nav元素详解
HTML5 中的Nav元素详解
什么是Nav元素
Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。
比如说页脚底部如果有个版权申明，我们就不建议使用nav元素，而是使用footer元素是最合适的。一个页面中我们可用多个nav元素作为整体或者不同部分的导航
nav元素的用法
<body>
<h1>nav的使用方法</h1>
<nav>
<ul>
<li>
<a href=http://www.mamicode.com/”nav元素.html”>首页</a>
</li>
<li>
<a href=http://www.mamicode.com/”aside元素.html”>aside</a>
</li>
<li>
<a href=http://www.mamicode.com/”section元素.html”>section</a>
</li>
</ul>
</nav>
</body>
Nav元素效果演示图如下：
如果想实现多层嵌套，我们可以在下面新建一个独立的区块，我们使用article。
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=http://www.mamicode.com/”section元素.html”>section</a>
</li>
<li>
<a href=http://www.mamicode.com/”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>//这就实现了一层的嵌套
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=http://www.mamicode.com/”section元素.html”>section</a>
</li>
<li>
<a href=http://www.mamicode.com/”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>
Nav多层嵌套效果演示图：
如果在底部有一些版权信息的话，我们最好加在footer里面。
<footer>
<p>
<a href=http://www.mamicode.com/”/”>版权信息</a>
<a href=http://www.mamicode.com/”/”>站点帮助</a>
<a href=http://www.mamicode.com/”/”>联系我们</a>
</p>
</foooter>
Footer效果图如下：
总结nav元素的方法
1、传统的导航条
以腾讯为例：
2、侧边栏导航
3、内页导航
4、翻页操作
原文链接：http://www.maiziedu.com/wiki/html5/nav/
HTML5 中的Nav元素详解