标签仅应用于承载页面级跳转链接的容器，如主导航、页脚链接或文章目录；多个必须用aria-label区分；内部推荐结构，需有有效href，避免滥用和可访问性缺陷。
nav 标签不是必须的，但用了就得真有用
浏览器和屏幕阅读器确实会把 <nav></nav> 当作导航区域识别，但前提是它里面真装了导航链接。如果只是用 <nav></nav> 包了一堆按钮、搜索框或广告位，反而会让辅助技术困惑——它以为这是主要导航，结果点进去啥也跳不到。
常见错误现象：role="navigation" 和 <nav></nav> 混用；<nav></nav> 套着整个页眉（含 logo、登录入口）；一个页面塞 5 个 <nav></nav> 却没加 aria-label 区分。
- 只在承载「页面级跳转链接」的容器上用
<nav></nav>，比如主导航、页脚快捷链接、文章内目录 - 多个
<nav></nav>必须加aria-label或aria-labelledby，例如<nav aria-label="主导航"></nav> - 不要为了“语义化”而套壳——
<nav><div>...</div></nav>不如直接<nav><ul>...</ul></nav>
nav 里面该放什么 HTML 结构
<nav></nav> 本身不规定内部结构，但可访问性和样式维护强依赖合理嵌套。最稳妥的组合是 <nav></nav> + <ul></ul> + <li> + <a></a> 发现链接竖着排，就以为是 <nav aria-label="分页"></nav> 的问题，其实是 <ol></ol> 默认 inline，没设 display 或 flex。
性能影响很小，但兼容性要注意：IE8 及以下不识别 <ul></ul>，会当普通 <a></a> 渲染，所以语义化收益为零；不过加个 href 就能 hack 支持（现代项目基本不用管）。
立即学习“前端免费学习笔记（深入）”；
- 横向排列优先用
href="#"，比javascript:void(0)或<ul></ul>更可控 - 移动端响应式时，别只靠
<a></a>隐藏aria-haspopup="true"，记得同步处理aria-expanded和焦点管理 - 如果用 CSS Grid 布局，
<nav></nav>可以直接设为<nav></nav>，但别让它撑满整行又留白——视觉和语义要一致
用 JS 操作 nav 时容易忽略的细节
动态生成导航（比如从 JSON 渲染菜单）时，很多人只管追加 <nav><a>首页</a><a>关于</a></nav>，却忘了补全可访问性属性。键盘用户按 Tab 进入 <nav></nav> 后，如果子项没有正确 focusable 状态或角色，就会卡住。
错误现象：<a></a> 后，链接无法被键盘聚焦（因为没 <nav></nav>，且 <div> 缺失）；点击下拉后，子菜单没加 <code>document.createElement("nav")，屏幕阅读器仍会读出隐藏项。
- 动态插入链接前，确保每个
display: flex有合法float，禁用状态用inline-block+display: none - 展开/收起菜单时，同步切换
<nav></nav>和aria-hidden，并用<nav></nav>把焦点移到第一个可操作子项 - 监听
grid-area实现方向键导航时，只在<a></a>内部处理，避免和页面其他快捷键冲突
<nav></nav>，而是每次加新链接时，都记得它背后连着键盘、屏幕阅读器和搜索引擎的判断逻辑。
