原生html无法直接include页眉页脚，因其标准不支持类似php的include或js的import语法；浏览器加载单个html文件时不会主动解析插入其他片段，所有复用需借助构建工具（如eleventy、hugo）预编译拼接，或谨慎使用底部注入的js字符串方案。
纯静态 HTML 网站里反复粘贴同一段 <header></header> 或 <footer></footer>，不是“写得快”，是埋雷——下次改导航，你得手动开 37 个文件挨个找、挨个替。
为什么原生 HTML 无法直接 include 页眉页脚
HTML 标准本身不支持类似 PHP 的 include 或 JS 的 import 语法。浏览器加载单个 HTML 文件时，不会主动解析并插入其他 HTML 片段。所有“复用”都是开发者自己想办法绕过去的结果，不是语言原生能力。
常见错误现象：
– 直接复制粘贴 <nav>…</nav> 到每个页面
– 用 JS 动态 fetch 后 innerHTML 插入，但 SEO 友好性差、首屏白屏明显
– 误以为 <iframe></iframe> 是解法，结果导致样式隔离、跳转异常、无障碍支持断裂
- 原生 HTML5 没有
<include></include>标签（别信某些过时教程） -
<object></object>和<embed></embed>在现代语义化和可访问性要求下基本弃用 - 服务端 SSI（Server-Side Includes）虽可用，但依赖 Apache/Nginx 配置，静态托管平台（如 GitHub Pages、Vercel static）默认不启用
用 build 工具做预编译拼接（最稳妥的落地方式）
核心思路：开发时写碎片（header.html、footer.html），构建时自动合并成完整 HTML。不依赖运行时 JS，不影响 SEO，也不增加 HTTP 请求。
典型工具链选择：
-
eleventy（推荐）：零配置即可识别_includes/目录，用{% include "header.njk" %}写模板，输出纯静态 HTML -
Hugo：用{{ partial "header.html" . }}，适合已有 Markdown 内容迁移 -
webpack + html-webpack-plugin：需配html-loader和raw-loader，适合已用 webpack 的前端项目
关键注意点：
– 所有 include 路径必须是构建时可解析的相对路径，不能是运行时 fetch('/header.html')
– 不要试图在 .html 文件里直接写模板语法（如 {% include %}），它不会被浏览器执行，只对构建工具生效
– 构建后检查生成的 HTML 源码，确认片段确实已内联，而非留下未处理的模板标记
轻量级方案：用 JS 加载但规避首屏问题
如果项目实在无法引入构建流程（比如临时维护一个老站点），JS 方案不是不能用，但必须解决两个硬伤：白屏、SEO。
- 把
<header></header>写在 HTML 底部（
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
