最易用的html模板导航是结构，因其语义清晰、样式稳定、响应式可控且无需js即可实现基础交互。
最易用的 HTML 模板导航是 <nav><ul><li><a></a></li></ul></nav> 结构，配合 display: flex 和 gap 布局 —— 它语义清晰、样式稳定、响应式可控，且不依赖 JS 就能完成基础交互。
为什么必须用 <nav><ul><li></ul></nav> 而不是 <nav><a></a><a></a></nav>
单层平铺看似省事，但会丢掉关键语义和结构约束：
-
<ul><li></ul>明确告诉读屏器“这是可顺序遍历的菜单项列表”，而并排<a></a>会被读作“链接、链接、链接”，无上下文 - 浏览器强制校验
<ul></ul>的子元素只能是<li>，写<div> 或直接放 <code><a></a>会导致 DOM 自动修正或渲染异常 - CSS 里想用
nav ul:focus-within控制下拉展开、或li:last-child微调间距，没<ul><li></ul>就完全失效 - 将来加二级菜单时，只需在某个
<li>里嵌一个<ul class="submenu"></ul>，结构自然延展，不用重写整块 HTML -
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更适合文字长度不均的导航项，两端留白更自然，避免“首页”和“联系我们”间距悬殊 - 路径尾部斜杠不一致（
/aboutvs/about/）就会匹配失败 - 哈希路由（如
#!/projects）或前端路由（Vue Router / React Router）下，window.location.pathname根本不更新，只靠页面加载时判断会永远停留在初始状态 - 本地开发用
file://协议时，window.location.origin为空，直接拼接href === origin + pathname会恒为 false - 推荐最小可行 JS（放在
display: flex 布局中 gap 和 margin 怎么选
用 gap 是当前最干净的方案，但要注意兼容边界：
当前页高亮为什么不能靠 HTML 硬编码 class="active"
硬编码 class="active" 在每个页面里，等于把路径逻辑写死，维护成本爆炸：
