HTML页眉应使用<header>而非<head>标签，因<head>仅存放元信息且不渲染，而<header>是语义化页面顶部区域的容器，须置于<body>内并合理嵌套结构化内容。
用 <header> 标签定义页眉，不是 <head>
很多人搜“HTML页眉”却写成 <head>，结果样式不生效、SEO 也不认——<head> 是文档元信息容器（放 <title>、<meta>、<link>），完全不渲染在页面上；真正表示“页面顶部视觉区域”的语义化标签是 <header>。
常见错误现象：
– 页面顶部导航栏用 <div class="header"> 写，CSS 能显示但屏幕阅读器无法识别结构
– 把 <header> 套在 <head> 里，浏览器直接忽略或报解析警告
-
<header>必须放在<body>内，可嵌套在<article>或<section>中（比如每篇文章自己的小标题区） - 一个页面可以有多个
<header>，但通常只用一个作为主文档页眉 - 不要为了兼容 IE8 及更早版本强行不用——这些浏览器本就不支持语义化标签，需靠
document.createElement("header")补丁，现代项目基本无需考虑
页眉内容该放什么？别塞满导航和 logo 就完事
语义上，<header> 应包含介绍性内容：站点标识、主导航、搜索框、登录入口等。但容易踩的坑是把所有顶部元素都往里堆，比如广告 banner、轮播图、通知条——它们不属于“文档头部”，更适合用 <section> 或 <aside>。
- 推荐结构：
<header><h1>站点名</h1><nav>...</nav></header></li> <li>如果页眉含搜索框，用 <code><form>
包裹<input type="search">，比纯<input>更语义准确 - 避免在
<header>里放<h2>～<h6>作为主标题——主标题应为<h1>，且全站唯一（除非是文章内嵌<header>）
CSS 定位页眉时，position: sticky 比 fixed 更稳妥
想让页眉随滚动始终可见？直接上 position: fixed 很容易导致内容被遮挡、页面高度塌陷、打印样式错乱。而 position: sticky 是专为此类场景设计的，它本质是“相对定位 + 触发临界点后固定”，行为更可控。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
top值（如top: 0），否则不触发粘性效果 - 父容器不能有
overflow: hidden或transform，否则会截断粘性行为 - 移动端 Safari 对
sticky支持良好，但旧版 Android Webview（≤4.4）不支持，需加-webkit-sticky前缀 - 若需兼容极老环境，可用 IntersectionObserver 监听滚动做降级，但多数项目已无需
SEO 和无障碍访问依赖正确语义，不是光靠 CSS 显隐
搜索引擎和读屏软件靠 HTML 结构理解页面逻辑。仅用 class="header" + CSS 显示，它们会当成普通 <div>；而 <header> 自带隐含语义权重，能提升结构化数据识别率。
- 确保
<header>内至少有一个标题级元素（<h1>～<h6>），否则部分读屏器会跳过整个区域 - 导航链接用
<nav>包裹，并加aria-label="主导航"（尤其当页面有多个<nav>时） - 避免用
display: none隐藏页眉内容——这会让辅助技术彻底忽略；要用visibility: hidden或aria-hidden="true"配合逻辑控制
页眉看似简单，但语义错位、定位滥用、可访问性遗漏这三点，往往到上线后才暴露——特别是多端适配和 SEO 收录阶段。
