header和footer必须是节元素的直接子元素且各限一个；复用时需为纯语义片段，禁含完整HTML结构；仅服务端包含或静态生成能保全语义，客户端JS注入和iframe会破坏结构完整性。
header 和 footer 的语义归属必须明确
它们不是视觉占位符，而是语义容器——<header></header> 必须是某个节元素（、<article></article>、<section></section> 等）的**直接子元素**，且每个作用域内只允许一个。<footer></footer> 同理。常见错误是套在无意义的 <div> 里，比如：<code><div class="wrapper"><header>...</header></div>，这会让语义降级为普通容器，屏幕阅读器可能忽略或误读。
全局页眉应作为 的第一个子元素；某篇文章的标题+作者信息，则应放在该 <article></article> 内部的 <header></header> 中，不能塞进全局 <header></header>。
复用时 header/footer 文件内容不能含完整 HTML 结构
被复用的 header.html 和 footer.html 必须是纯片段：只保留语义化内容，**不包含 、、 标签**，也不应有重复的 <script></script> 或内联样式块（除非明确需要隔离）。否则在构建或服务端包含时容易引发嵌套冲突或解析失败。
例如正确写法：
立即学习“前端免费学习笔记（深入）”；
<header class="site-header"> <h1>Cate Cinema</h1> <nav><ul><li><a href="/">首页</a></li></ul></nav> </header>
错误写法（会导致结构混乱）：
<!DOCTYPE html> <html><body> <header>...</header> </body></html>
不同复用方案对语义完整性的实际影响
客户端 JS 加载（如 fetch('header.html').then(...)）会在 DOM 渲染后才插入内容，此时 <header></header> 不是 的直系子元素，而是动态插入的后代节点——语义结构在初始 HTML 中缺失，SEO 和无障碍访问会受损。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
真正保全语义的方案只有两类：
- 服务端包含（SSI），如
<!--#includefile="header.html"-->，服务器返回的是已拼接好的完整 HTML，<header></header>天然是子元素 - 静态站点生成器（如 Hugo）或构建工具（Vite + html-plugin），在构建阶段将片段注入模板，输出的最终 HTML 符合语义层级
iframe 方案看似简单，但 <iframe></iframe> 内容与主页面 DOM 隔离，<header></header> 在 iframe 内部虽合法，但对外层页面结构无贡献，无法参与全局大纲（outline）生成。
嵌套与共存的边界在哪
<header></header> 和 <footer></footer> 可以多层共存，但禁止互相嵌套。例如：<header><footer></footer></header> 是无效 HTML，验证器会警告，浏览器通常忽略内部 <footer></footer> 的语义。
合法嵌套只发生在不同节上下文中：
-
下有一个全局<header></header>和一个全局<footer></footer> -
<article></article>内可再有自己的<header></header>（含标题/时间）和<footer></footer>（含标签/编辑时间） - 两者平级，各自服务最近的父节元素——关键判断永远是：“它属于谁”，而不是“它看起来在哪”
最容易被忽略的是：复用模板时，如果多个页面共用同一份 header.html，但其中 <h1></h1> 内容固定（如“首页”），那在非首页的页面中，这个 <h1></h1> 就违背了语义——它应该反映当前页面主题，而非模板默认值。动态内容需由复用机制本身支持变量替换（如 Hugo 的 {{ .Title }}），否则语义完整性就断在了模板层。
