重学前端:深入理解nav标签

页面结构

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应用程序中的。

© 版权声明
THE END
请我喝怡宝
点赞0
分享
评论 共2条
    • 人间不值得
    • 伍子蛇0

      nav、header、footer这些个标签都少用吧,比较兼容性不好,一个div就都解决,也不存在什么语义化的问题,在以非主流浏览器的用户来说,能正常显示才是硬道理

      6月前回复
      • 我以前也是div一把梭,但是现在回头来看,还是要深入理解html5的语义化标签 :mrgreen: 。然后兼容性的话,现在浏览器都已经支持,写出语义化比较好的界面才是优秀的前端工程师。 😛