可在 HTML 中嵌入外部内容的方法有五种：一、iframe 标签直接加载；二、JavaScript 动态 fetch 注入；三、已废弃的 HTML Imports；四、服务器端包含（SSI）；五、构建工具静态合并。
如果您希望在当前 HTML 页面中嵌入外部 HTML 内容以实现模块化开发，则需要借助特定技术手段完成页面片段的加载与整合。以下是实现此目标的多种方法：
一、使用 iframe 标签嵌入外部 HTML
iframe 标签可在当前页面中创建一个独立的嵌套浏览上下文，直接加载并显示外部 HTML 文件的内容，无需额外脚本支持，兼容性高且实现简单。
1、在当前 HTML 文件中定位需嵌入的位置，插入 iframe 元素。
2、设置 iframe 的 src 属性为外部 HTML 文件的相对或绝对路径，例如：src=”header.html“。
立即学习 “ 前端免费学习笔记（深入）”；
3、通过 width 和 height 属性控制显示区域尺寸，或使用 CSS 进一步调整样式。
4、添加 sandbox 属性以限制外部页面执行脚本或访问父页面 DOM，提升安全性：sandbox=”allow-scripts allow-same-origin”。
二、使用 JavaScript 动态加载 HTML 内容
通过 fetch API 获取外部 HTML 文件的文本内容，并将其注入到指定 DOM 容器中，可避免 iframe 的隔离限制，实现更灵活的样式与交互集成。
1、在目标容器元素上设置唯一 id，例如：
。
2、编写 JavaScript 代码，使用 fetch 请求外部 HTML 文件，如 fetch(‘nav.html’)。
3、调用 response.text()方法解析响应体为字符串。
4、获取容器元素并设置其 innerHTML 属性为返回的 HTML 字符串：document.getElementById(‘nav-placeholder’).innerHTML = htmlText。
三、使用 HTML Imports（仅旧版 Chrome 支持，已废弃）
HTML Imports 曾是 W3C 提出的原生模块化方案，允许通过 link 标签导入外部 HTML 文档及其依赖资源，但该特性已被现代 浏览器 移除，仅作历史参考。
1、在
中添加 link 元素，rel 设为 ”import”，href 指向外部 HTML 文件：。
2、通过 JavaScript 读取导入内容：var link = document.querySelector(‘link[rel=”import”]’); var content = link.import;。
3、从 content 中提取所需节点并append 到主文档中。
四、使用服务器端包含（SSI）嵌入
在 Web 服务器启用 SSI 功能后，可通过特殊注释语法在 HTML 中声明需插入的外部文件，由服务器在响应前完成内容合并，适用于 Apache 或 Nginx 等支持 SSI 的环境。
1、确保服务器已启用 SSI 模块，并将文件扩展名设为。shtml 或配置对应 MIME 类型。
2、在 HTML 中插入 SSI 指令，格式为：。
3、将外部 HTML 文件置于同一目录或指定路径下，确保 Web 服务器有读取权限。
4、访问页面时，服务器会在发送响应前将 footer.html 内容原样插入该注释位置。
五、使用构建 工具 进行静态 HTML 合并
在开发阶段借助 Webpack、Gulp 或 Eleventy 等工具，将多个 HTML 片段在编译时拼接为单个输出文件，适合生成静态站点且需 SEO 友好的场景。
1、安装支持 HTML 模板合并的插件，如 html-webpack-plugin 配合 e js-loader 或 posthtml-include。
2、将公共模块（如 head、header）保存为独立文件，例如 components/header.ejs。
3、在主 HTML 模板中使用语法引用模块：。
4、运行构建命令，工具自动解析并输出含嵌入内容的最终 HTML 文件。
