是html5语义化导航元素，必须包裹带有效href的标签，多个导航需用aria-label区分用途，禁止嵌套或滥用，应与合理配合使用。
<nav></nav> 标签是 HTML5 提供的语义化元素，专门用于标记页面中主要的导航链接区域。它不是装饰性容器，而是向浏览器、搜索引擎和辅助技术（如屏幕阅读器）传达“这里是一组真实跳转链接”的结构信号。
导航区域必须包含真实可访问的链接
<nav></nav> 只有在包裹带有效 href 属性的 @#@#@#@#@#@#@#@#@#@0
<button onclick="goTo('about')">关于我们</button> @#@#@#@#@#@#@#@#@#@1（空链接）、@#@#@#@#@#@#@#@#@#@2（伪跳转）这些无效写法会让屏幕阅读器跳过整个 <nav></nav> 区域，SEO 也无法识别导航意图。
单页应用（SPA）中，若用 React Router 或 Vue Router 的 <link> 组件，需确保最终渲染出带 href 的原生 <a></a> 节点，且 DOM 加载完成时即存在，不能靠异步请求后补内容。
多个导航区域要明确区分用途
页面可能有多个导航功能，但不能都叫“导航”。必须用 aria-label 告诉用户每个 <nav></nav> 的作用：
- 主导航菜单：
<nav aria-label="主导航"></nav> - 页脚快捷入口：
<nav aria-label="页脚导航"></nav> - 文档内目录（如技术文档侧边栏）：
<nav aria-label="本文目录"></nav>
面包屑（Breadcrumb）不推荐用 <nav></nav>，更适合用 <ol class="breadcrumb" aria-label="当前位置"></ol>；分页器可放入 <nav></nav>，但需标注 aria-label="文章分页"。
不要嵌套或滥用 <nav></nav> 标签
-
<nav></nav>不能嵌套：<nav><nav>...</nav></nav>违反 HTML 规范，解析器会自动修正，语义丢失。 - 不要把所有链接塞进
<nav></nav>：文章内引用、工具栏按钮、登录入口、分享链接等，都不属于“页面级导航”，应使用<div>、<code><ul></ul>或其他合适标签。 - 初始渲染为空的
<nav></nav>（比如等 API 返回菜单再填充），等于没有导航——DOM 就绪前无链接节点，辅助技术直接忽略。
搭配 <header></header> 使用更符合结构逻辑
主导航通常位于页面顶部，建议与 <header></header> 结合：
<header><h1>我的网站</h1>
<nav aria-label="主导航"><ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/contact">联系</a></li>
</ul></nav></header>
这样既满足语义层级，也便于样式控制和响应式处理。
不复杂但容易忽略。
