header必须包含heading（h1–h6）才构成合法可访问顶栏，顶级header至少需一个h1作为页面大纲起点；推荐写法为我的博客...，无heading则语义断裂。

header 必须包裹 heading（h1–h6）才能构成合法、可访问的顶栏结构，光有 logo 或导航不算数。

必须包含一个 heading 元素

顶级 <header></header> 至少要有一个 <h1></h1>，它是整页内容大纲的起点。屏幕阅读器靠它识别页面主题，搜索引擎也据此判断核心语义。

• ✅ 推荐写法：<header><h1>我的博客</h1> <nav>...</nav></header>
• ❌ 错误写法：<header><div class="logo"></div> <nav>...</nav></header>（无 heading，语义断裂）
• ⚠️ 注意：<hgroup></hgroup> 已废弃，副标题请用 <p class="subtitle"></p> 或 <h2></h2> 等配合样式实现

常见搭配组合

标准顶栏不是只放标题，而是把介绍性内容打包进同一个 <header></header>：标题是主干，其他是支撑信息。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 站点标识类：<h1></h1> + 带 alt 的 logo 图片 + 主导航 <nav></nav>
• 搜索功能类：在 <header></header> 内加 <form role="search"></form>，不塞进 <nav></nav>
• 多级标题场景：若需“主站名 + 栏目名”，可用 <h1>技术站</h1> <h2>前端专栏</h2>，避免嵌套或滥用 <hgroup></hgroup>

别把它当样式盒子用

<header></header> 默认没有 margin、padding、背景色或定位效果——它只是语义容器。所有视觉表现都要靠 CSS 显式定义。

• 吸顶效果？用 position: sticky; top: 0;，不是 <header></header> 自带的
• 横向排列 logo 和导航？用 display: flex 或 grid，不是标签本身的功能
• 移动端 fixed 定位易出滚动穿透问题，尤其 iOS Safari，建议优先用 sticky，慎用 fixed

嵌套与层级要清晰

一个页面可以有多个 <header></header>，但每个都得对应明确的语义范围。

• 顶层 <header></header> 在 下，服务整页
• 每篇 <article></article> 可自带 <header></header>，含该文的 <h2></h2> + 作者 + 时间
• 每个 <section></section> 开头若有标题和导语，也可用 <header></header> 包裹
• ❌ 禁止：<header><header>...</header></header>（嵌套无效）或把 <header></header> 放进 <footer></footer>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！