最易用的HTML模板导航是<nav><ul><li></li></ul></nav>结构，因其语义清晰、样式稳定、响应式可控且无需JS即可实现基础交互。
最易用的 HTML 模板导航是 <nav><ul><li><a></a></li></ul></nav> 结构，配合 display: flex 和 gap 布局 —— 它语义清晰、样式稳定、响应式可控，且不依赖 JS 就能完成基础交互。
为什么必须用 <nav><ul><li></li></ul></nav> 而不是 <nav><a></a><a></a></nav>
单层平铺看似省事，但会丢掉关键语义和结构约束：
-
<ul><li>明确告诉读屏器“这是可顺序遍历的菜单项列表”，而并排<a>会被读作“链接、链接、链接”，无上下文 - 浏览器强制校验
<ul>的子元素只能是<li>，写<div>或直接放<a>会导致 DOM 自动修正或渲染异常 - CSS 里想用
nav ul:focus-within控制下拉展开、或li:last-child微调间距，没<ul><li>就完全失效 - 将来加二级菜单时，只需在某个
<li>里嵌一个<ul class="submenu">，结构自然延展，不用重写整块 HTML
display: flex 布局中 gap 和 margin 怎么选
用 gap 是当前最干净的方案，但要注意兼容边界：
-
gap必须作用于nav ul（即 Flex 容器），不能写在nav或a上；写错位置会无效 - IE11 及更旧版本不支持
gap，若需兼容，得退回到margin-right，并额外处理最后一个<li>：li:last-child { margin-right: 0; } - 别在
nav ul上设white-space: nowrap——小屏下会强制横向滚动，正确做法是配合flex-wrap: wrap+ 媒体查询缩字体/减内边距 -
justify-content: space-around比space-between更适合文字长度不均的导航项，两端留白更自然，避免“首页”和“联系我们”间距悬殊
当前页高亮为什么不能靠 HTML 硬编码 class="active"
硬编码 class="active" 在每个页面里，等于把路径逻辑写死，维护成本爆炸：
立即学习“前端免费学习笔记（深入）”；
- 路径尾部斜杠不一致（
/aboutvs/about/）就会匹配失败 - 哈希路由（如
#!/projects）或前端路由（Vue Router / React Router）下，window.location.pathname根本不更新，只靠页面加载时判断会永远停留在初始状态 - 本地开发用
file://协议时，window.location.origin为空，直接拼接href === origin + pathname会恒为 false - 推荐最小可行 JS（放在
</body>前）：document.querySelectorAll('nav a').forEach(link => { const currentPath = window.location.pathname.replace(/\/$/, ''); const linkPath = new URL(link.href).pathname.replace(/\/$/, ''); if (linkPath === currentPath) link.classList.add('active'); });注意：若用前端框架，应监听路由变化事件，而非仅执行一次
移动端下拉菜单必须用 <button> 而不是 <div> 或 <a>
CSS :hover 在触摸设备上基本不可靠，且缺乏语义和键盘支持：
-
<button type="button" aria-expanded="false">产品</button>才能被键盘用户用 Tab 切入、Enter/Space 触发，<div>默认不可聚焦 - 下拉菜单容器必须加
role="menu"，每个子项加role="menuitem"，否则读屏器无法识别菜单结构 - JS 切换时，必须同步更新
aria-expanded和aria-hidden，漏掉任一属性都会导致辅助技术播报混乱 - 点击热区必须 ≥44×44px，仅靠
font-size不够，要配padding: 12px 20px或min-height: 44px；用 Chrome DevTools 的设备模拟器测真机尺寸，别信 CSS 像素值
真正难的不是让导航栏“显示出来”，而是确保它在键盘焦点、触摸点击、读屏播报、路径跳转、小屏折叠所有场景下都行为一致 —— 这些细节一旦漏掉，修复成本远高于从一开始就按规范写。
