是 html5 语义化标签，表示页眉区域，用于结构描述而非样式；适用于网站 logo、导航等引导性内容，可嵌套于 等元素中，禁止嵌套自身，现代浏览器完全支持，ie9+ 可识别，需 html5shiv 兼容 ie8。
<header></header> 是 HTML5 引入的语义化标签，用来表示一个页面或某个区块的**页眉区域**。它本身不带任何默认样式或行为，纯粹用于结构描述——浏览器和辅助技术（比如读屏软件）会据此理解“这部分内容是头部导航、标题或入口信息”。
什么时候该用 <header></header>，而不是 <div>
<p>关键看内容是否承担「引导性、标识性、入口性」功能：</p>
<ul>
<li>页面顶部包含网站 logo、主导航菜单、搜索框 —— 适合用 <code><header></header>
<article></article> 内部嵌套一个 <header></header>
<div> 更合适，强行套 <code><header></header> 会误导语义
<header></header>，但每个都应有明确的归属上下文（如 <section></section> 或 <article></article>）
<header></header> 里能放什么？常见误用点
它允许包含大多数流内容（flow content），但不能嵌套另一个 <header></header> 或 <footer></footer>：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 允许：
<h1></h1>～<h6></h6>、<nav></nav>、<p></p>、<img>、<button></button> - ❌ 禁止：
<header></header>套<header></header>（嵌套页眉无意义） - ⚠️ 注意：
<header></header>不自动包含 ARIA role，如果内部没有可聚焦元素（如链接、按钮），屏幕阅读器可能不会主动播报；建议配合role="banner"（仅用于最外层页眉）或确保有导航锚点
CSS 样式和兼容性要注意什么？
<header></header> 在所有现代浏览器中完全支持，IE9+ 也能识别并正确解析，但 IE8 及更早版本会把它当普通未知标签，需要 document.createElement('header') 或引入 html5shiv 才能触发样式渲染：
- CSS 中直接写
header { }即可生效，无需额外声明 display 属性（默认是display: block） - 不要依赖
<header></header>自带 margin/padding —— 它和<div> 一样“干净”，所有样式需显式定义 <li>若用 CSS Grid/Flex 布局，<code><header></header>和<div> 行为完全一致，选哪个只影响语义，不影响布局能力 <p>真正容易被忽略的是：语义标签的价值不在视觉，而在结构表达。一个没写 <code><header></header>的页面照样能跑，但加了之后，搜索引擎更容易抓取主干导航，残障用户能更快跳转到顶部功能区——这些效果不会立刻显现，但会在特定场景里突然变得关键。
