logo 应用 包裹并嵌套带 aria-label 的链接以确保语义化与可访问性；导航须置于 中并添加 aria-label 或 aria-labelledby；dom 顺序应为 →→其他页眉内容，css 调整视觉位置不干扰语义流；响应式折叠菜单需正确使用 aria-expanded、aria-controls 和 aria-hidden。
Logo 和导航放在 <header></header> 里是合理的，但要真正实现语义化，关键在于元素的选用和层级关系是否准确反映内容意图。
Logo 应用 <h1></h1> 或带 aria-label 的链接
主站点 Logo 本质是页面最重要的标题，推荐用 <h1></h1> 包裹（尤其首页），既符合文档大纲逻辑，也利于 SEO 和屏幕阅读器识别。若 Logo 是链接，可直接在 <h1></h1> 内嵌 <a></a>：
- ✅ 推荐写法：
<h1><a href="/" aria-label="返回首页">MySite</a></h1>
- ⚠️ 避免仅用
<div> 或 <code><img>无文本替代，除非已通过aria-label或alt明确说明品牌名 - 多个层级页面中，若非首页，
<h1></h1>可改为更具体的页面标题，Logo 改用<div role="banner"> + 带 <code>aria-label的链接导航应包裹在
<nav></nav>中，并标注名称<nav></nav>是专为“主要导航区块”设计的语义标签，不能仅靠 class 名（如nav-menu）代替。建议显式添加aria-label或aria-labelledby提升可访问性：- ✅ 推荐写法：
<nav aria-label="主导航"><ul>...</ul></nav>
- ✅ 若有可见标题（如“导航菜单”），可用
aria-labelledby="nav-title" 关联 - ⚠️ 避免把次要链接（如登录、搜索）混进同一
<nav></nav>，它们更适合<aside></aside>或独立链接组
结构顺序体现内容优先级
视觉布局可能让 Logo 在右、导航在左，但 DOM 顺序应按信息重要性排列：Logo（
<h1></h1>）→ 导航（<nav></nav>）→ 其他页眉内容（如搜索框、用户入口）。CSS 可通过 Flexbox 或 Grid 调整视觉位置，不干扰语义流。- ✅ 正确 DOM 顺序：
<header><h1>...</h1> <nav>...</nav><div class="utility">...</div></header>
- ❌ 不要为了样式把
<nav> 放在 <code><h1></h1>前面，除非该导航确实比 Logo 更核心（极少见）
响应式导航需保持语义完整性
折叠菜单（hamburger）本身不破坏语义，但切换时要注意：
- 按钮需有明确
aria-expanded和aria-controls属性，指向目标<nav></nav>的 id - 隐藏状态下的
<nav></nav>不应设display: none，而用aria-hidden="true"+ 视觉隐藏技巧（如clip-path或visually-hidden类） - 展开后确保焦点能自然进入导航链接，必要时用 JavaScript 聚焦首个链接
- ✅ 推荐写法：
