可通过iframe、JavaScript动态加载、object标签、服务端包含（SSI）四种方式嵌入外部HTML；HTML Imports已废弃不可用。
如果您希望在当前HTML页面中嵌入另一个HTML文件的内容，而不是重复编写相同代码，则需要通过特定方式加载外部HTML片段。以下是实现此目标的多种方法：
iframe允许将外部HTML文档作为独立的窗口嵌入到当前页面中，内容在隔离的上下文中运行，不影响主页面结构和脚本。
1、在需要插入外部HTML的位置添加iframe元素。
2、设置iframe的src属性为外部HTML文件的相对或绝对路径，例如：src="header.html"。
立即学习“前端免费学习笔记（深入）”；
3、可选地设置width、height、border等属性以控制显示样式，注意：外部HTML文件需与当前页面同源，否则可能因CORS策略被浏览器阻止加载。
通过fetch API获取外部HTML文件的文本内容，并将其插入到指定DOM容器中，适用于需要与主页面共享样式和脚本的场景。
1、在HTML中创建一个用于承载外部内容的容器，例如：
。2、在script标签内或外部JS文件中编写fetch请求，目标URL为外部HTML文件路径。
3、使用response.text()解析响应体，再通过element.innerHTML = htmlText写入容器，注意：动态插入的脚本默认不执行，如需运行需手动创建并插入script标签。
object标签可作为通用外部资源嵌入容器，支持HTML类型资源，兼容性较好但语义不如iframe明确。
1、在页面中插入object元素，设置data属性指向外部HTML文件路径。
1. 页面全部经过SEO(搜索引擎优化)处理 2. 支持IE、FireFox等主流浏览器，在IE 和FireFox下显示相同的效果 3. 符合W3C国际网页标准，页面全部采用DIV+CSS布局 4. 采用SQL server数据库，所有数据库操作采用存储过程 5. 部分功能采用AJAX技术，良好的用户体验。 6. 后台集成在线HTML编辑软件FCKEditor，自定义美观的内容
0
2、设置type属性为"text/html"以声明资源类型。
3、可添加备用内容（fallback）作为子元素，当object无法加载时显示，注意：部分浏览器对object加载HTML的支持有限，建议在目标环境中测试渲染效果。
在Web服务器启用SSI功能后，可在HTML文件中使用特殊注释语法指示服务器在响应前将外部文件内容插入当前位置。
1、确保Web服务器（如Apache）已启用Includes模块并配置了.shtml扩展名解析。
2、将当前文件扩展名改为.shtml，例如index.shtml。
3、在HTML中插入注释格式指令：，注意：该方法完全由服务器处理，客户端无法直接打开.shtml文件查看效果，必须通过HTTP服务访问。
HTML Imports曾是W3C提出的原生导入机制，允许通过link标签引入HTML文档，但已被现代浏览器弃用，不再推荐使用。
1、曾经可使用引入外部HTML。
2、导入后需通过import.body.innerHTML等方式提取内容并插入DOM。
3、注意：Chrome自73版本起已移除HTML Imports支持，Firefox和Edge从未实现，当前项目中严禁采用此方式。
以上就是如何在html上引用html_在HTML页面上引用外部HTML文件【引用】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
379
收藏
