可通过iframe、JavaScript fetch、SSI、构建工具五种方式嵌入HTML：iframe适用于独立页面嵌入；fetch适合局部动态加载；SSI由服务器端合并；HTML Imports已废弃；构建工具在编译时静态整合。
如果您希望在现有HTML页面中嵌入另一段HTML代码，而不是重复编写相同内容，可以通过多种方式实现。以下是具体的操作方法：
一、使用iframe标签嵌入外部HTML文件
iframe允许将一个独立的HTML文档以框架形式嵌入当前页面，适用于加载外部或本地HTML文件，且保持其独立运行环境。
1、在目标页面的HTML中，定位到需要插入外部HTML的位置。
2、插入如下代码，将example.html替换为实际文件路径：
立即学习“前端免费学习笔记（深入）”；
3、确保example.html与当前页面位于同一服务器目录下，或使用相对/绝对路径正确指向该文件。
4、如需响应式高度，可配合JavaScript动态调整iframe高度，但基础嵌入无需额外脚本即可生效。
二、使用JavaScript动态加载HTML片段
通过fetch API读取外部HTML文件内容，并将其插入指定容器内，适合需要局部更新、避免整页刷新的场景。
1、在目标页面中添加一个具有唯一id的容器元素，例如：
2、在页面底部或script标签中添加以下JavaScript代码：
const target = document.getElementById(‘include-target’);
fetch(‘snippet.html’)
.then(response => response.text())
.then(html => target.innerHTML = html)
.catch(err => console.error(‘加载失败：文件不存在或跨域被阻止’));
3、确认snippet.html为纯HTML片段（不含、
等根标签），且与当前页面同源。
三、使用服务器端包含（SSI）在Apache环境中导入
在支持SSI的Web服务器（如Apache）上，可通过注释指令直接包含其他HTML文件内容，由服务器在响应前完成合并。
1、确保服务器已启用SSI模块，并配置了.shtml扩展名解析或对.html启用SSI。
2、将当前页面重命名为index.shtml（或对应支持SSI的扩展名）。
3、在需要插入HTML的位置写入如下指令：
4、确保header.html与当前文件位于同一目录，且无语法错误；服务器将把该文件内容原样嵌入此处。
四、使用HTML5 import（已废弃，仅作兼容性说明）
HTML Imports曾是W3C草案中用于导入HTML文档的机制，但已被Chrome 73起移除，现代浏览器不再支持，不应在新项目中使用。
1、此前写法为：
2、检查浏览器控制台是否报出”HTML imports are no longer supported”警告。
3、若维护旧项目遇到此代码，必须替换为fetch或iframe等替代方案。
五、使用构建工具（如Webpack + html-loader）在开发阶段导入
在前端工程化环境中，可通过打包工具在编译时将HTML片段作为模块引入，生成静态合并后的HTML文件。
1、安装html-loader：npm install –save-dev html-loader
2、在webpack.config.js中配置loader规则，匹配.html文件并启用esModule: false选项。
3、在JS文件中使用import语法引入HTML片段：import headerHtml from ‘./header.html’;
4、将导入内容插入DOM：document.getElementById(‘app’).innerHTML = headerHtml;
以上就是html如何导入html代码_将HTML代码导入到现有页面中【教程】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604840.html
微信扫一扫 
支付宝扫一扫 
