<header>是语义化标签，仅包裹logo、导航、搜索框等介绍性内容，必须含<h1>–<h6>；不可放轮播图、广告、弹窗，否则破坏可访问性与SEO。
header 不是“顶部那条横杠”的通用容器，它是语义化标签，只该包裹真正属于页眉的介绍性内容——比如 logo、主导航、搜索框；塞进轮播图或广告就破坏了结构语义，也会影响屏幕阅读器和 SEO 理解。
header 里该放什么？不该放什么？
判断标准很简单：这部分内容是否在语义上承担“引言”或“入口”角色？
- ✅ 应该放：
h1（页面主标题）、带alt的 logo 图片（链接到首页）、nav包裹的主导航菜单、form包裹的搜索框 - ❌ 绝对不放：
section或div套的轮播图、第三方广告代码、登录弹窗、通知横幅 - ⚠️ 容易混淆：文章页的
header可以包含h2+ 作者 + 发布时间，但它属于article内部，不是页面级header
滥用 header 最直接的后果是：屏幕阅读器会错误播报“页眉区域”，把广告当成网站核心入口；搜索引擎也可能弱化主标题权重。
响应式导航切换时，header 结构不能变
移动端收起菜单、桌面端展开，只是视觉变化，header 内部的 HTML 结构必须保持一致——否则辅助技术无法稳定识别。
立即学习“前端免费学习笔记（深入）”；
- 导航必须始终用
nav包裹，且加aria-label="主导航"，不能靠 JS 动态插入/删除nav标签 - 汉堡按钮（
button）要和nav有明确的aria-controls关联，例如：<button aria-controls="main-nav">+<nav id="main-nav"> - 不要用
display: none隐藏整个nav，而应结合aria-hidden="true"和inert属性控制可访问性状态
常见错误是：小屏下 JS 把 nav 从 DOM 中移除，再点击按钮才 append 进来——这会让键盘用户完全跳过导航，也打断浏览器的焦点管理。
Flexbox 布局 + 媒体查询是最稳的组合
不用 Grid，不用绝对定位，header 内部用 display: flex 配合 @media 就能覆盖 95% 场景。
- 基础布局写法：
header { display: flex; justify-content: space-between; align-items: center; } - 小屏断点建议用
@media (max-width: 768px)，而不是设备像素比或hover等不可靠特征 - logo 和 nav 默认同行，小屏时让
nav变成flex-direction: column并设position: absolute覆盖，同时保持其在 DOM 顺序中仍紧邻 header - 避免给
header设固定高度，用padding和min-height控制留白，防止文字缩放后内容被裁切
特别注意：如果用了 position: sticky，务必加 top: 0 和 z-index，否则在 iOS Safari 中可能失效；且 sticky 元素内部子元素若设了 transform，会重置粘性行为。
多级 header 嵌套的边界在哪？
一个页面可以有多个 header，但它们必须属于不同语义范围，且不能互相嵌套。
- ✅ 合法：
body > header（全站页眉） +article > header（文章标题区） +section > header（栏目导语） - ❌ 违规：
header > header（嵌套）、footer > header（位置错乱）、address > header（语义冲突） - ⚠️ 模糊地带：侧边栏
aside内的header只能放该栏目的标题，不能重复放全站 logo 或主导航
最常被忽略的是：当用 JS 动态生成区块（如卡片列表）时，每个卡片的 header 必须独立存在，不能共用一个 header 标签去循环渲染——那样会导致 DOM 结构非法，部分浏览器解析异常。
