<header>仅在包含标题或导航等语义内容时才具意义，必须包裹<h1>～<h6>才能构建结构层级，不可作为纯视觉容器或CSS布局工具使用。
<header>不是“页面最上面那块儿”的视觉占位符，它只在内容真正承担介绍性或导航性上下文时才该用——比如含<h1>～<h6>、<nav>、作者信息、发布时间等。单独一个<header>标签不产生任何语义价值，也不影响大纲生成。
header必须包裹heading才有语义意义
屏幕阅读器和搜索引擎不会因为看到<header>就自动理解这是“页眉”，它们依赖内部的标题元素建立结构层级。没有<h1>～<h6>的<header>，等于语义断裂。
- ✅ 正确：
<header><h1>技术博客</h1><nav>...</nav></header> - ❌ 错误：
<header><div class="logo"></div><div class="nav"></div></header>（无 heading，纯视觉容器） - ⚠️ 注意：
<hgroup>已被废弃，多级标题改用<h1>+<p class="subtitle">替代
多个header可以共存，但每个都得有明确归属
<header>不绑定“全站唯一”，它可以出现在<body>顶层、<article>内、<section>里——前提是它服务于该节元素的引导逻辑。
- 页面级：
<body>直系子元素，含站点 logo + 主导航 - 文章级：
<article><header><h2>标题</h2><time>2024-03-15</time></header>...</article> - ❌ 禁止嵌套：
<header><header></header></header>（浏览器会忽略内层节上下文） - ❌ 禁止越界：
<footer><header></header></footer>（语义冲突）
别拿header当CSS布局工具用
<header>默认是display: block，无 margin、无 padding、不撑高、不清浮动。把它当div用，再疯狂加position: fixed或top: 0，只会让语义和视觉脱钩。
立即学习“前端免费学习笔记（深入）”；
- 布局控制请用
<div class="site-header">+ CSS；需要语义再额外包一层<header> - 若真要用
<header>吸顶，务必检查z-index和contain: layout paint是否拖慢滚动 - 移动端 fixed 定位容易触发 iOS Safari 滚动穿透，这不是标签问题，而是需配合
position: sticky或 JS 补偿 - IE9+ 能识别
<header>，但不支持 CSS 中的header选择器——得靠html5shiv或document.createElement('header')激活
最容易被忽略的一点：语义归属必须对齐节结构
单独扔一个<header>在<body>底下，又没包裹任何节元素（如<section>、<article>），它的语义就悬空了。它不创建新节，只是为最近的节根或节元素提供上下文包装——这点不厘清，所有语义化努力都会打折扣。
