nav标签必须包裹真实跳转链接，仅当含有效href的元素、结构合理且DOM可访问时才具语义；空导航、按钮、搜索框或动态未就绪内容均无效，须用aria-label区分多导航并避免滥用。
nav标签必须包裹真正的导航链接
它不是语义装饰品，浏览器和读屏软件会把它识别为“主要导航区域”，所以里面得是跳转用的 <a></a>，不能塞按钮、搜索框或广告位。如果只是样式上像导航栏，但实际没有跳转逻辑，用 <div role="navigation"> 更合适。
<p>常见错误：<code><nav><button>首页</button></nav> —— 这会让辅助技术误判，且不符合 W3C 对 <nav></nav> 的定义。
- 只在页面中存在多个导航区时（比如顶部主菜单 + 侧边栏目索引 + 底部相关文章），才考虑用多个
<nav></nav>，并配合aria-label区分，例如<nav aria-label="主导航"></nav> - 单页应用中，用 JavaScript 动态插入的导航链接，也要确保最终 DOM 中
<nav></nav>内有有效的<a href></a>，否则语义丢失
nav不自动提供样式，也不影响布局流
它只是个语义容器，浏览器默认只加了 display: block，不会居中、不会横向排列、不会隐藏溢出。想实现常见导航栏效果，仍要靠 CSS 控制。
典型误区：以为写了 <nav><a>首页</a><a>关于</a></nav> 就能自动横排——其实它们会垂直堆叠，和普通 <div> 一样。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>横向排列推荐用 <code>display: flex，配 flex-wrap: wrap 防止小屏换行错乱
float 布局，容易触发 BFC 和清除浮动问题nav 内链接点击热区，默认太小，建议用 CSS 设置 min-height 或 padding
SEO 和无障碍支持依赖正确嵌套与属性
搜索引擎和读屏器会结合 <nav></nav> 的位置和内容判断页面结构权重。放在 <header></header> 里比放在 <main></main> 深层嵌套更利于识别；若导航是次要的（如“本文相关链接”），应避免用 <nav></nav>，改用 <aside></aside> 或普通列表。
- 必须用
<ul><li><a></a></li></ul>结构组织多个链接，比纯<a></a>并列更符合可访问性实践 - 不要省略
<a></a>的href属性，即使指向#也要补上，否则会被读屏器跳过 - 若导航含下拉菜单，需用
aria-haspopup和aria-expanded动态控制状态，仅靠<nav></nav>标签无法表达层级
与 router-link 或前端框架组件共存时注意渲染时机
Vue 的 <router-link></router-link>、React 的 <link> 最终都会渲染成 <a></a>，可以放心包在 <nav></nav> 里。但要注意 SSR 或 hydrate 阶段是否生成了真实 href 属性——某些配置下 <router-link></router-link> 初始可能只渲染为 <span></span>，导致语义断裂。
- 检查最终 HTML 输出，确认
<nav></nav>内每个链接都有href（哪怕是空哈希） - Next.js 中使用
Link组件时，确保传入href字符串而非对象，否则可能降级为<div> <li>若导航由 CMS 动态注入 HTML 片段，需预处理，过滤掉非 <code><a></a>标签，防止污染<nav></nav>语义
