用 iframe 最简单，但要注意跨域和样式隔离
直接在当前 HTML 里嵌另一个 HTML 文件，iframe 是唯一原生支持的方式。它不依赖 JS，兼容性好，连 IE9 都能用。
常见错误是写成 <iframe src="header.html"></iframe> 后发现页面空白——大概率是路径错了，或者被浏览器同源策略拦了（比如本地双击打开的 file:// 协议下，多数现代浏览器会拒绝加载本地 iframe）。
- 确保服务端运行（如用
python -m http.server或 VS Code Live Server），别双击 HTML 打开 -
iframe默认有边框和滚动条，加style="border:none; width:100%; height:200px;"控制外观 - 子页面里的相对路径（如
./css/style.css）是相对于子页面自身位置解析的，不是父页面 - 父子页面跨域时，JS 无法互相访问
window.document，CSS 也无法穿透作用域
用 JavaScript 动态 fetch + innerHTML 替换内容块
适合想把另一个 HTML 的某段结构（比如导航栏）“拼”进当前页，且需要控制插入位置或做简单预处理。
典型错误是没等 DOM 加载完就执行 fetch，或把整个 HTML 字符串直接塞进 body 导致重复 结构炸掉页面。
立即学习“前端免费学习笔记（深入）”；
- 只取目标文件中的
内容（或某个<div id="nav">），别整个文件硬塞<li>用 <code>document.addEventListener('DOMContentLoaded', ...)确保 DOM 就绪再操作 fetch('header.html').then(r => r.text()).then(html => { document.getElementById('header-slot').innerHTML = html; })- 注意：动态插入的 script 标签默认不执行，要手动
eval或重建<script></script>节点（一般建议把逻辑抽到外部 JS） - Node.js（Express）常用
res.sendFile()配合模板引擎（如 EJS 的） - PHP 直接
include 'header.html';（注意扩展名不影响，只要内容是纯 HTML） - Nginx 开启 SSI：配置
ssi on;，HTML 中写<!--# include file="header.html" --> - 所有方案都要求被引入文件是静态资源路径可访问的，不能是跨域 URL
- 开发阶段方便，上线后灵活性归零
- HTML 字符串里写
<script></script>会被当文本，不会执行 - 路径是模块路径，不是运行时 HTTP 路径，本地开发服务器若没配 alias 容易 404
服务端 include（如 Node.js / PHP / Nginx SSI）才是真正“合并”
如果项目跑在服务端环境，这才是最干净的引入方式：HTML 还没发给浏览器，就已经拼好了。
前端开发者容易忽略这点，硬扛 JS 方案，结果 SEO 友好性差、首屏白屏久、CSP 策略还可能报错。
为什么不用 import 或 require 引入 HTML？
ES Module 的 import 只认 JS、JSON、CSS（需插件），浏览器原生不支持 import './header.html'。Webpack/Vite 等打包工具可以配 loader 把 HTML 当字符串导入，但本质还是编译期替换，不是运行时加载。
有人试过 import html from './header.html?raw'，这确实可行，但只适用于构建流程固定、HTML 内容不常变的场景。一旦 header.html 改了，必须重新构建才能生效，没法热更新，也不适合 CMS 或用户可编辑内容。
实际选哪种，取决于你有没有服务端、要不要 SEO、内容是否动态。没服务端又必须 SEO，老老实实用 iframe；能控服务端，优先服务端 include；只有纯静态托管（如 GitHub Pages），再考虑 fetch 方案——但得自己处理加载状态和失败降级。
