仅在承担页眉、区块头部等语义角色时使用，需具备引导性和上下文归属；禁止嵌套或脱离节元素；默认无样式，兼容性需注意ie9+及移动端布局问题。
<header></header> 不是用来“撑高度”或“加背景色”的，它只在内容确实承担页眉、区块头部、导航入口等语义角色时才该用。
什么时候必须用 <header></header> 而不是 <div>
<p>关键看内容是否具备「引导性」和「归属上下文」：</p>
<ul>
<li>页面顶部有 logo + 主导航 <code><nav></nav> + 搜索框 → 用 <header></header>，这是最典型场景
<article></article> 开头有标题、作者、发布时间 → 在 <article></article> 内部嵌一个 <header></header>，合法且语义清晰<div>，套 <code><header></header> 会误导辅助技术
<header></header>？不一定 —— 多个是允许的，但每个都得有明确归属（比如属于 <section></section> 或 <article></article>）
<header></header> 里能放什么、不能放什么
它接受大多数流内容，但有硬性限制：
- ✅ 允许：
<h1></h1>～<h6></h6>、<nav></nav>、<p></p>、<img>、<button></button>、<form></form> - ❌ 禁止：
<header></header>嵌套另一个<header></header>（语义重复，浏览器会忽略内层的节上下文） - ❌ 禁止：放在
<footer></footer>或<main></main>外部又没包裹节元素（如<section></section>），会导致结构断裂 - ⚠️ 注意：它不自动带 ARIA role，若内部没有可聚焦元素（比如全是
<p></p>和<img>），屏幕阅读器可能跳过；最外层页眉可手动加role="banner"
CSS 样式和兼容性常见误区
<header></header> 默认就是 display: block，但很多人误以为它自带 margin 或 padding：
- 它和
<div> 一样“干净”，所有样式必须显式定义，比如 <code>header { padding: 1rem 0; } - 现代浏览器（Chrome/Firefox/Safari/Edge）完全支持；IE9+ 能识别并解析，但不会触发 CSS 中的
header选择器 —— 需引入html5shiv或用document.createElement('header')激活 - 不要写
<header class="header"></header>这种冗余 class，标签本身已表达语义，class 只用于样式钩子（如header.site-header） - 移动端 fixed 定位的
<header></header>容易触发 iOS Safari 的滚动穿透或输入框失焦，这不是标签问题，而是布局逻辑需配合position: sticky或 JS 补偿
最容易被忽略的一点：语义化不是“加了就完事”，而是要和整体节结构（<section></section>、<article></article>、<aside></aside>）对齐。单独扔一个 <header></header> 在 底下，又不包裹任何节元素，它的语义归属就悬空了。
