前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库nav 元素 导航 landmark
HTML语义与文档

哪些链接该放 nav?页面能有多个 nav 吗?

<nav> 表示用于页面或站点主要导航的一组链接,如主菜单、目录、分页或面包屑。普通正文里的每个链接不必放进 nav;看的是这组链接是否承担导航结构。一个页面可以有多个 nav,但多个导航区最好用可见标题或 aria-label 给出可区分的名称,便于读屏用户选择。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档
先看核心答案读代码示例
理解线索

nav 标记重要导航集合

  1. nav把重要链接集合标记为地标,普通正文引用不需要
  2. 导航地标读屏用户可在多个地标间跳转,数量别滥增
  3. 区分名称多组导航用主菜单、文章目录等用途区分

文章里指向 MDN 的参考链接属于正文,不能因为它也是 <a> 就包装成新的导航地标;多组真正的导航还应各有清楚名称。

核心回答

先记住这个答案

<nav> 是重要导航链接集合的地标,站点菜单、文章目录和分页都可能使用它;正文里引用的一条外部链接则不需要单独包成导航。一个页面可以有多个导航区,读屏用户会在地标间切换,因此应让名称能区分“主菜单”和“文章目录”。命名时优先引用可见标题,没有标题再用 aria-label。

  • 主菜单和目录可用 nav
  • 正文普通链接不必进 nav
  • 页面可有多个导航区
  • 多个导航区要区分名称

页面的三种导航链接

文章页上方有站点菜单,左侧有章节目录,底部有“上一篇、下一篇”。这三组都可以是导航,但正文段落里引用的 MDN 链接只是内容引用,不是独立导航区。若页面有两个以上 nav,可分别标为“主导航”“文章目录”“上一篇与下一篇”,避免辅助技术只报出三个同名导航地标。视觉上排成一行的链接也不一定自动具备导航语义。

主导航与文章目录分别命名HTML
<nav aria-label="主菜单">
  <a href="/blog">博客</a>
  <a href="/docs">文档</a>
</nav>
<article><p>参考 <a href="/guide">这份指南</a>。</p></article>
<nav aria-label="文章目录"><a href="#part-1">第一节</a></nav>

nav 为一组重要导航链接提供地标。 若页面已经有可见的“文章目录”标题,可以给标题一个 id,再用 aria-labelledby 引用它,让视觉用户和读屏用户看到同一个名称。只有视觉上没有标题时再考虑 aria-label。名称应说明用途,写“文章目录”就够了;辅助技术已经会报告导航地标,无需写成“文章目录导航”。

nav 标记重要导航集合

读屏用户可在地标之间快速切换,因此不宜把页面上所有零散链接都包装成导航区,否则地标列表会变得嘈杂。一个导航区可以包含标题、列表、按钮等辅助内容,但核心仍是导航目的。多个导航区的名称应描述用途,且不需要在名称里重复“导航”二字,因为角色本身已表达这一点。

分页是否算导航,要看它是不是让用户去另一页或另一段结果。比如“上一页”“下一页”是真实链接时,包在 <nav> 中比较自然;“展开筛选项”虽然也可能排在同一行,却只是操作按钮,不应因为位置靠近分页就一并当作导航链接。这个判断比看元素外观是否像菜单可靠。

页脚也可以有导航区;若页面已经有主菜单和文章目录,就给页脚链接另起清楚的名称,让地标列表里三组入口各自可辨。

回答前,多想一步

容易答错的地方

所有 <a> 都放进 nav
正文引用、下载链接或操作链接不一定构成导航区。
一页只能有一个 nav
可以有多个不同用途的导航地标,关键是名称清楚。
试着用自己的话回答

面试官还会怎么问?

面包屑适合 nav 吗?

适合,它帮助用户在站点层级中导航,通常给它明确的名称。

分页按钮能放 nav 吗?

前后页链接形成导航集合时可以;纯本页状态按钮则不一定。

aria-label 必须写吗?

只有一个清楚的导航区时不一定;多个导航区建议给出可区分名称。

从一道题,走向一组知识

把知识连起来

语义与文档

header、main、footer 各放什么?页面能有几个 main?

站点 nav 可放在页面 header,但两者语义范围不同。

语义与文档

文章卡片用 article,普通内容分区用 section 吗?

文章内的 article 或 section 可以包含局部目录导航。

参考资料

  • <nav> HTML navigation section element

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 页面的三种导航链接
  3. nav 标记重要导航集合
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑