可在HTML页面中嵌入外部HTML内容的方法有五种：一、iframe标签；二、JavaScript动态加载；三、已废弃的HTML Imports；四、服务器端包含（SSI）；五、构建工具预处理。
如果您希望在当前HTML页面中嵌入另一个HTML文件的内容，而不是通过超链接跳转，则需要使用特定的技术手段将外部HTML片段加载并渲染到当前文档中。以下是实现此目标的多种方法：
一、使用iframe标签嵌入
iframe元素可在当前页面中创建一个独立的嵌套浏览上下文，用于加载并显示外部HTML页面。该方式无需JavaScript支持，兼容性高，但会以独立窗口形式呈现，样式和脚本默认隔离。
1、在需要插入内容的位置添加<iframe>标签。
2、设置src属性为待引入HTML文件的相对或绝对路径，例如src="header.html"。
立即学习“前端免费学习笔记（深入）”；
3、可选地添加width、height、frameborder="0"等属性控制外观。
4、为提升可访问性，建议添加title属性描述iframe内容用途。
二、使用JavaScript动态加载
通过fetch API或XMLHttpRequest获取外部HTML文件内容，并将其插入到指定DOM节点中。该方式允许对加载内容进行处理，且不产生独立浏览上下文，但需浏览器支持现代JavaScript特性。
1、在HTML中定义一个容器元素，例如<div id="include-target"></div>。
2、在<script>标签或外部JS文件中调用fetch("sidebar.html")发起请求。
3、使用.then(response => response.text())获取响应文本。
4、将返回的HTML字符串赋值给容器元素的innerHTML属性。
5、注意：若外部HTML包含<script>标签，原生innerHTML不会执行其中脚本，需额外解析执行。
三、使用HTML Imports（已废弃，仅作说明）
HTML Imports曾是W3C提出的通过<link rel="import">引入外部HTML文档的标准方案，但已被所有主流浏览器弃用，不应在新项目中使用。
1、在<head>中添加<link rel="import" href="nav.html">。
2、通过JavaScript访问import.body.innerHTML读取内容。
3、检查document.currentScript.ownerDocument获取导入文档对象。
4、由于Chrome 73起已移除支持，Firefox与Safari从未实现该特性。
四、使用服务器端包含（SSI）
在Web服务器（如Apache或Nginx启用SSI模块）响应请求前，将指定HTML文件内容插入到主文件中。该方式在服务端完成拼接，客户端接收的是完整HTML，无跨域或执行环境限制。
1、确保服务器已启用SSI功能，并将文件扩展名设为.shtml或配置对应MIME类型。
2、在HTML中插入注释格式指令：<!--#include file="footer.html" -->。
3、路径支持file（相对路径）或virtual（虚拟路径）两种方式。
4、需服务器配置支持，静态文件服务器（如Python -m http.server）无法解析SSI指令。
五、使用构建工具预处理
在开发阶段借助Webpack、Vite、Gulp等工具，在打包过程中将多个HTML片段合并为单个输出文件。该方式生成纯静态HTML，零运行时开销，适合内容稳定、无需动态更新的场景。
1、安装支持HTML包含的插件，例如html-webpack-plugin配合webpack-html-include。
2、在主HTML中使用自定义语法标记引用位置，如<!-- @include ./components/header.html -->。
3、配置构建流程识别并替换该标记为对应文件内容。
4、运行构建命令后，输出目录中生成的HTML已内联全部被引用内容，无需客户端额外请求或执行逻辑。
