nav标签是HTML5中专用于定义主要导航链接区域的语义化元素，应包裹核心页面链接、避免混入非导航内容，配合aria-label等属性提升可访问性，并确保键盘操作与视觉焦点支持。
nav 标签是 HTML5 中语义化程度很高的元素，专用于定义页面中主要的导航链接区域。正确使用它，不仅能提升代码可读性与维护性，还能显著增强屏幕阅读器对导航结构的理解，帮助视障用户快速定位和跳转到主导航。
用 nav 包裹真正意义上的主导航链接
确保 nav 内部只包含指向站内核心页面（如首页、产品、关于我们、联系）的链接，避免混入搜索框、登录按钮、广告或次要操作项。例如：
添加 aria-label 或 aria-labelledby 提升语义明确性
多个 nav 元素共存时（如页眉导航 + 侧边栏导航 + 页脚导航），必须为每个提供唯一标识。推荐优先使用 aria-label，简洁直接：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
<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以兼顾屏幕阅读器
