静态HTML导航须用结构，禁用div模拟；flex布局替代float/inline-block；当前页高亮需手动写死active类；移动端折叠可用纯CSS实现，JS仅控制class切换。
静态 HTML 模板里做简洁导航，核心就一条：用 <nav></nav> + <ul></ul> + <li> + <a></a>，别绕弯。所有“看起来简洁但点不动、高亮错乱、手机上堆成一团”的问题，90% 出在结构语义错误或 CSS 布局选错上。
为什么必须用 <nav></nav> 而不是 <div class="nav">
<p>这不是“写得更规范”的问题，是浏览器和辅助工具能否识别“这是导航”的分水岭。用 <code><div>，屏幕阅读器会把它当普通区块逐字读；用 <code><nav></nav>，用户按快捷键就能直接跳转到这组链接。SEO 也会因此略加权——尤其对首页、分类页这类关键入口页。如果模板要导出给 CMS 或多人协作，<nav></nav> 还是后端渲染时自动注入 aria-current="page" 的前提。
display: flex 是唯一靠谱的横向布局方案
display: flex 是唯一靠谱的横向布局方案老式 float: left 或 display: inline-block 在模板中极易崩：空格换行产生不可控间隙，子项基线不齐，父容器塌陷还得清浮。而 display: flex 一行代码就能解决对齐、等距、居中：
-
gap: 1.5rem替代margin-right，干净且支持响应式断点调整 -
justify-content: center让菜单水平居中，不用靠父容器text-align折腾 - 移动端收起时，只需
@media (max-width: 768px) { nav { flex-direction: column; } }，无需 JS 控制显隐
注意：IE11 支持 flex，但不支持 gap；若真需兼容 IE，改用 margin-right 并给最后一个 <li> 加 margin-right: 0。
立即学习“前端免费学习笔记（深入）”；
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
当前页高亮必须手动写死 class="active"
纯静态 HTML 模板没有运行时环境，window.location.pathname 判断完全无效。常见错误是把 class="active" 写在所有页面的同一个 <a></a> 上，结果每页都高亮首页。正确做法是：
- 每个 HTML 文件里，只给指向自身的那个
<a href="/about"></a>加class="active" - CSS 里写
a.active { color: #007bff; font-weight: 600; }，别用nav a:hover冒充当前页 - 如果模板用于生成多个页面（如 Hugo/Jekyll），用模板引擎变量动态插入，例如
<a href="%7B%7B%20.Permalink%20%7D%7D" if .ispage endif>{{ .Title }}</a>
移动端折叠菜单别急着加 JS
很多模板一上来就塞 <button onclick="toggleMenu()"></button>，反而让首屏交互变重。其实纯 CSS 就能完成基础折叠：
- 桌面端：
nav ul { display: flex; } - 移动端：
@media (max-width: 768px) { nav ul { display: none; } nav.active ul { display: flex; flex-direction: column; } } - 点击区域用
<button aria-expanded="false" aria-controls="main-nav"></button>触发nav.active切换，JS 只负责 toggle class，不操作 DOM 结构
真正容易被忽略的是点击热区：图标按钮必须包裹文字或设 min-height: 44px，否则手指点不中——这不是样式问题，是可访问性硬指标。
