应使用语义化替代，它明确标识页眉区域，提升可访问性与seo；需包含标题元素，合理嵌套，避免包裹全页内容，配合flex布局、viewport元标签等现代实践。
用 <header></header> 而不是 <div id="header">
<p>HTML5 明确提供了语义化页眉元素，<code><header></header> 不只是“看起来像页头”，它会告诉浏览器、屏幕阅读器和搜索引擎：“这部分是页面或区块的标题区域”。用 <div> 加 class 或 id 模拟页眉，等于主动放弃语义和可访问性支持。
<p>常见错误现象：<code>Element is not focusable（在键盘导航或读屏软件中跳过）、SEO 工具提示“缺少结构化头部”、Lighthouse 报告“使用非语义容器替代语义元素”。
-
<header></header> 可以嵌套在 <article></article> 或 <section></section> 内（局部页眉）
- 一个页面可以有多个
<header></header>，但每个 <header></header> 应该只包含本作用域的标题、logo、导航等，不放主内容
- 不要用
<header></header> 包裹整个页面布局（比如把 <main></main> 和 <footer></footer> 都塞进去）——它不是“页头容器”，而是“页眉内容区”
页眉里该放什么？别塞错东西
<header></header> 可以嵌套在 <article></article> 或 <section></section> 内（局部页眉）<header></header>，但每个 <header></header> 应该只包含本作用域的标题、logo、导航等，不放主内容<header></header> 包裹整个页面布局（比如把 <main></main> 和 <footer></footer> 都塞进去）——它不是“页头容器”，而是“页眉内容区”<header></header> 的核心职责是承载“识别当前上下文”的内容：比如网站名、栏目标题、搜索框、用户登录入口。它不是万能收纳盒。
使用场景差异明显：首页 <header></header> 通常含 logo + 主导航；文章页的 <article><header></header></article> 则只放 <h1></h1> 标题 + 发布时间 + 作者；仪表盘页可能还加操作按钮。
立即学习“前端免费学习笔记（深入）”；
- 必须包含至少一个标题级元素（
<h1></h1>–<h6></h6>），否则语义断裂——尤其对辅助技术用户，没<h1></h1>就像门没挂牌子 - 可以放
<nav></nav>，但别把整站导航都堆进同一个<header></header>；多级导航建议拆成独立<nav></nav>并用aria-label区分 - 避免放
<form></form>（如搜索框除外）、<button></button>等交互密集组件——它们本身没问题，但大量按钮会让页眉逻辑变重，影响首屏渲染和焦点流
CSS 控制高度/居中时，flex 布局比 float 更稳
老写法喜欢用 float: left 排 logo 和 nav，结果清浮动麻烦、响应式易塌、垂直居中靠猜行高。现代方案直接上 display: flex。
性能影响很小，但兼容性要注意：IE10+ 支持标准 flex，IE9 及以下不支持——如果还要兼容，得回退到 inline-block + vertical-align，但代码更啰嗦、间隙难控。
- 给
<header></header>设display: flex，子元素自动水平排列；用align-items: center实现垂直居中，不依赖行高或绝对定位 - logo 图片记得加
height或max-height，否则在高 DPR 屏幕下可能撑大页眉 - 别对
<header></header>直接设固定height（如height: 80px），优先用min-height+ 内边距控制，留出文字缩放或字号调整空间
移动端适配：用 viewport 元标签不是可选项
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，页眉在手机上大概率被缩成一团小字，或者横向溢出滚动——这不是 CSS 能修好的，是渲染视口根本没对齐设备物理宽度。
错误现象：页眉文字模糊、导航菜单点不中、左右滑动才能看到 logo，Lighthouse 直接标红“未设置 viewport”。
- 这个
<meta>必须放在最前面，越早声明越好；放在<header></header>里或中无效 - 不要写
user-scalable=no——禁用缩放会违反 WCAG 1.4.4（文本大小可调），也导致低视力用户无法阅读页眉文字 - 如果页眉里用了大号字体或图标，配合
text-size-adjust: 100%（加在<header></header>或html上），防止 iOS Safari 自动缩小文本保全布局
