浏览器不支持原生 html include 机制，纯静态 html 无法直接复用 div；需用 javascript fetch 动态加载、构建工具编译时注入或服务端模板引擎 include 实现。
用 include 无法直接在纯 HTML 中复用 div？没错，浏览器不支持
原生 HTML 没有内置的 include 机制，直接写 <!--#include file="header.html"--> 或类似语法，在本地双击打开或静态服务器上默认不生效。这不是你配置错，是浏览器根本不管这行代码——它只对启用了 SSI（Server Side Includes）的 Apache/Nginx 有效，且需额外开启模块和设置 MIME 类型。
所以别试了，除非你明确在配好 SSI 的生产环境里部署，否则这条路走不通。
最轻量、免构建的方案：用 JavaScript 动态加载 fetch + insertAdjacentHTML
适合已有静态页面、不想引入框架、又希望快速统一 header/footer 的场景。核心逻辑是：页面加载后，用 fetch 读取一个独立的 header.html 文件内容，再插入到指定容器中。
- 把公共 div 写进单独文件，比如
nav.html，内容只保留纯 HTML 片段：<nav><a href="/home"> 首页 </a><a href="/about"> 关于 </a></nav> - 在每个页面底部加一段脚本：
<script> fetch('nav.html') .then(r => r.text()) .then(html => document.getElementById('nav-container').insertAdjacentHTML('beforeend', html)); </script> - 对应页面中预留挂载点：
<div id="nav-container"></div> - 注意路径是相对当前 HTML 的；如果用
file://协议（双击打开），fetch会因跨域被浏览器拦截，必须起一个本地服务（如npx serve或 VS Code Live Server）
Webpack/Vite 等构建工具里，用 html-webpack-plugin 或 vite-plugin-html 注入
如果你项目已用构建工具，这是更可靠、支持编译时校验的方式。它不是运行时请求，而是打包阶段就把内容“塞进去”，无网络依赖、无 CSP 风险。
立即学习 “ 前端免费学习笔记（深入）”；
- 以 Vite 为例，装
vite-plugin-html后，在vite.config.ts里写：import {injectHtml} from 'vite-plugin-html' export default defineConfig({plugins: [injectHtml({ injectData: { nav: '<nav>……</nav>'} })] }) - 然后在
index.html里用占位（插件会替换） - 优势：支持模板变量、可复用 JSON 数据、能做条件注入（比如不同环境注入不同 div）
- 坑点：注入的是字符串，不是 DOM 节点，如果里面含
<script></script>，不会自动执行；需要手动eval或动态创建 script 标签（不推荐）
服务端渲染（SSR）或 CMS 场景下，优先用模板引擎的 include 或 partial
如果你用 Express + EJS、Nuxt、Next、Hugo、Jekyll 等，这才是正解。它们在生成 HTML 时就拼好了，最终发给浏览器的就是完整结构，没运行时开销，SEO 友好，也不怕 JS 被禁用。
- EJS 示例：
- Hugo 示例：
{{partial "header.html" .}} - 关键区别：这些
include是服务端执行的，和 HTML 原生注释里的#include不是一回事，别混淆 - 容易忽略的一点：路径解析规则各引擎不同，EJS 是相对于
views目录，Hugo 是相对于layouts/partials/，写错就静默失败，不报错
实际选哪条路，取决于你有没有服务端、是否用构建工具、以及是否允许 JS 加载延迟显示。没有银弹，但硬要本地纯 HTML 实现，fetch 方案最直接——只是得记得，所有页面都要加那几行脚本，且不能离线裸跑。
