必须用 因其是 html5 明确规定的语义化导航标签，浏览器、搜索引擎和读屏器依赖该标签识别导航区域；若用 ，将导致 tab 顺序错乱、seo 权重下降、屏幕阅读器忽略该区域，严重损害可访问性与可用性。
必须用 <nav></nav>，不是“可以不用”；当前页高亮必须靠 JS 判断路径，硬编码 class="active" 会崩。
为什么非得用 <nav></nav> 而不是 <div class="nav">
<p>浏览器、搜索引擎、读屏器靠标签语义识别“这是导航”，<code><nav></nav> 是 HTML5 明确规定的功能标签，不是视觉装饰。写成 <div class="nav"> 看起来一样，但实际后果包括：
<ul>
<li>键盘 Tab 顺序可能错乱（辅助技术无法跳过或定位该区域）</li>
<li>SEO 权重下降（爬虫不认为这是导航链接集合）</li>
<li>屏幕阅读器直接忽略整个区域，用户听不到“主导航”提示</li>
</ul>
<p>常见错误：把搜索框、登录按钮塞进同一个 <code><nav></nav>——它们属于 <search></search> 或 <form></form>，语义混杂会导致播报混乱；一个页面堆 5 个 <nav></nav>——建议控制在 2–3 个（主导航 + 页脚链接组 + 面包屑），再多就该用 aria-label 显式区分。
<ul><li><a></a></li></ul> 是语义最优结构，别用 <div><a> 拼凑
<p>菜单本质是“一组并列的导航项”，<code><ul></ul> 天然表达这种无序集合关系，比 <div> 更准确。浏览器默认对 <code><li> 做合理排列，CSS 控制也更干净：
- 清除
list-style-type 和 padding/margin 即可归零起点，无需额外重置
-
<li> 是天然的点击区域容器，display: block 在 <a></a> 上就能撑满，点击热区更大
- 嵌套下拉菜单时，
<ul><li><ul></ul></li></ul> 层级清晰，ARIA 属性（如 aria-haspopup）更容易绑定
<ul><li><a></a></li></ul> 是语义最优结构，别用 <div><a> 拼凑
<p>菜单本质是“一组并列的导航项”，<code><ul></ul> 天然表达这种无序集合关系，比 <div> 更准确。浏览器默认对 <code><li> 做合理排列，CSS 控制也更干净：
- 清除
list-style-type和padding/margin即可归零起点，无需额外重置 -
<li>是天然的点击区域容器，display: block在<a></a>上就能撑满，点击热区更大 - 嵌套下拉菜单时，
<ul><li><ul></ul></li></ul>层级清晰，ARIA 属性（如aria-haspopup）更容易绑定
用 <div><a> 虽然自由，但等于放弃语义和可访问性基础，后期加键盘导航、焦点管理、屏幕阅读支持成本翻倍。
<h3>当前页高亮不能靠服务端硬写 <code>class="active"
HTML 本身无法感知 URL 路径变化，所有“静态写死 active”的方案都会在以下场景失效：
- 路径末尾带斜杠（
/aboutvs/about/） - 哈希路由（
#!/projects）或 History API 动态更新 - 本地开发用
file://协议时window.location.origin为空
前端简单判断逻辑（建议放
