HTML头部导航无响应式能力，需CSS媒体查询与JavaScript协同实现：语义化<nav>标签不带样式逻辑，必须通过display: none隐藏菜单、JS切换is-open类及同步aria-expanded属性，并处理ESC键、点击外部等交互细节。
HTML 头部导航本身不自带响应式能力，<nav>、<ul>、<li> 这些标签只是语义容器，真正让菜单“在小屏上收起成汉堡按钮”的，是 CSS 媒体查询 + JavaScript 控制类名切换 —— 别指望光靠改 HTML 标签就能实现响应式。
为什么 <nav> 不能直接响应式？
<nav> 是语义化标签，告诉浏览器“这是导航区域”，但不带任何样式或交互逻辑。它和 <div> 在渲染行为上完全一致，除非你用 CSS 或 JS 主动干预，否则它永远是横向铺开、溢出屏幕、在手机上堆成一团。
- 浏览器默认对
<nav>不做布局限制，它不会自动换行或隐藏子项 - 移动端视口宽度变化时，HTML 标签本身不会监听
window.innerWidth或触发重排 - 所谓“响应式导航”，本质是：CSS 控制显示/隐藏 + JS 绑定点击事件 + 可访问性（
aria-expanded、aria-controls）补全
必须写的三块基础 HTML 结构
响应式菜单的 HTML 骨架有固定模式，漏掉任意一块都会导致可访问性失效或 JS 控制失灵：
- 一个带
id的<nav>容器，比如<nav id="main-nav"> - 一个触发按钮（汉堡图标），需含
aria-controls="menu-list"和aria-expanded="false" - 一个
<ul>菜单列表，id必须和按钮的aria-controls值一致，例如<ul id="menu-list">
示例片段：
立即学习“前端免费学习笔记（深入）”；
<nav id="main-nav">
<button aria-controls="menu-list" aria-expanded="false">☰</button>
<ul id="menu-list">
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
display: none 和 visibility: hidden 别混用
在小屏下隐藏菜单时，必须用 display: none，而不是 visibility: hidden 或 opacity: 0 —— 后两者仍占用 DOM 流式空间，且屏幕阅读器可能继续朗读内容。
-
display: none：元素彻底从渲染树移除，不占空间，不被 AT（辅助技术）读取 -
visibility: hidden：元素还在布局流中，只是不可见；AT 仍可能将其纳入导航顺序 - 推荐写法：
@media (max-width: 768px) { #menu-list { display: none; } }
JavaScript 切换只改一个 class 就够了
别在 JS 里反复操作 style.display 或直接增删 aria-expanded 属性 —— 容易遗漏同步、难维护。统一用一个开关类名（如 is-open），CSS 控制所有状态：
- JS 只负责
document.getElementById('toggle-btn').classList.toggle('is-open') - CSS 写：
.is-open #menu-list { display: block; }和.is-open button[aria-expanded] { aria-expanded: "true"; }（注意：实际需用 JS 同步 aria 属性，CSS 无法设置 aria） - 真正要 JS 同步的只有
aria-expanded布尔值，其他视觉状态全交给 class 控制
容易被忽略的是：用户按 ESC 键关闭菜单、点击外部区域收起菜单、以及窗口 resize 后状态重置 —— 这些不是“锦上添花”，而是影响真实使用的关键路径。
