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