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