html原生不支持标签，正确方案是：构建时处理（如vite/webpack）、fetch()动态加载（需服务端环境）或iframe（局限大），禁用原生include。
HTML 原生不支持 <include></include>，别试了
HTML 标准里根本没有 <include src="header.html"></include> 这种语法，浏览器直接忽略或报解析错误。很多初学者在写静态页面时想复用导航栏、页脚，一搜“HTML 导入外部文件”就掉进这个坑——不是代码写错了，是思路错了。
fetch() + innerHTML 是最通用的动态加载方案
现代浏览器都支持 fetch()，适合加载同源的 HTML 片段（如 nav.html、footer.html），再插入到指定容器中。注意：不能跨域，且需服务端环境（file:// 协议下会触发 CORS 错误）。
常见错误现象：
- 控制台报错
Access to fetch at 'xxx.html' from origin 'null' has been blocked by CORS policy→ 说明你双击打开了 HTML 文件，没起本地服务 - 内容加载后 JS 不执行 →
innerHTML插入的<script></script>默认不运行，得手动eval()或创建新 script 标签
fetch('nav.html')
.then(res => res.text())
.then(html => {
document.getElementById('nav-container').innerHTML = html;
})
.catch(err => console.error('加载失败:', err));
<iframe></iframe> 简单但有严重局限性
虽然能显示外部 HTML，但本质是嵌入一个独立文档上下文，和主页面样式隔离、JS 不互通、SEO 不友好、移动端响应难适配。仅适合嵌入完全独立、无需交互的模块（比如第三方公告板）。
立即学习“前端免费学习笔记（深入）”；
使用场景限制：
- 无法通过 CSS 控制
<iframe></iframe>内部元素样式 -
height: 100%在 iframe 上无效，必须显式设高或用 JS 动态调整 - 若被加载页面含
<base target="_blank">，所有链接会在新窗口打开，不可控
<iframe src="sidebar.html" width="200" height="400" frameborder="0"></iframe>
真正工程级方案：构建时处理，不是运行时加载
所谓“导入 HTML”，在实际项目中几乎都交给构建工具完成。浏览器只管加载最终拼好的 HTML，不操心拆分逻辑。
主流做法：
- Vite / Webpack：用
vite-plugin-html或html-webpack-plugin+lodash.template在构建时注入片段 - 静态站点生成器（如 Hugo、Jekyll）：原生支持 partials / includes 语法，编译时合并
- Node.js 服务端渲染：用
fs.readFileSync()同步读取并拼接字符串（注意路径和编码）
关键点：这些方法生成的是纯 HTML，没有运行时依赖，兼容性最好，SEO 友好，也避免了 CORS 和执行时机问题。
容易被忽略的地方是开发阶段的热更新——如果用纯 fetch 加载，改了 nav.html 需手动刷新；而构建方案配合 HMR，改完片段自动重编译并刷新页面。
