如何将div嵌入所有HTML页面

浏览器原生不支持HTML include机制，因此在纯静态页面中复用div（如页头页脚）无法直接通过类似``实现；文章系统梳理了三种主流可行方案：最轻量的是JavaScript动态加载（fetch + insertAdjacentHTML），适合无构建流程的静态站点，但需本地服务支持且依赖JS执行；其次是构建工具（如Vite、Webpack）在编译时注入HTML片段，可靠、无运行时请求、支持模板逻辑，但需配套工程化环境；最后是服务端模板引擎（如EJS、Hugo、Next.js）的include/partial机制，真正实现服务端拼接、SEO友好、零JS依赖，适合有后端或SSG场景；选择取决于你的技术栈和部署约束——没有万能解法，但明确知道每种方案的适用边界与坑点，才能避免踩空。

用 include 无法直接在纯 HTML 中复用 div？没错，浏览器不支持

原生 HTML 没有内置的 include 机制，直接写 或类似语法，在本地双击打开或静态服务器上默认不生效。这不是你配置错，是浏览器根本不管这行代码——它只对启用了 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>

• 对应页面中预留挂载点：
• 注意路径是相对当前 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 里用 <%= nav %> 占位（插件会替换）
• 优势：支持模板变量、可复用 JSON 数据、能做条件注入（比如不同环境注入不同 div）
• 坑点：注入的是字符串，不是 DOM 节点，如果里面含