nav
标签是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。通常将主要的、基本的链接放进nav标签中。
例如,在页面头部有一个导航,有首页、各栏目,此时用nav标签就很合适。而在页脚中通常会有包括服务条款、ICP备案、版权声明等链接,这时使用footer标签是最合适的。
一个web页面中可以有多个nav标签作为页面整体或不同部分的导航。下面是一个nav标签的使用示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav_demo</title>
</head>
<body>
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>代码</li>
<li>胡思乱想</li>
</ul>
</nav>
<article>
<header>
<h1>产品经理要做的几件事</h1>
<nav>
<ul>
<li><a href="#001">市场分析</a></li>
<li><a href="#002">需求分析</a></li>
<li><a href="#003">原型绘制</a></li>
</ul>
</nav>
</header>
<section id="001">
<h1>市场分析</h1>
<p>市场分析很重要……</p>
</section>
<section id="002">
<h1>需求分析</h1>
<p>需求分析很重要……</p>
</section>
<section id="003">
<h1>原型绘制</h1>
<p>原型绘制很重要……</p>
</section>
<footer>
<p><a href="">分享</a><a href="">收藏</a></p>
</footer>
</article>
<footer>
<p><small>此处是脚注,例如:PM 小凯哥<xuxinkai.cn>版权所有</small></p>
</footer>
</body>
</html>
在这个示例中,一个页面由几个部分组成,每个部分都带有链接,但只将最主要的链接放入nav标签中。第一个nav标签用于页面导航,将页面跳转到其他页面上;第二个nav标签被放置在article标签中,作为内容纲要/目录索引,英文名应该成为TOC。
nav标签通常用在以下场合:
- 头部主导航条:现代主流网站顶部上都有不同层级的导航条,用来将当前画面跳转到网站的其他主要页面;
- 侧边栏导航:例如博客的侧边栏或者淘宝幻灯片左边的导航条;
- 页内导航:例如示例中的目录索引/内容纲要;
- 分页导航:常见的就是博客下面的第一页,第二页,上一页,下一页这种分页导航;
除了上面说的这些外,nav标签也可以用在其他导航链接组中,根据需要灵活使用。但在HTML5中不要用menu标签代替nav标签。因为menu标签是被用在一系列发出命令的菜单上的,是一种交互性的元素,或者更确切地说是使用在Web应用程序中的。
© 版权声明
本文内容均基于《CC BY-NC-SA 4.0》协议创作或转载,仅供学习和研究使用,不得用于任何商业用途,您可以转载分享,但同时需保留原文链接。
THE END
请我喝怡宝