HTML原生不支持标签，正确方案是：构建时处理（如Vite/Webpack）、fetch()动态加载（需服务端环境）或iframe（局限大），禁用原生include。

HTML 原生不支持 ，别试了

HTML 标准里根本没有 这种语法，浏览器直接忽略或报解析错误。很多初学者在写静态页面时想复用导航栏、页脚，一搜“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 插入的 默认不运行，得手动 eval() 或创建新 script 标签

fetch('nav.html')
  .then(res => res.text())
  .then(html => {
    document.getElementById('nav-container').innerHTML = html;
  })
  .catch(err => console.error('加载失败:', err));

简单但有严重局限性

虽然能显示外部 HTML，但本质是嵌入一个独立文档上下文，和主页面样式隔离、JS 不互通、SEO 不友好、移动端响应难适配。仅适合嵌入完全独立、无需交互的模块（比如第三方公告板）。

使用场景限制：

• 无法通过 CSS 控制 内部元素样式
• height: 100% 在 iframe 上无效，必须显式设高或用 JS 动态调整
• 若被加载页面含 ，所有链接会在新窗口打开，不可控

真正工程级方案：构建时处理，不是运行时加载

所谓“导入 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，改完片段自动重编译并刷新页面。