重学前端：深入理解nav标签|人间不值得

页面结构

nav标签是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。通常将主要的、基本的链接放进nav标签中。

一个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标签通常用在以下场合：