nav标签是HTML5中专用于定义主要导航链接区域的语义化元素，应包裹核心页面链接、避免混入非导航内容，配合aria-label等属性提升可访问性，并确保键盘操作与视觉焦点支持。
nav 标签是 HTML5 中语义化程度很高的元素，专用于定义页面中主要的导航链接区域。正确使用它，不仅能提升代码可读性与维护性，还能显著增强屏幕阅读器对导航结构的理解，帮助视障用户快速定位和跳转到主导航。
用 nav 包裹真正意义上的主导航链接
确保 nav 内部只包含指向站内核心页面（如首页、产品、关于我们、联系）的链接，避免混入搜索框、登录按钮、广告或次要操作项。例如：
添加 aria-label 或 aria-labelledby 提升语义明确性
多个 nav 元素共存时（如页眉导航 + 侧边栏导航 + 页脚导航），必须为每个提供唯一标识。推荐优先使用 aria-label，简洁直接：
-
<nav aria-label="主导航"></nav>—— 适用于无可见标题的主导航 -
<h2 id="footer-nav">快捷链接</h2> <nav aria-labelledby="footer-nav"></nav>—— 适用于有可见标题的页脚导航
避免嵌套 nav 或滥用 nav
一个页面通常只需 1–2 个 nav：顶部主导航 + 页脚辅助导航。以下情况不应使用 nav：
- 面包屑导航（应使用
<ol role="navigation" aria-label="当前位置"></ol>或<nav aria-label="位置"></nav>，但需谨慎评估是否真属“主要导航”） - 文章内部目录（更适合
<section aria-labelledby="toc-title"></section>+<h2 id="toc-title">目录</h2>） - 分页控件（建议用
<nav aria-label="文章分页"></nav>是合理用法，但需确保是整站级分页而非单篇文章内跳转）
配合 CSS 和键盘焦点确保可操作性
语义标签只是起点，还需保障实际可用性：
- 确保所有导航链接支持键盘 Tab 切换，并有清晰的
:focus样式 - 下拉菜单需用
role="menu"、role="menuitem"等 ARIA 属性补充（注意：仅当原生语义不足时才添加，优先用语义化 HTML） - 避免用
display: none隐藏导航项——改用clip-path或position: absolute; left: -9999px以兼顾屏幕阅读器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
