<header>和<footer>是作用域绑定的语义单元，必须作为<body>、<article>、<section>等节元素的直接子元素才能生效；禁止互相嵌套，每作用域限各一个，脱离节元素或套在<div>中将导致语义失效。
<header> 和 <footer> 不是“页面顶部/底部的 div”，它们是作用域绑定的语义单元，必须嵌套在节元素（<body>、<article>、<section>）内部才能生效。
header 必须是节元素的直接子元素，否则语义丢失
浏览器不会报错，但屏幕阅读器会跳过空 <header>，Lighthouse 会提示 “Missing heading in landmark”。常见失效写法：
-
<div class="wrapper"><header></header></div>—— 外层<div>切断语义链，<header>降级为普通容器 -
<header><h1>Title</h1></header>单独放在<body>里但没被任何节元素包裹 —— 实际上它属于<body>作用域，但若<body>下还有多个<article>，这个<header>就无法明确归属 - 全局页眉（logo + 主导航）必须是
<body>的直接子元素；某篇博客自己的标题和发布时间，必须包在该<article>内部的<header>中
footer 不等于“页面最底下的版权栏”，而是区块收尾信息
<footer> 的语义是“本区块的补充性结尾内容”，不是视觉定位指令。你可以用 CSS 把它放在卡片右下角、折叠面板里，只要逻辑上属于那个父级节元素就行。
-
<footer><nav></nav></footer>—— 主导航不属于“结尾补充”，应移入<nav>或<header> -
<footer><div class="ad-banner"></div></footer>—— 广告与“收尾”无关，应改用<aside>或普通<div> - 页面级版权信息应作为
<body>的最后一个直系子元素；每篇<article>可自带<footer>，例如：<footer><p>标签:前端 | 编辑于 <time datetime="2026-06-12">2026-06-12</time></p></footer>
header 和 footer 禁止互相嵌套，这是 HTML5 结构硬约束
<header><footer></footer></header> 或 <footer><header></header></footer> 是无效结构。验证器会警告，辅助技术可能忽略内部标签，搜索引擎也可能弱化语义权重。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 二者是平级语义单元，只能各自独立嵌套在
<body>、<article>、<section>等节元素中 - 一个作用域内最多一个
<header>和一个<footer>；连续写两个<header>会让大纲混乱，影响可访问性 - 多级共存没问题：比如
<body>下有全局<header>和<footer>，其内部<article>又有自己的<header>和<footer>，互不干扰
复用 header/footer 时别用 jQuery.load() 直接加载外部 HTML
本地双击打开 HTML 文件时，file:// 协议会触发跨域错误：Access to XMLHttpRequest at 'header.html' from origin 'null' has been blocked。
- 起本地服务：用
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> 或 <footer> 之前，先问一句：“它服务谁？” —— 离最近的父节元素是谁，决定了它有没有语义、有没有价值。
