是HTML5语义化导航容器，每个独立导航区须单独包裹，内部用结构，href必填、禁用伪链接，用aria-current="page"标当前页，响应式需保留完整DOM结构。
用 <nav></nav> 包裹导航结构是语义化前提
不加 <nav></nav> 也能显示菜单，但搜索引擎和屏幕阅读器无法识别这是导航区域。现代 HTML5 要求把主导航逻辑包裹在 <nav></nav> 中，否则 <ul><li><a></a></li></ul> 只是一堆普通列表链接。
常见错误：
– 把整个页眉（logo + 搜索框 + 导航）全塞进一个 <nav></nav>
– 多个导航区（如页脚“友情链接”）没各自用 <nav></nav> 包裹
正确做法：
– 每个独立导航功能单独用一个 <nav></nav>
– 主导航优先放在 <header></header> 内部
– <nav></nav> 下直接跟 <ul></ul>，不要插 <div>
<h3>
<code><ul><li><a></a></li></ul> 是最稳定兼容的导航写法
不用 Flex、不用 Grid、不用 JS，纯 HTML/CSS 就能跑通所有浏览器，包括 IE9+。关键在于结构清晰、层级扁平。
典型结构示例：
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
注意点：
– <a></a> 必须有 href，空值（href="#"）或 JavaScript 伪链接会破坏可访问性
– 不要嵌套 <div> 在 <code><li> 里干扰默认流式布局
– 下拉菜单需用子 <ul></ul>，且必须加 aria-haspopup="true" 和 aria-expanded 属性才符合无障碍规范
用 aria-current="page" 标记当前页面更可靠
比靠 CSS 类名（如 .active）判断当前页更语义、更健壮。浏览器和读屏软件能直接识别该属性含义。
立即学习“前端免费学习笔记（深入）”；
使用规则：
– 只加在当前页面对应的 <a></a> 上
– 值固定为 "page"（不是 "true" 或 "current"）
– 服务端渲染时动态注入，前端路由也建议同步更新该属性
例如用户在“关于”页，HTML 应为：<a href="/about" aria-current="page">关于</a>
漏掉这个属性会导致：键盘用户无法快速定位当前位置；自动化测试工具报无障碍失败；部分 SEO 工具无法识别导航上下文。
响应式折叠菜单必须保留原生 HTML 结构
移动端点开/收起只是显隐切换，不能在 JS 里动态生成或销毁 <ul><li></ul>。否则 SSR 页面首屏无导航，爬虫抓不到链接，JS 失效时整个导航消失。
安全做法：
– HTML 始终包含完整导航结构
– 用 display: none / max-height + overflow: hidden 控制展开状态
– 切换按钮用 <button></button> 并绑定 aria-expanded 和 aria-controls
– 点击遮罩或按 Esc 键需关闭菜单并还原焦点
容易踩的坑：
– 用 v-if（Vue）或 {show && <ul>}</ul>（React）条件渲染导航 DOM —— 首屏不可见且无 SEO
– 折叠后仍保留大段空白占位，影响滚动体验
– 没处理键盘焦点循环（Tab 进入菜单后无法自然退出）
导航栏真正难的不是样式，是结构是否经得起 JS 关闭、爬虫扫描、键盘遍历和屏幕朗读——这些都依赖最原始的 HTML 元素与属性是否到位。
