标签仅在包含真实 href 链接、结构合理且 DOM 可访问时才具语义化作用；空导航、伪链接、嵌套或动态未就绪的 均无效，须用 aria-label 区分多导航并避免滥用。
<nav></nav> 标签不是“写了就语义化”，它只在满足真实跳转、结构合理、DOM 可访问时才生效。光套个标签没用，浏览器和屏幕阅读器会直接忽略空的或伪链接的 <nav></nav>。
nav 里必须放真实 <a></a> 链接，不能只有 <button></button> 或 JS 跳转
常见错误是把导航写成：<nav><button onclick="goTo('about')">关于</button></nav>——这不算语义化导航。屏幕阅读器无法识别按钮为“可跳转链接”，SEO 也不计入导航权重。
- 必须用
<a href="/about">关于</a>这类带有效href的原生链接 - 空链接
<a href="#"></a>或<a href="javascript:void(0)"></a>同样无效，会被辅助技术跳过 - 单页应用（SPA）中，若用前端路由（如 React Router 的
<link>），需确保其最终渲染出带href属性的真实<a></a>节点，且 DOM 加载后即存在
多个 <nav></nav> 必须用 aria-label 区分，否则语义混淆
页面有顶部主导航 + 页脚快捷链接 + 面包屑时，全塞进一个 <nav></nav> 或不加区分地写多个，会导致屏幕阅读器用户无法分辨用途。比如说出“导航”两次，却不知道哪个是主菜单、哪个是页脚。
- 主导航建议：
<nav aria-label="主导航"></nav> - 页脚链接组：
<nav aria-label="页脚导航"></nav> - 面包屑不推荐用
<nav></nav>，更合适的是<ol class="breadcrumb"></ol>+aria-label="当前位置" - 绝对不要写
<nav><nav></nav></nav>嵌套，HTML 规范禁止嵌套
动态渲染的 <nav></nav> 必须等 DOM 就绪再挂载节点
Vue/React 组件中常见问题：初始渲染时 <nav></nav> 内为空，靠异步请求拉取菜单数据后再 v-for 或 .map() 渲染。结果是 DOM 加载完成时 <nav></nav> 里没有可访问的 <a></a>，屏幕阅读器直接跳过该区域。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：服务端渲染（SSR）或静态生成（SSG）确保首屏 HTML 已含完整链接
- 客户端渲染（CSR）时，至少预置占位链接（如
<a href="/home">首页</a>），再用 JS 替换内容，避免空白期 - 可用
document.querySelector('nav a')在控制台验证是否真有可访问链接节点
别把所有链接都往 <nav></nav> 里塞
<nav></nav> 是“主要导航链接集合”，不是“所有链接容器”。滥用反而稀释语义价值，让关键导航被淹没。
- 适合放进
<nav></nav>：主导航菜单（首页/产品/定价/联系）、文档侧边目录、分页器（<a href="/page/2">下一页</a>） - 不适合：文章内链（如“参见参考文献”）、工具栏按钮（编辑/分享/打印）、登录/注册入口（属于功能操作，非页面跳转导航）
- 面包屑、分页、相关文章推荐，优先考虑用
<ol></ol>+aria-label，而非硬套<nav></nav>
最容易被忽略的点是：语义化不靠标签名决定，而靠它在 DOM 中的**实际状态**——有没有真实链接、是否可被脚本和辅助技术即时读取、是否符合用户对“导航”的行为预期。写完记得用 Chrome 的 Lighthouse 检查“Accessibility”项，或打开 NVDA/Firefox + VoiceOver 实测朗读效果。
