HTML不支持原生内容复用，需通过构建阶段（如Webpack+html-webpack-plugin）或运行时（fetch+insertAdjacentHTML）实现；但须解决CSS作用域、JS初始化、SEO及可访问性等关键问题。
HTML 本身不支持原生的内容复用（比如像 include 或 extends 这类服务端模板语法），直接写多个 .html 文件时，重复的导航栏、页脚或组件必须手动复制粘贴——改一处就得同步改十几份，极易出错。
为什么不能直接用 <iframe> 或 <object> 复用 HTML 片段
有人会试 <iframe src="header.html"></iframe>，但实际问题很多：
-
<iframe>创建独立文档上下文，CSS 和 JS 不自动继承，样式隔离导致布局错乱 - SEO 友好性差，搜索引擎通常不把 iframe 内容计入主页面权重
- 移动端缩放、滚动、焦点管理异常，尤其在 iOS Safari 上容易卡死
-
<object data="footer.html">兼容性更弱，Chrome 已逐步限制非多媒体object加载
前端构建阶段复用：用 webpack + html-webpack-plugin 注入公共模块
这是目前最稳定、落地成本低的方案，适合已有 Webpack 构建流程的项目：
- 把公共部分（如
header.html）单独存为文件，用html-loader读取为字符串 - 在
html-webpack-plugin的templateParameters中注入：templateParameters: (compilation, assets, assetTags, options) => ({ header: require('raw-loader!./src/partials/header.html'), footer: require('raw-loader!./src/partials/footer.html') }) - 模板中直接插值：
<div class="layout"><%= header %><%= htmlWebpackPlugin.options.content %><%= footer %></div> - 注意：
raw-loader在 Webpack 5+ 需显式安装，且路径必须是相对require调用位置的
运行时复用：用 fetch() + insertAdjacentHTML() 动态加载（适合简单站点）
不依赖构建工具，但需自行处理加载顺序和错误降级：
立即学习“前端免费学习笔记（深入）”；
- 在
<body>底部加一个<script>，用fetch('nav.html')获取内容 - 成功后调用
document.getElementById('nav-container').insertAdjacentHTML('beforeend', htmlString) - 必须加
async属性，否则阻塞渲染；失败时建议 fallback 到内联简易导航，避免白屏 - 所有相对路径（如
css、img）在片段中会被解析为相对于当前页面 URL，不是片段文件所在路径——这点极易踩坑
真正难的不是“怎么塞进去”，而是复用后 CSS 作用域、JS 初始化时机、以及 SEO 和可访问性是否被破坏。哪怕只复用一个页头，也要检查 <h1> 是否唯一、ARIA 标签是否仍有效、焦点流是否断裂——这些细节不会报错，但会让真实用户卡住。
