<header> 无效果因仅是语义容器，默认无样式；必须配 heading（如<h1>）保障可访问性；仅容介绍/导航内容，不可嵌套或置于<head>中。
为什么直接用 <header> 却没效果？
因为 <header> 本身只是语义容器，浏览器默认只设 display: block，不带任何样式、悬停、吸顶或响应式行为。你看到的“页眉”效果，全是 CSS 和（可选）JS 加的——比如用 position: sticky 实现吸顶，用 display: flex 排列 logo 和导航，用媒体查询折叠菜单。
常见错误现象：<header><nav><ul><li>首页</li></ul></nav></header> 在无 CSS 时就是一串垂直堆叠的纯文本；屏幕阅读器会读出“header”，但若里面没有 <h1>，它就不知道这是谁的页眉。
<header> 必须包含 <h1> 吗？
是的，语义上必须——至少一个 heading 元素（<h1>–<h6>），否则 <header> 失去可访问性价值。空的 <header> 或仅含 <nav> 和 <img> 的写法，等于告诉辅助技术“这儿有个页眉”，却没提供任何上下文。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 页面级页眉：推荐用
<h1>表示网站名称，如<h1>我的网站</h1> - 文章内部页眉：可用
<h2>表示文章标题，配合作者、时间等 - 不能只靠
aria-label或role="banner"替代 heading——它们是补救手段，不是语义替代
哪些内容能放进 <header>？哪些不能？
<header> 只收「介绍性或导航性」内容，且必须与当前作用域匹配。它不是“顶部视觉区域”的通用盒子。
- ✅ 可以放：
<h1>、<nav>（主导航）、<img alt="logo">、<form>（搜索框）、登录入口链接 - ❌ 禁止塞入：轮播图、广告 banner、通知横幅、弹窗触发按钮——这些属于独立功能区块，该用
<section>或<aside> - ⚠️ 容易踩坑：把整个顶部视觉区（含 banner + 导航 + 搜索）全包进一个
<header>，结果语义过载，outline 工具显示多个嵌套<header>却无对应 heading 支撑
<header> 能嵌套或放在 <head> 里吗？
不能嵌套，也不能放进 <head>。HTML 解析器会直接忽略或报错。
-
<header>必须在<body>内，可作为顶级元素（页面页眉），也可嵌套在<article>或<section>中（局部页眉） - 一个页面可以有多个
<header>，但每个都应有明确归属——比如<article><header><h2>标题</h2></header></article> - 绝对不要写成
<head><header>...</header></head>，<head>只放元信息，不渲染，也不接受语义化结构标签
最常被忽略的一点：语义完整性不是“用了标签就完事”，而是每个 <header> 都得回答一个问题——“它在介绍谁？”答案必须落在 heading 元素里。没这个，其他所有布局、交互、SEO 优化都是在沙上筑塔。
