纯HTML无法实现响应式导航，必须依赖CSS媒体查询和:checked等状态选择器驱动显隐；<nav><ul><li>是语义强制起点，确保辅助技术识别、键盘导航正确及CSS选择器生效；移动端折叠须用<input type="checkbox">模拟开关，配合max-height过渡动画实现零JS响应式。
纯 HTML 标签本身无法实现响应式导航，必须靠 CSS 媒体查询 + 状态选择器（如 :checked）驱动显隐逻辑，JavaScript 只是可选增强项。
为什么 <nav> 加 <ul> 是强制起点
这不是“写得好看”，而是浏览器和读屏器依赖这套语义链做判断：<nav> 告诉辅助技术“这是主导航区”，<ul> 表示一组并列项（屏幕阅读器会报“共 5 个菜单项”），<li> 必须直接包裹 <a>，否则移动端 :checked ~ 或 :hover 选择器会失效。
常见错误包括：
- 用
<div class="nav">替代<nav>—— 键盘 Tab 顺序错乱、SEO 权重下降 -
<a>缺失href（比如写成<a onclick="...">）—— 屏幕阅读器跳过、无法被聚焦 -
<li>设了固定宽高 —— 小屏下文字换行或溢出，撑破布局
移动端折叠必须用 <input type="checkbox"> 而不是 JS
想不依赖 JavaScript 实现点击展开/收起，唯一可靠方案是原生表单控件模拟开关状态。JS 失效时，<div class="hamburger"> 就彻底不可点。
立即学习“前端免费学习笔记（深入）”；
关键实操点：
-
<input>必须放在<label>前，并用for关联，确保点击热区 ≥ 44px（iOS 最小触控要求） -
<ul class="nav-menu">默认设max-height: 0; overflow: hidden;—— 别用display: none，它无法触发 CSS 过渡动画 - 展开时靠
input:checked ~ .nav-menu { max-height: 300px; }控制，数值需略大于所有子项总高；别写死300px，动态增减项时容易截断 -
<ul>展开态必须加position: absolute或fixed，否则会撑开页面高度，导致滚动错位
display: flex 桌面端布局的三个易错参数
很多人写了 display: flex 却发现导航没居中、间距不均、窄屏下文字被压扁，问题往往出在参数组合上。
推荐写法与避坑点：
- 对齐用
justify-content: space-around，比space-between更稳——文字长度不均时两端留白一致，视觉不飘 - 每个
<li>加flex: 0 0 auto，禁止缩放；别设flex-shrink: 1，否则窄屏下文字被压扁甚至换行错乱 - 间距统一用
gap: 1rem，比给每个<li>加margin-right干净；IE11 不支持gap，得退回到li:not(:last-child) { margin-right: 1rem; } - 右对齐登录项，直接给对应
<li>加margin-left: auto，别用float: right或绝对定位——破坏 Flex 流
当前页高亮不能靠静态 class="active"
全页面硬编码 class="active" 是典型维护雷：路径稍有差异（/about vs /about/ vs /about#team）就失效。
前端判断必须基于 window.location.pathname，且要标准化链接路径：
const currentPath = new URL(window.location.href).pathname;
再逐个比对 <a href> 的 pathname，而非原始 href 字符串。
真正难的不是写出来，而是让下拉菜单在中英文混排、翻译后字数变化、滚动页面时都不偏移、不闪烁、不被截断——这些细节藏在 position: relative 的父 <li>、transform: translateY(100%) 替代 top: 100%、以及 iOS 上改用 position: sticky 而非 fixed 里。
