iframe最快但有跨域和样式隔离问题；服务端SSI适合Nginx/Apache静态部署；Webpack构建合并最工程化；手动拼接仅限一次性快照；所有方案均不支持file://协议。
用 iframe 最快，但有跨域和样式隔离问题
直接在 index.html 里嵌入另一个 HTML 文件，iframe 是最省事的方案，浏览器原生支持，不用构建工具或服务端配合。
常见写法：
<iframe src="header.html" width="100%" height="60px" frameborder="0"></iframe>
- 如果
header.html和index.html不同源（比如本地双击打开，协议是file://），Chrome 会直接拒绝加载，报错Blocked a frame with origin "null" from accessing a cross-origin frame -
iframe内容默认独立渲染，外部 CSS 不会穿透进去，JS 也无法直接操作其 DOM（除非同源且显式访问contentDocument） - 移动端容易出现滚动条错位、高度自适应困难，需额外 JS 脚本监听
load后重设高度
服务端 includes（如 Nginx SSI）适合静态部署场景
如果你用的是 Nginx 或 Apache，且能控制服务器配置，开启 SSI（Server Side Includes）比前端拼接更干净，文件仍是物理分离的，但响应时已合并。
Nginx 配置片段示例：
location / {<br> ssi on;<br> ssi_silent_errors off;<br>}然后在 index.html 里写：<!--#include file="nav.html" -->
立即学习“前端免费学习笔记（深入）”；
- 必须确保
index.html响应头包含Content-Type: text/html，且后缀为.shtml或 Nginx 显式匹配html类型启用 SSI - 本地双击打开无效——SSI 完全依赖 Web 服务器解析，
file://协议下所有<!--#include-->注释都会被原样输出 - 不支持传参或条件 include，纯静态文本拼接，适合页眉页脚这类固定内容
构建时用 html-webpack-plugin + html-loader 合并（推荐给现代前端项目）
如果你项目已用 Webpack（比如 Vue CLI、Create React App 自定义配置），这是最可控的方式：构建阶段把 header.html 和 footer.html 当作模块引入，最终打包进单个 index.html。
关键配置：
new HtmlWebpackPlugin({<br> template: 'src/index.html'<br>})并在 src/index.html 中：<div id="app"></div><br><%= require('html-loader!./header.html').default %>
- 需要安装
html-loader并在module.rules中配置test: /\.html$/，否则require('*.html')会报错 -
html-loader默认会把img、link中的相对路径转成模块引用，可能导致图片路径错乱，建议加选项{ sources: false }关闭自动处理 - 无法在浏览器中直接预览效果，必须运行
npm run build或webpack serve才能看到合并结果
本地开发想免服务？用 curl 或 cat 手动拼接（仅限一次性生成）
纯命令行快速生成一个合并后的 index.html，适合发版前检查或生成静态快照，不用于日常开发。
Linux/macOS：
cat header.html index_body.html footer.html > merged.htmlWindows PowerShell：
Get-Content header.html, index_body.html, footer.html | Set-Content merged.html
- 注意三者编码必须一致（推荐 UTF-8 无 BOM），否则合并后可能出现乱码
-
<head>里重复的<meta>、<title>或<script>会被简单叠加，可能引发冲突 - 不会解析 HTML 结构，只是字符串拼接——如果
header.html以</body>结尾而footer.html以<body>开头，结果就非法
iframe 最轻量但限制最多，Webpack 方案最工程化但有学习成本。别在 file:// 下试 SSI 或 Webpack —— 它们根本不会生效。 
