HTML页面嵌套有五种常用方法：一、iframe标签嵌入；二、object标签嵌入；三、JavaScript动态加载HTML片段；四、Server-Side Includes（SSI）预编译嵌入；五、Web Components中template与JavaScript组合复用。
如果您希望在一个HTML页面中显示另一个HTML页面的内容，而不是通过跳转或新窗口打开，则需要使用特定的嵌入技术。以下是实现HTML页面嵌套的几种常用方法：
一、使用iframe标签嵌入页面
iframe（内联框架）是HTML原生支持的嵌入方式，可在当前页面中开辟一个独立的渲染区域，加载并显示外部HTML文档。该方法兼容性好，无需额外脚本即可工作。
1、在目标位置插入<iframe>标签，并设置src属性为待嵌入页面的URL路径。
2、通过width和height属性设定显示区域尺寸，例如width="100%" height="500"。
立即学习“前端免费学习笔记（深入）”；
3、添加title属性以提升可访问性，如title="嵌入的用户协议页面"。
4、可选添加loading="lazy"延迟加载非首屏iframe，提升主页面初始加载性能。
5、若需禁用滚动条，可设置scrolling="no"（HTML5中已废弃，建议改用CSS：style="overflow:hidden;"）。
二、使用object标签嵌入HTML文档
object标签原本用于嵌入多媒体或插件内容，但也可用于加载HTML文件。相比iframe，它更强调内容作为“对象”的语义，且在部分旧浏览器中行为略有差异。
1、插入<object>标签，将data属性设为外部HTML文件路径，例如data="sidebar.html"。
2、设置type属性为"text/html"，明确声明嵌入内容类型。
3、指定width和height，否则可能默认显示为极小尺寸或不渲染。
4、在<object>标签内部添加备用内容，当嵌入失败时显示，例如<p>无法加载侧边栏，请<a href="sidebar.html">点击此处手动打开</a></p>。
5、注意：某些现代浏览器对本地file://协议下的object嵌入HTML有限制，部署时应确保服务端环境运行。
三、通过JavaScript动态加载HTML片段
利用fetch API或XMLHttpRequest获取外部HTML文件内容，再将其插入到当前页面指定容器中。该方式不创建独立上下文，嵌入内容与主页面共享DOM和脚本环境。
1、在HTML中定义一个空容器元素，例如<div id="content-placeholder"></div>。
2、编写JavaScript代码，使用fetch("header.html")发起请求获取目标HTML文本。
3、调用response.text()解析响应体为字符串。
4、将返回的HTML字符串赋值给容器元素的innerHTML属性。
5、注意：跨域请求会触发CORS限制，被嵌入文件必须与主页面同源，或服务端明确允许跨域。
四、使用Server-Side Includes（SSI）预编译嵌入
SSI是一种服务器端指令机制，在页面发送至浏览器前由Web服务器解析并合并多个HTML文件。该方法不依赖客户端能力，生成的是完整静态HTML。
1、确认Web服务器已启用SSI功能（如Apache需加载mod_include模块，Nginx需配置ssi on）。
2、将主页面文件扩展名改为.shtml（如index.shtml）。
3、在需要嵌入的位置插入SSI指令，例如<!--#include file="nav.html" -->。
4、确保被包含文件（如nav.html）位于同一目录或指定相对路径下。
5、注意：SSI仅在服务器环境中生效，直接双击打开.shtm文件将无法解析指令。
五、利用Web Components中的<template>与JavaScript组合复用
通过<template>标签预定义HTML结构，配合JavaScript动态克隆并注入内容。适用于嵌入固定结构的局部模板，而非远程HTML文档。
1、在页面中声明<template id="card-template"><div class="card">...</div></template>。
2、使用document.getElementById("card-template").content.cloneNode(true)获取文档片段。
3、修改克隆后的节点内容（如填充标题、图片地址等），再插入目标容器。
4、若需加载外部HTML构建模板，仍需配合fetch完成异步获取步骤。
5、注意：template内容默认不渲染，且不执行其中的script标签，需手动处理逻辑绑定。
