是HTML5语义化导航容器，每个独立导航区须单独包裹，内部用结构，href必填、禁用伪链接，用aria-current="page"标当前页，响应式需保留完整DOM结构。
用
不加 也能显示菜单，但搜索引擎和屏幕阅读器无法识别这是导航区域。现代 HTML5 要求把主导航逻辑包裹在 中，否则
漏掉这个属性会导致：键盘用户无法快速定位当前位置；自动化测试工具报无障碍失败；部分 SEO 工具无法识别导航上下文。
响应式折叠菜单必须保留原生 HTML 结构
移动端点开/收起只是显隐切换，不能在 JS 里动态生成或销毁 。否则 SSR 页面首屏无导航，爬虫抓不到链接，JS 失效时整个导航消失。
安全做法： 容易踩的坑： 导航栏真正难的不是样式，是结构是否经得起 JS 关闭、爬虫扫描、键盘遍历和屏幕朗读——这些都依赖最原始的 HTML 元素与属性是否到位。 立即学习“前端免费学习笔记（深入）”；
– HTML 始终包含完整导航结构
– 用 / +
– 切换按钮用 并绑定
– 点击遮罩或按 Esc 键需关闭菜单并还原焦点
– 用 （Vue）或 （React）条件渲染导航 DOM —— 首屏不可见且无 SEO
– 折叠后仍保留大段空白占位，影响滚动体验
– 没处理键盘焦点循环（Tab 进入菜单后无法自然退出）
