怎样构建一个基础的页眉导航？Header标签定义页面头部区域-html教程-PHP中文网

本身不显示导航效果，因其仅是语义容器，浏览器默认仅设为display: block，无内置样式、悬停反馈或响应式逻辑；导航外观与交互需靠css（如flex布局、position: sticky）和js（如汉堡菜单、当前页高亮）实现。

怎样构建一个基础的页眉导航？header标签定义页面头部区域

直接用 <header></header> 包裹导航结构即可，但仅靠它不会自动产生导航样式或交互 —— 它只是语义容器，样式和行为得自己加。

为什么 `<header></header>` 本身不显示导航效果

<header></header> 是 HTML5 的语义化标签，浏览器默认只给它 display: block，没有任何内置样式、下划线、悬停反馈或响应式折叠逻辑。你看到的“页眉导航”其实是 CSS 和（可选）JavaScript 共同实现的。

纯 <header><nav><ul><li><a>首页</a></li></ul></nav></header> 在无 CSS 时就是一串垂直堆叠的文本
搜索引擎和读屏器会识别 <header></header> + <nav></nav> 组合为“主要导航区域”，这对可访问性很重要
别指望 <header></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></nav> 明确标识这是导航区块，比只用 <header></header> 更精准
aria-label 让屏幕阅读器知道这段是“主导航”，避免读成“列表”
用 <ul><li></ul> 而不是 <div> 堆砌链接，保持列表语义和默认缩进逻辑 <li>不要把 logo 或搜索框硬塞进 <code><nav></nav> —— 它们属于 <header></header> 但不属于导航，应放在 <nav></nav> 外部或用 <div role="search"> 等更合适的语义包裹 <h3>必须补上的 CSS 才算真正可用</h3> <p>没有这三类规则，用户看到的仍是垂直文字流：</p> <ul> <li>让菜单横向排列：<code>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></header> 标签职责内 —— 它需要额外的 <button></button>、aria-expanded 属性和 JS 控制 nav 的显隐，属于独立交互层。

容易被忽略的细节

很多人写完就上线，结果在实际使用中出问题：

<header></header> 不该嵌套另一个 <header></header> —— 页面只有一个主头部，子模块用 <section></section> 或 <div> <li>如果页面有多个 <code><header></header>（比如文章卡片里的标题区），需用 role="banner" 仅标记最外层那个，避免混淆辅助技术
<nav></nav> 里不要放非导航内容（如广告、登录表单），否则破坏语义，影响键盘 Tab 顺序和读屏体验
纯语义标签无法解决“点击后高亮当前页”问题 —— 那需要后端渲染 class 或前端 JS 比对 window.location.pathname 并添加 aria-current="page"

语义标签是骨架，CSS 是肌肉，JS 是神经 —— 少了哪一层，页眉导航都只是“看起来像”，而不是“真正能用”。