html导航栏应使用语义化包裹结构，多导航区需独立并加aria-label；响应式靠css媒体查询与flex布局，js仅增强交互，须处理焦点、aria属性及降级；移动端避免点击穿透与滚动卡顿，推荐position:sticky和transform动画。
HTML 导航栏怎么用 <nav></nav> 和语义化结构搭基础
纯 HTML 导航栏不是靠一堆 <div> 堆出来的，核心是用 <code><nav></nav> 包住一组有意义的跳转链接。浏览器和读屏软件靠这个识别“这是导航”，不是装饰。
常见错误：把整个顶部横条（含 logo、搜索框、用户头像）全塞进一个 <nav></nav> 里——其实只有链接列表才该在里面。
-
<nav></nav>内部优先用<ul></ul>+<li>+<a></a>，别用<div> 模拟列表 <li>多个导航区（比如页脚也有链接）要各自独立用 <code><nav></nav>，可加aria-label区分，例如<nav aria-label="主导航"></nav> - 不要为了“看起来像导航”而滥用
<nav></nav>；没有实际跳转功能的按钮或标签页不算导航 - 桌面端用
display: flex让<li>横排，justify-content: space-between控制间距 - 小屏下用
@media (max-width: 768px)把主菜单设为display: none，同时显示一个<button></button>触发器 - 汉堡图标建议用
<span></span>三横线 + CSS::before/::after实现，别用图片或字体图标（加载失败就变空白） - 菜单容器加
role="menu"，每个链接加role="menuitem"，展开时设aria-expanded="true"到触发按钮上 - 菜单显示后，用
focus()把焦点移到第一个<a></a>，否则键盘用户得狂按 Tab 才能进去 - 别监听
click就完事，加上keydown监听回车/空格键，不然键盘党无法操作 - 如果 JS 加载失败，确保默认状态是桌面版完整导航（即“渐进增强”，不是“优雅降级”）
- 菜单弹出层加
touch-action: manipulation，防止误触穿透到底层 - 导航栏用
position: sticky替代fixed，兼容性够（Chrome 56+/Safari 15.4+），且不会截断页面滚动 - 避免给整个
<nav></nav>加overflow: hidden，它会阻止 iOS 上的弹性滚动 - 动画用
transform: translateY()和opacity，别用top或height，否则强制重排
CSS 怎么让导航条在小屏上收成汉堡菜单
响应式导航条的关键不在 JS，而在 CSS 媒体查询 + display: none 切换 + flex 布局控制流。JS 只负责点开/收起状态，不是必须项。
容易踩的坑：只写了移动端样式，忘了给桌面端加 display: flex 或 display: inline-block，结果链接堆成一竖列。
立即学习“前端免费学习笔记（深入）”；
JavaScript 控制汉堡菜单展开时要注意什么
很多教程直接用 classList.toggle()，但没处理键盘焦点和屏幕阅读器反馈，用户按 Tab 键会跳过隐藏菜单，或者读屏器根本不知道菜单已打开。
真实场景下，用户可能不用鼠标、不支持触摸、甚至禁用 JS —— 所以 JS 只是增强，不能是唯一开关。
移动端点击穿透和滚动卡顿怎么避免
点了汉堡菜单，手指抬起来却触发了下面的链接？或者滑动页面时导航栏卡住不动？多半是 CSS 层叠或事件绑定太粗暴。
性能影响比想象中大：iOS Safari 对 position: fixed 导航栏有渲染优化限制，乱加 transform 或 will-change 反而更卡。
