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