是唯一被浏览器、搜索引擎和辅助技术一致识别为“主导航区”的 HTML5 语义元素，替换为 会导致键盘焦点跳过、读屏器误报为普通文字、SEO 权重下降、移动端导航快捷键失效； 内必须用 （规范强制、语义明确、读屏器正确播报列表项），每个 应仅含一个 （确保可聚焦、可键盘操作、支持空格/回车触发）， 必须有 href 属性（即使为 # 或 javascript:void(0)），激活页应加 aria-current="page"；布局首选 display: flex，悬停效果须作用于 而非 ，语义错误虽开发期无提示，但上线后严重损害无障碍合规性与 SEO。

必须用

包裹，且内部必须是

+

+ 结构 —— 否则不是导航，只是普通文字块。

为什么

不能替换成

浏览器和读屏软件靠标签语义识别功能区域。

是唯一被所有主流浏览器、搜索引擎、辅助技术一致识别为“主导航区”的 HTML5 元素。换成

后：

• 键盘 Tab 焦点跳过整个区域（读屏器播报“一段文字”，而非“导航区域”）
• SEO 权重下降，页面结构信号丢失
• 移动端默认不启用导航快捷键（如 VoiceOver 的“跳转到导航”指令失效）
• 同一页面若滥用多个
  （比如把搜索框、登录按钮也包进去），辅助工具可能直接忽略全部

里为什么非得用

，不能用 或

的合法子元素只有

，这是 HTML 规范强制的。浏览器会自动修正非法结构，比如把 塞进

时，可能被包裹成

...

，也可能被丢弃 —— 行为不可控。

• 语义上，
• 表示“可枚举、并列、可顺序遍历的项”，天然匹配菜单逻辑
• 屏幕阅读器读
  • 首页
  • 关于
  时，会明确播报“列表，2 项：首页、关于”；换成 就变成“首页、关于”两个孤立段落
• 每个
• 应只包一个可交互目标（通常是 ），避免混入表单控件或按钮

链接必须是 ，哪怕 href 暂时为空

导航的本质是“可跳转、可聚焦、可键盘操作”。如果用

或 冒充链接：

• Tab 键无法聚焦该区域（ 是天然可聚焦元素）
• 即使加了 onclick，也无法通过空格/回车触发（缺少原生事件支持）
• 必须写 href 属性 —— 即使是锚点跳转（href="#home"）或 JS 驱动（href="javascript:void(0)"），否则部分浏览器和读屏器拒绝将其视为可交互项
• 当前激活页建议加 aria-current="page"，例如：首页，读屏器会读出“首页，当前页面”

Flex 布局是默认起点，别碰 float 或 inline-block

现代导航布局几乎无例外地用 display: flex，原因很实际：

• float: left 会导致
  高度塌陷，必须额外清浮动（::after 或 overflow: hidden），小屏下换行不可控
• display: inline-block 在元素间产生不可控空白（来自换行符），需设 font-size: 0 或注释掉换行，维护成本高
• Flex 天然支持垂直居中、等宽分配、响应式收缩（配合 flex-wrap），且 IE11+ 全覆盖
• 悬停效果务必作用在 上，不是
• —— 否则鼠标移到文字外但仍在
• 内时，背景色误亮，体验割裂

真正容易被忽略的是：语义错误在开发期几乎不报错，但上线后会持续损害 SEO、无障碍合规性、以及老版本 iOS Safari 的焦点行为 —— 这些问题往往要等审计或用户投诉才暴露，修复成本远高于初始规范编码。