<header>本身不显示导航效果，因其仅是语义容器，浏览器默认仅设为display: block，无内置样式、悬停反馈或响应式逻辑；导航外观与交互需靠CSS（如flex布局、position: sticky）和JS（如汉堡菜单、当前页高亮）实现。
直接用 <header> 包裹导航结构即可，但仅靠它不会自动产生导航样式或交互 —— 它只是语义容器，样式和行为得自己加。
为什么 <header> 本身不显示导航效果
<header> 是 HTML5 的语义化标签，浏览器默认只给它 display: block，没有任何内置样式、下划线、悬停反馈或响应式折叠逻辑。你看到的“页眉导航”其实是 CSS 和（可选）JavaScript 共同实现的。
- 纯
<header><nav><ul><li><a>首页</a></li></ul></nav></header>在无 CSS 时就是一串垂直堆叠的文本 - 搜索引擎和读屏器会识别
<header>+<nav>组合为“主要导航区域”，这对可访问性很重要 - 别指望
<header>自动吸顶、固定高度或适配移动端 —— 这些全靠position: sticky、height、媒体查询等手动控制
最简可用的页眉导航 HTML 结构
语义清晰、兼容性好、便于后续扩展：
<header>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
</header>
-
<nav>明确标识这是导航区块，比只用<header>更精准 -
aria-label让屏幕阅读器知道这段是“主导航”，避免读成“列表” - 用
<ul><li>而不是<div>堆砌链接，保持列表语义和默认缩进逻辑 - 不要把 logo 或搜索框硬塞进
<nav>—— 它们属于<header>但不属于导航，应放在<nav>外部或用<div role="search">等更合适的语义包裹
必须补上的 CSS 才算真正可用
没有这三类规则，用户看到的仍是垂直文字流：
- 让菜单横向排列：
nav ul { display: flex; list-style: none; padding: 0; } - 去掉链接下划线并微调间距：
nav a { text-decoration: none; padding: 0.5rem 1rem; } - 基础悬停反馈：
nav a:hover { background-color: #f0f0f0; } - 如果要吸顶：
header { position: sticky; top: 0; z-index: 100; background: white; }（注意：sticky 在旧版 Safari 需加-webkit-前缀）
移动端折叠按钮（汉堡菜单）不在 <header> 标签职责内 —— 它需要额外的 <button>、aria-expanded 属性和 JS 控制 nav 的显隐，属于独立交互层。
容易被忽略的细节
很多人写完就上线，结果在实际使用中出问题：
-
<header>不该嵌套另一个<header>—— 页面只有一个主头部，子模块用<section>或<div> - 如果页面有多个
<header>（比如文章卡片里的标题区），需用role="banner"仅标记最外层那个，避免混淆辅助技术 -
<nav>里不要放非导航内容（如广告、登录表单），否则破坏语义，影响键盘 Tab 顺序和读屏体验 - 纯语义标签无法解决“点击后高亮当前页”问题 —— 那需要后端渲染 class 或前端 JS 比对
window.location.pathname并添加aria-current="page"
语义标签是骨架，CSS 是肌肉，JS 是神经 —— 少了哪一层，页眉导航都只是“看起来像”，而不是“真正能用”。
