header 和 footer 必须作为节元素（如 body、article、section）的直接子元素使用，否则语义失效；全局页眉页脚应置于 body 的首尾直系位置，各节内 header/footer 须一一对应且功能明确，避免嵌套、混用或脱离节结构。
header 和 footer 必须作为节元素的直接子元素
脱离 <body>、<article> 或 <section> 单独使用 <header> 或 <footer>，语义就失效了。浏览器不会报错，但 Lighthouse 会提示 “Missing landmark”、“No heading in header”，屏幕阅读器可能跳过它们。
常见错误写法：
-
<div class="wrapper"><header>...</header></div>—— 外层<div>切断语义链，<header>降级为普通容器 -
<header><footer></footer></header>—— 互相嵌套违反 HTML5 结构规范，验证器警告，辅助技术无法正确解析 -
<body><header></header><div><header></header></div></body>—— 第二个<header>不属于任何节元素，归属模糊
全局页眉页脚要放在 <body> 的第一和最后一个直系子元素位置
全站 logo、主导航、版权信息这些“页面级”内容，必须是 <body> 的直接子元素，且顺序明确：第一个是 <header>，最后一个是 <footer>。
这样做才能被搜索引擎和辅助工具识别为“站点级导航”和“站点级结尾”。其他位置（比如塞进 <main> 里）会被视为内容干扰项。
立即学习“前端免费学习笔记（深入）”；
示例结构：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<body>
<header>
<h1>My Site</h1>
<nav><ul><li><a href="/">Home</a></li></ul></nav>
</header>
<main>
<article>
<header><h2>Post Title</h2></header>
<p>Content...</p>
<footer><p>Tags: HTML | Published <time datetime="2026-08-01">Aug 1</time></p></footer>
</article>
</main>
<footer><p>© 2026 My Site. All rights reserved.</p></footer>
</body>
每个 <article> 或 <section> 可自带 header/footer，但不能混用功能
<header> 是“介绍性内容”，<footer> 是“本区块的补充性结尾内容”，不是视觉定位指令。你可以用 CSS 把它放到卡片右下角，只要逻辑上属于那个父级节元素就行。
容易踩的坑：
-
<footer><nav></nav></footer>—— 主导航不属于“结尾补充”，应移入<nav>或<header> -
<footer><div class="ad-banner"></div></footer>—— 广告与“收尾”无关，改用<aside>或普通<div> - 在
<article>里写两个<header>—— 每个节元素内最多一个<header>和一个<footer>，否则大纲混乱
复用 header/footer 时别用 jQuery.load() 直接加载外部 HTML
本地双击打开 HTML 文件时，file:// 协议会触发跨域错误：Access to XMLHttpRequest at 'header.html' from origin 'null'。这不是代码写错了，是协议限制。
可行方案：
- 起本地服务：用
python3 -m http.server或 VS Code Live Server 启动，.load()才能正常工作 - 构建时注入：Webpack +
html-webpack-plugin，或 Eleventy/Hugo 在打包阶段 inline 内容 - 服务端 includes：Nginx 的
include指令、Apache 的 SSI（<!--#include virtual="header.html" -->） - 避免用
<iframe>：高度自适应麻烦、焦点管理复杂、无障碍支持弱，仅适合纯静态版权条
真正难的不是怎么写标签，而是判断“这个 header 属于谁”——它得锚定在一个明确的节元素上，而不是为了对齐或 padding 硬加一层。语义一旦松动，后续 SEO 和可访问性补救成本远高于初始结构调整。
