如何在 HTML 中制作页眉
用 <header> 元素包住页面顶部的内容（标志、网站名称、主菜单）。它是一个没有默认外观的块级盒子，几行 CSS 就能把它变成一个顶栏：
标志上的 margin-inline-end: auto 把菜单和按钮推到顶栏的另一端。删掉 <style> 元素，它仍然是一个页眉：让它成为页眉的是这个标签，而不是深色背景。
header、head 和 h1 的区别
这三个名字听起来很像，作用却各不相同：
| 元素 | 位置 | 是否可见 | 数量 |
|---|---|---|---|
<head> | 直接位于 <html> 内，在 <body> 之前 | 不可见：包含 <title>、<meta>、<link> | 只有一个 |
<header> | 位于 <body> 内 | 可见：页面或区块的开头内容 | 任意多个 |
<h1> 至 <h6> | <body> 内的任意位置 | 可见：一个标题 | 任意多个 |
下面的 <head> 设置了浏览器在标签页上显示的页面标题。预览中你能看到的一切都来自 <body>：
页眉里通常有一个标题，但不是必须的；标题外面也不需要包一层页眉。
文章中的页眉
<header> 介绍的是离它最近的文章或区块，而不只是整个页面。在博客文章列表中，每篇文章都有自己的页眉，这既合法又常见：
对屏幕阅读器来说，只有页面级的页眉（不在 article、aside、main、nav 或 section 里面的那个）才会成为 banner 地标。文章的页眉只是普通分组，所以不会出现好几个 banner。
吸顶页眉
position: sticky 让页眉停留在顶部，而它下面的内容照常滚动。在下面的方框里滚动试试：
让它生效的细节有三个：top: 0（没有偏移量，sticky 不起作用）、背景色（否则下面的行会透出来），以及 z-index，让定位的内容不会盖在它上面。在真实页面中，滚动的盒子就是页面本身，所以页眉直接放在 <body> 里。
使用 position: fixed 的页眉也会固定不动，但它会脱离页面流，内容会滑到它下面，需要在顶部加内边距。sticky 则会在布局中保留自己的空间。
页眉里能放什么
页眉几乎可以包含任何内容：标题、标志图片、<nav>、搜索表单、按钮。它不能包含另一个 <header> 或 <footer>，也不能放在 <footer>、<address> 或另一个 <header> 里面。
<header>
<a href="/"><img src="logo.svg" alt="Acme home"></a>
<nav aria-label="Main">...</nav>
<form role="search">...</form>
</header>
当标志是指向首页的链接时，它的 alt 文字应该说明链接去往哪里（“Acme home”），因为屏幕阅读器朗读的就是这段文字。
常见错误
- 把
<header>和<head>搞混。 元数据放在<head>中；可见内容永远不放在那里。 - 给每个标题都套上
<header>。 单独一个标题不需要页眉包装。有一组开头内容时才用<header>。 - 吸顶页眉没有背景。 页面文字会在滚动时透过它显示出来。请设置
background。 - sticky 不起作用。 设置了
overflow: hidden或overflow: auto的祖先元素会成为 sticky 的滚动盒子，于是页眉只会在那个盒子里吸附（或者根本不吸附）。检查一下祖先元素。 - 把网站菜单放在页眉里的
<div>中。 请用<nav>，让屏幕阅读器用户可以直接跳转到它。
常见问题
HTML 中的 header 标签是什么？
<header> 是一个用于介绍性内容的语义元素：页面顶部的网站标志和菜单，或者文章开头的标题和作者署名。它是一个普通的块级盒子，没有默认样式。
HTML 中的 head 和 header 有什么区别？
<head> 是文档中不可见的部分，包含 <title>、<meta> 标签和样式表链接，而且只有一个。<header> 是 <body> 中的可见内容，一个页面可以有多个。
一个页面可以有多个 header 元素吗？
可以。页面通常有一个网站页眉，每个 <article> 或 <section> 也可以有自己的 <header>，用来放标题和元信息。只有不在 article、aside、main、nav 或 section 里面的页眉，才会被屏幕阅读器当作页面的 banner。
nav 应该放在 header 里面吗？
可以放，当主菜单位于页面顶部时，通常就是这么做的。把 <nav> 放在 <header> 外面也完全合法；按你的布局来选择即可。
怎样让页眉在滚动时停留在顶部？
给它设置 position: sticky; top: 0;，再加上背景色和 z-index，让内容从它下面滚过。只有当页眉的父元素比页眉高时，sticky 才会生效；如果某个祖先元素设置了 overflow: hidden，它就无法吸附在页面顶部。
