快速注册

HTML5 中的Nav元素详解

小麦麦子 2016-12-22 11:56:12

什么是Nav元素
Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。
比如说页脚底部如果有个版权申明，我们就不建议使用nav元素，而是使用footer元素是最合适的。一个页面中我们可用多个nav元素作为整体或者不同部分的导航
nav元素的用法
<body>
<h1>nav的使用方法</h1>
<nav>
<ul>
<li>
<a href=”nav元素.html”>首页</a>
</li>
<li>
<a href=”aside元素.html”>aside</a>
</li>
<li>
<a href=”section元素.html”>section</a>
</li>
</ul>
</nav>
</body>
Nav元素效果演示图如下：

如果想实现多层嵌套，我们可以在下面新建一个独立的区块，我们使用article。
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>//这就实现了一层的嵌套
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>
Nav多层嵌套效果演示图：