必须用包裹导航条且链接为，因其提供语义信号，保障seo、键盘导航与读屏支持；错误使用或滥用会破坏可用性；flex布局优于float/inline-block；高亮需js动态判断路径；移动端汉堡菜单须配全aria属性。
不用 JavaScript 也能做出能点、能高亮、不闪退的导航条，但必须用 <nav></nav> 包裹，且链接得是 <a></a> —— 否则浏览器根本不认它是可交互区域，点击没反应、悬停无效、高亮失效全由此起。
为什么必须用 <nav></nav> 而不是 <div class="nav">
<p>它不是视觉装饰，而是语义信号：告诉浏览器、搜索引擎和读屏软件“这是主导航区”。不用它，SEO 权重下降，键盘 Tab 焦点顺序错乱，视障用户无法用快捷键跳转到导航，等于主动放弃可用性底线。</p>
<p>常见错误现象：</p>
<ul>
<li>
<code><div class="nav">
<a>首页</a><a>关于</a>
</div> —— 读屏器播报“一段文字”，不是“导航区域”
<nav></nav>，包含搜索框、登录按钮、广告位 —— 语义混杂，辅助工具直接忽略或报错正确做法：
- 一个页面最多 2–3 个
<nav></nav>：顶部主菜单、页脚快捷链接、面包屑（后者需加aria-label="当前位置"） - 子菜单用
<ul></ul>，别嵌套<nav></nav>；纯锚点跳转区用<section></section>更合适
display: flex 是现代导航布局的默认起点
老式 float: left 或 display: inline-block 在响应式场景下极易崩：父容器塌陷、换行间隙不可控、小屏溢出、垂直对齐偏移。Flex 布局天然规避这些，且 IE11+ 已全覆盖。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
关键实操点：
- 给
<nav></nav>的直接子容器（如<ul></ul>）设display: flex，不是给<nav></nav>自身 - 用
gap: 1.5rem控制项间距，比margin-right干净得多；IE11 不支持gap时，退回到margin-right并手动清除最后一项 - 避免在
<nav></nav>上设white-space: nowrap—— 小屏会强制横向滚动，改用flex-wrap: wrap+@media自然折行
居中推荐 justify-content: center 或 space-around（文字长度不均时更均衡），别依赖 text-align: center + inline-block。
当前页高亮必须靠 JS 动态判断路径
HTML 本身无法感知“我在哪一页”，硬编码 class="active" 到所有页面里是维护噩梦：路径微调（/about vs /about/）、哈希路由（#!/projects）、本地开发（file:// 协议）都会导致匹配失败。
简单可靠的前端判断逻辑（放
