HTML中<header>是原生语义化标签，用于标识页头内容，需成对使用、可嵌套、无默认样式，须配合CSS实现视觉效果，IE8及以下需兼容处理。
HTML里怎么写header元素
直接用 <header> 标签，不是 class 名也不是 JS 变量，是原生语义化标签。它本身不带样式，也不自动吸顶或固定，只是告诉浏览器“这部分是页头内容”。
- 必须成对出现：
<header>...</header>，不能自闭合 - 可以嵌套在
<body>里，也能放在<article>或<section>内部（表示该区块自己的头部） - 一个页面可以有多个
<header>，但通常主页面只用一个顶层的
header里该放什么内容
语义上，<header> 适合放导航、logo、搜索框、站点标题这些「页面入口级」内容，不是所有顶部元素都该塞进去。
- 推荐放：
<h1>（页面主标题）、<nav>、<img>（logo）、<form>（站内搜索） - 不推荐放：广告横幅、轮播图（它们属于内容区域，更适合
<section>或<main>）、用户登录状态栏（除非是全局导航的一部分） - 注意：不要因为“看起来在顶部”就硬套
<header>—— 语义错位会导致屏幕阅读器误读、SEO 权重分散
为什么加了header没效果
常见现象是写了 <header><h1>首页</h1></header>，但文字没变大、没居中、没背景色——因为 HTML 标签本身不带默认样式，<header> 尤其干净。
- 浏览器对
<header>几乎零样式：无 margin、无 padding、无 background、display 是 block，仅此而已 - 要视觉效果，必须配 CSS，比如：
header { background: #333; color: white; padding: 1rem; } - 如果用了 CSS 仍不生效，先检查是否被其他规则覆盖（用开发者工具看 computed styles），再确认是否漏写了
<style>或外链 CSS 文件路径错误
和header相关的兼容性坑
<header> 是 HTML5 标签，IE8 及更早版本不认识，会当作未知标签处理——不渲染、不继承样式、JS 获取不到。
立即学习“前端免费学习笔记（深入）”；
- 老项目需兼容 IE8？得用
document.createElement('header')激活（现代框架如 React/Vue 已内置处理） - 更简单做法：改用
<div class="header">，靠 class 控制样式和 JS 选择器，语义弱一点但稳 - 别信“加个 HTML5 Shiv 就万事大吉”——有些老版 QQ 浏览器、360 极速模式仍会丢弃未声明的语义标签，得实测
真正麻烦的不是怎么写 <header>，而是想清楚它和 <nav>、<aside>、甚至 <main> 的边界在哪。写完回头读一遍结构，问问自己：“这个 header 里的东西，换到另一个页面还能复用吗？” 答案常比代码更难改。
