html不支持原生内容复用，需通过构建阶段（如webpack+html-webpack-plugin）或运行时（fetch+insertadjacenthtml）实现；但须解决css作用域、js初始化、seo及可访问性等关键问题。

HTML 本身不支持原生的内容复用（比如像 include 或 extends 这类服务端模板语法），直接写多个 .html 文件时，重复的导航栏、页脚或组件必须手动复制粘贴——改一处就得同步改十几份，极易出错。

为什么不能直接用 <iframe></iframe> 或 <object></object> 复用 HTML 片段

有人会试 <iframe src="header.html"></iframe>，但实际问题很多：

• <iframe></iframe> 创建独立文档上下文，CSS 和 JS 不自动继承，样式隔离导致布局错乱
• SEO 友好性差，搜索引擎通常不把 iframe 内容计入主页面权重
• 移动端缩放、滚动、焦点管理异常，尤其在 iOS Safari 上容易卡死
• <object data="footer.html"></object> 兼容性更弱，Chrome 已逐步限制非多媒体 object 加载

前端构建阶段复用：用 webpack + html-webpack-plugin 注入公共模块

这是目前最稳定、落地成本低的方案，适合已有 Webpack 构建流程的项目：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 把公共部分（如 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"></div>
• 注意：raw-loader 在 Webpack 5+ 需显式安装，且路径必须是相对 require 调用位置的

运行时复用：用 fetch() + insertAdjacentHTML() 动态加载（适合简单站点）

不依赖构建工具，但需自行处理加载顺序和错误降级：

• 在 底部加一个 <script></script>，用 fetch('nav.html') 获取内容
• 成功后调用 document.getElementById('nav-container').insertAdjacentHTML('beforeend', htmlString)
• 必须加 async 属性，否则阻塞渲染；失败时建议 fallback 到内联简易导航，避免白屏
• 所有相对路径（如 css、img）在片段中会被解析为相对于当前页面 URL，不是片段文件所在路径——这点极易踩坑

真正难的不是“怎么塞进去”，而是复用后 CSS 作用域、JS 初始化时机、以及 SEO 和可访问性是否被破坏。哪怕只复用一个页头，也要检查 <h1></h1> 是否唯一、ARIA 标签是否仍有效、焦点流是否断裂——这些细节不会报错，但会让真实用户卡住。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！