响应式导航栏的标志必须用<nav>元素，因其语义明确，被屏幕阅读器、SEO及浏览器（如Safari“跳转到导航”）识别为导航区域；错误做法是将logo、搜索框等非导航内容混入<nav>，应仅包裹真正起页面跳转作用的链接集合，并为多个<nav>添加唯一aria-label。
响应式导航栏的标志该用什么HTML元素
用 <nav>，不是 <div> 或 <header>。它语义明确，对屏幕阅读器、SEO 和浏览器内置导航识别都关键——比如 Safari 的“跳转到导航”快捷键就只认 <nav>。
常见错误是把整个页头塞进 <nav>，结果把 logo、搜索框也标成“导航”，反而干扰辅助技术。实际只包裹真正起导航作用的链接集合：
<nav aria-label="主导航">
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
移动端汉堡按钮要不要放 <nav> 里面
要，但得配合 JavaScript 控制显隐，且必须保持语义完整。折叠状态时，<nav> 仍需包含全部导航项，不能只留按钮。
- 按钮本身用
<button>，带aria-expanded和aria-controls属性 -
<nav>的id必须和aria-controls值一致 - 不要用
display: none隐藏整个<nav>，改用visibility: hidden+height: 0+overflow: hidden，否则屏幕阅读器会跳过内容
响应式切换时 class 名怎么命名才不容易乱
别用 mobile-menu、desktop-nav 这类带设备假设的名——设备尺寸会变，用户缩放、横竖屏切换都会让“mobile”失效。优先用行为或状态描述：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
is-open表示当前展开（而非show-mobile） - 用
has-dropdown标记含下拉的项（而非dropdown-item） - 媒体查询里直接写
@media (max-width: 768px)，别依赖 JS 注入 class 切换断点
这样 CSS 和 JS 关注的是“状态”，不是“设备”，后期加平板支持或深色模式扩展更稳。
为什么加了 aria-label 还被 Lighthouse 报“导航缺少可访问性标签”
因为 <nav> 没有唯一标识，或者多个 <nav> 共用同一个 aria-label。Lighthouse 要求每个导航区域语义独立。
- 主站导航用
aria-label="主导航" - 页脚链接组用
aria-label="页脚导航" - 如果只有唯一导航，可用
aria-labelledby指向页面内已有标题（如<h2 id="main-nav-title">网站导航</h2>），比重复写 label 更可靠
最常被忽略的是：JS 动态插入的导航节点，容易漏掉 aria-label，尤其从模板渲染时——得在插入 DOM 后立刻补上，不能依赖初始 HTML。
