推荐使用javascript动态加载html片段或iframe嵌入：前者通过fetch获取外部html并注入dom，可控性强；后者以独立窗口形式嵌入，适合隔离模块。html imports已废弃，ssi和构建预处理需服务器或构建环境支持。
如果您希望在HTML页面中嵌入另一个HTML文件的内容，而不依赖服务器端动态处理，则需要借助客户端技术实现静态引入。以下是几种可行的方法：
一、使用iframe标签嵌入HTML文件
iframe允许将外部HTML文档以独立窗口形式嵌入当前页面，内容与主页面隔离，适合展示独立模块或第三方内容。
1、在目标位置插入<iframe></iframe>标签，并设置src属性指向待引入的HTML文件路径。
2、通过width和height属性设定显示区域尺寸，避免出现滚动条可添加scrolling="no"（部分浏览器已弃用）或使用CSS控制。
立即学习“前端免费学习笔记（深入）”；
3、为提升可访问性与SEO兼容性，应在<iframe></iframe>内添加title属性描述其功能，例如title="页脚内容"。
4、若引入文件与当前页面同域，可通过JavaScript访问其内部DOM；跨域时受同源策略限制，无法读取内容或执行脚本。
二、利用JavaScript动态加载HTML片段
通过fetch或XMLHttpRequest请求外部HTML文件，再将响应文本注入指定容器元素，适用于需控制加载时机与位置的场景。
1、在页面底部或DOMContentLoaded事件中，创建一个<div id="include-target"></div>作为内容插入点。
2、使用fetch('header.html')发起GET请求，确保路径正确且服务器允许跨源（如为本地file://协议，需启用本地服务）。
3、调用.then(response => response.text())获取HTML字符串，再用document.getElementById('include-target').innerHTML = htmlText写入。
4、注意：直接写入innerHTML会丢失原HTML中的script标签执行能力，需手动eval或重新创建并插入script节点。
三、采用HTML Imports（已废弃，仅限历史兼容说明）
HTML Imports曾是W3C草案中用于导入HTML文档的原生机制，但已被现代浏览器移除支持，仅可在旧版Polymer项目中见到。
JS超酷图片翻动展示效果，根据鼠标进出图片的方向来控制图片进出的方式，效果超炫，兼容主流浏览器。 使用方法： 1、head区域引用文件 lrtk.css，animation.css 2、在文件中加入!-- 代码 开始 --!-- 代码 结束 --区域代码 3、js代码需要在html代码之后载入public.js，main.js 4、如需修改图片尺寸，直接在lrtk.css第10行修改即可
1、曾使用<link rel="import" href="sidebar.html">语法声明依赖。
2、导入后需通过import.querySelector()提取内容并手动附加到DOM中。
3、Chrome 73起完全移除该特性，Firefox与Safari从未实现，当前不可用于生产环境。
四、使用服务器端包含（SSI）模拟静态引入
虽名为“服务器端”，但在支持SSI的轻量服务器（如Apache启用includes模块）中，可通过特殊注释指令实现类静态行为，部署后效果等同于合并文件。
1、将主HTML文件扩展名改为.shtml（如index.shtml）。
2、在需插入位置写入<!--#include file="nav.html" -->，路径为相对于当前文件的本地路径。
3、启动支持SSI的本地服务器（如python3 -m http.server --cgi不支持，需用Apache或LiteSpeed）。
4、浏览器直接打开.shtm文件无效，必须经由支持SSI的Web服务器解析后返回结果。
五、构建时预处理：使用静态站点生成器或构建工具
在开发阶段将多个HTML片段合并为单个输出文件，生成结果为纯静态HTML，无需运行时逻辑，适合内容稳定、更新频率低的网站。
1、选用工具如Hugo、Jekyll或Webpack配合html-webpack-plugin与ejs-loader。
2、将公共部分（如头部、导航）保存为单独的_header.html模板文件。
3、在主页面中使用模板语法引用，例如（EJS）或{% include _header.html %}（Jekyll）。
4、最终输出为无任何依赖的单一HTML文件，但修改片段后必须重新运行构建命令才能生效。
