nav标签仅在包裹至少两个有效href链接、结构清晰且dom可访问时才具语义；须用结构，禁用按钮、表单等非导航内容，多nav须用aria-label明确区分用途。
nav 标签不是加个壳就完事的语义标签，它只有包裹真实跳转链接、结构合理且 DOM 可访问时，才会被浏览器、屏幕阅读器和搜索引擎识别为“主导航”。光写 <nav></nav> 或塞个按钮进去，等于没写。
nav 里必须放什么，否则语义失效
语义不来自标签名，而来自内容是否符合“主导航”的行为预期：
- 必须包含至少两个带有效
href的链接，比如href="/about"、href="contact.html"或href="#features"；href="#"或href="javascript:void(0)"会被辅助技术跳过 - 推荐用
<ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul>结构——读屏器能报“列表，共 4 项”，平铺写<a>首页</a><a>产品</a>会被当成无序文本流 - 允许加
aria-current="page"标当前页，但不能只放这个属性而无其他可跳转链接 - 禁止混入：
<form></form>、<input>、搜索框、logo 图片、语言切换按钮、纯图标按钮（无文字）、单个“返回顶部”链接
多个 nav 共存时怎么避免语义混淆
页面可以有多个 nav，但每个都得有明确角色，否则屏幕阅读器用户听到两次“navigation”，却不知道哪个是主菜单、哪个是页脚入口：
- 必须用
aria-label显式标注用途，例如：<nav aria-label="主导航"></nav>、<nav aria-label="页脚快捷入口"></nav> - 避免泛称如
aria-label="导航"或aria-label="菜单"——这些词对读屏用户毫无区分度 - 如果有可见标题（比如
<h2 id="related-nav">相关栏目</h2>），可用aria-labelledby="related-nav"替代aria-label - 绝对不要嵌套
nav：<nav><nav></nav></nav>违反 HTML 规范，解析器会自动修正，行为不可控
单页应用（SPA）中 nav 的常见陷阱
React/Vue 项目里，nav 很容易在 DOM 就绪前为空，或 href 写错导致整页刷新：
- 前端路由（如 React Router 的
<link>）必须最终渲染出带href属性的真实<a></a>节点；不能只靠 JS 绑定 click 事件 - href 值要适配路由：写
href="/about"没问题，但别写href="about.html"——点击会触发整页刷新，破坏 SPA 状态 - 初始渲染时
nav不能为空：至少预置占位链接（如首页），再用 JS 异步替换菜单数据，避免空白期 - 验证方法：打开控制台运行
document.querySelector('nav a')，必须返回非null的可访问节点
为什么不用 div 包导航栏会出实际问题
这不是“写法偏好”，而是功能刚需。不用 nav 会导致可访问性断裂：
- 键盘用户按
Alt+F1（Chrome）或Insert+F7（NVDA）无法一键跳入导航区 - 屏幕阅读器默认跳过纯
div包裹的链接列表，用户得逐个 Tab 才能摸到第 1 个链接 - Lighthouse 会报错
Navigation landmark not present，影响无障碍评分 - 搜索引擎可能弱化该区域链接的路径权重，导致“关于我们”“服务”等页收录变慢
真正难的不是怎么写 nav，而是判断“这算不算主导航”——得站在用户第一次打开网站的角度想：他会不会主动从这里跳转到其他核心页面？如果答案是否定的，就别硬套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
