nav 标签是 html5 中专用于主要导航区块的语义化元素，应仅包裹首页、产品等一级结构链接，避免用于分页、面包屑等非主导航内容，并需配合 aria-label、aria-current="page" 等提升可访问性。
nav 标签是 HTML5 中语义化标记导航区域的核心元素，它不只是一个容器，更是向浏览器、屏幕阅读器和搜索引擎传递“此处为关键导航路径”的明确信号。用得准、配得当，才能真正提升可访问性与结构清晰度。
语义准确：只包裹真正主导航内容
nav 标签应仅用于页面中**主要的、重复出现的导航区块**，比如顶部主导航栏、侧边全局菜单、底部快捷入口等。它不适用于面包屑、分页、相关文章链接、页内锚点跳转（如“回到顶部”）或纯装饰性按钮。
- ✅ 正确：首页、产品、关于、联系——这些构成站点一级结构的链接组
- ❌ 错误：文章末尾的“上一篇/下一篇”、评论区的“回复”按钮、搜索框提交按钮
结构简洁：避免嵌套过深或混杂非导航元素
nav 内部推荐使用语义清晰的列表结构（ul + li + a），保持层级扁平。不建议在 nav 中塞入图标组件、广告位、搜索框、用户头像等非导航功能模块——它们应放在 header 或 aside 等更合适的语义容器中。
- 保持每个 a 链接指向独立页面或有意义的路由目标（含合理的 href 或 router-link）
- 当前激活项可用 aria-current="page" 标注，比单纯加 class 更利于读屏软件识别
- 若需下拉菜单，子菜单应作为独立逻辑单元处理（例如用 details/summary 或 aria-haspopup + aria-expanded 组合），而非强行塞进同一级 nav
可访问性优先：兼顾键盘、语音与辅助技术
nav 是屏幕阅读器默认识别的“导航地标（landmark）”，用户可通过快捷键（如 NVDA 的 D 键）直接跳转。要让它真正有用，需配合基础可访问实践：
- 为每个 nav 添加 aria-label（如
aria-label="主菜单"），尤其当页面含多个 nav 时（如顶部+底部） - 确保所有链接有足够对比度（文本与背景色比 ≥ 4.5:1），且焦点状态清晰可见
- 移动端需支持触控目标最小尺寸 ≥ 44×44px，避免小链接密集排列
响应式协同：nav 本身不负责适配，但需为适配留出空间
nav 标签不带样式，它的表现完全依赖 CSS。设计时需预设断点行为：
- 桌面端保持水平排列，支持 hover 下拉；移动端建议折叠为汉堡菜单，并用 aria-expanded 同步控制状态
- 避免在 nav 内写固定宽高或绝对定位破坏流式布局；用 flex/grid + media query 实现弹性伸缩
- 折叠后仍需保证键盘可访问性——隐藏内容不能用
display: none，而应结合 clip-path 或 visibility + aria-hidden
