HTML无法直接导入数据，需用JavaScript通过fetch加载同源HTML片段并注入DOM，或用iframe嵌套独立文档；link rel="import"已废弃。
直接用 <iframe> 最省事，但语义和交互受限；真要复用 HTML 片段（比如 header、nav），必须用 JavaScript fetch + innerHTML，且页面得跑在 HTTP(S) 服务上——双击打开 file:// 会失败。
为什么不能用 <link rel="import">
这个 API 已被 Chrome 73 起彻底移除，Firefox 和 Safari 从未支持。现在写 <link rel="import" href="header.html"> 不会触发任何加载，document.currentScript.ownerDocument 也拿不到内容。别在新项目里碰它，连兼容性兜底都不用做。
fetch 加载 HTML 片段的实操要点
这是目前静态站点最可行的纯前端方案，但有几个硬约束必须满足：
- 目标 HTML 文件（如
header.html）必须与index.html同源，或服务端显式返回Access-Control-Allow-Origin: * - 不能双击打开
index.html—— 必须通过http://localhost:xxx或线上域名访问，否则浏览器直接拦截请求 -
innerHTML插入后，原片段里的<script>标签不会执行，如果真有内联脚本，得手动提取并eval或创建<script>元素追加（不推荐） - 建议插入前清空容器：
document.getElementById('header-container').innerHTML = ''，避免重复调用时堆叠内容
最小可用示例：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
fetch('header.html')
.then(r => r.ok ? r.text() : Promise.reject(new Error(r.status)))
.then(html => document.getElementById('header-container').innerHTML = html)
.catch(err => console.error('加载 header.html 失败:', err));
<iframe> 的适用边界在哪
它不是“引入”，而是“嵌套一个独立文档”。这意味着：
- 样式完全隔离：父页 CSS 不影响 iframe 内容，反之亦然
- 脚本环境分离：iframe 里的 JS 无法直接访问父页
window，需用postMessage通信 - 滚动条可能叠加：如果 iframe 内容超长且父页也滚动，会出现两套滚动条，
scrolling="no"在现代浏览器中已无效，得靠 CSSoverflow: hidden控制 - SEO 友好性差：搜索引擎通常不把 iframe 内容计入主页面权重
适合场景：嵌入第三方小工具（如天气插件）、隔离风险内容（如用户提交的 HTML）、或明确需要沙箱化渲染的模块。
构建工具里别 runtime 拼 HTML
如果你用 Vite 或 Webpack，就该在构建期处理模板合并，而不是等页面加载后再 fetch。比如 Vite 配合 vite-plugin-html，可直接在 index.html 里写：
<div id="nav"><%= require('./nav.html') %></div>
这样做的好处是：HTML 被提前合并、支持变量注入、能压缩、无首屏闪动、也不依赖运行时网络请求。唯一代价是开发时改了 nav.html 得重新构建——但热更新基本能覆盖。
真正容易被忽略的是协议限制：所有基于 fetch 或 XMLHttpRequest 的方案，都卡死在 file:// 协议上。哪怕只是本地测试，也得开个最小服务器（VS Code Live Server、python -m http.server），否则连控制台报什么错都看不到。
