浏览器原生不支持HTML include，可行方案只有构建时处理、服务端渲染或JS动态加载；静态站点用fetch+insertAdjacentHTML，Vite等构建工具推荐vite-plugin-html或Vue组件复用，禁用iframe和fs.readFileSync客户端读取。
HTML 公共部分怎么用 include？浏览器根本不认
浏览器原生不支持 include，直接写 <!--#include file="header.html"--> 或 <include src="nav.html"></include> 会原样显示甚至报错。这不是你写错了，是它本来就不能跑。
真正能落地的只有三类方案：构建时处理、服务端渲染、或 JS 动态加载——选哪个取决于你有没有构建流程、要不要 SEO、以及是否接受首屏延迟。
- 静态站点（无构建）→ 用
fetch+insertAdjacentHTML，但注意 CSP 策略可能拦掉本地文件读取 - 用 Vite / Webpack → 直接
importHTML 片段（需插件，如vite-plugin-html或html-webpack-plugin的templateParameters） - Node.js 后端 → 模板引擎（
ejs、pug）天然支持<% include("header.ejs") %>，服务端拼好再吐给浏览器
用 fetch 加载公共 HTML 片段，为什么页面闪一下才出现导航？
因为 JS 是异步执行的，fetch 请求完成前，DOM 已经渲染完毕，导航栏位置留空；等请求回来再插入，用户就看到“闪现”。这不是 bug，是同步渲染逻辑缺失导致的体验断层。
缓解办法不是加 loading，而是把关键公共块（比如 <header>）提前内联，非关键部分（比如页脚统计代码）再异步加载：
立即学习“前端免费学习笔记（深入）”；
- 首页 HTML 中手动写入
<header>...</header>，保证首屏完整 - 用
document.addEventListener('DOMContentLoaded', ...)延迟加载footer.html这类非阻塞内容 - 避免在
<head>里fetch，容易触发 parser-blocking
Vite 项目里怎么复用 header.html？别碰 raw 插件
import header from './header.html?raw' 看似简单，但只是读成字符串，你得自己 el.innerHTML = header，还得手动处理 script 标签执行、事件绑定丢失、重复插入等问题——实际比写两遍还累。
正确做法是用社区验证过的方案：
- 装
vite-plugin-html，在vite.config.ts里配inject: { data: { header: fs.readFileSync('./src/_shared/header.html', 'utf8') } }，模板里用<%= header %> - 或者更现代的：把公共块写成
.vue单文件组件（哪怕只含 template），<Header />复用干净利落，还能响应式更新 - 千万别用
fs.readFileSync在客户端代码里读文件——Node.js API 浏览器里根本不存在
用 iframe 套公共页脚？小心样式泄漏和 SEO 归零
虽然 <iframe src="footer.html"></iframe> 能“复用”，但它创建的是独立上下文：父页 CSS 不进 iframe，JS 不能跨域通信，搜索引擎几乎不索引 iframe 内容。对 SEO 敏感的页脚版权信息、联系方式，等于白写。
除非你明确要隔离（比如嵌第三方 widget），否则这招是自废武功：
- iframe 高度自适应极难做，
scrolling="no"容易切掉内容 - 移动端双滚动条、焦点跳转异常是常态
- 所有分析脚本（GA、埋点）默认不进 iframe，需单独部署
真想隔离样式又复用结构，用 Shadow DOM + template 标签才是正解，不过得接受 IE 全系不支持。
