静态HTML页面可通过fetch动态加载header/footer实现复用，需同源、预留容器、片段无html/head/body标签；本地开发须用HTTP服务避免file://协议限制。
静态 HTML 页面没法直接用 include，但你不需要后端也能复用 header 和 footer——关键不是“能不能”，而是选对方法、避开常见断点。
用 fetch 动态加载最通用（适合纯静态站）
现代浏览器都支持，不依赖 jQuery，也不需要服务端配置。但要注意：文件必须同源（即 header.html 和 index.html 在同一域名或本地同目录），否则会触发 CORS 错误。
-
header.html和footer.html只能写片段，不能包含<html>、<head>、<body>标签，否则插入后结构错乱 - 目标页面中需预留容器，比如
<header id="site-header"></header>，再用 JS 注入 - 推荐在
</body>前执行，避免 DOM 未就绪导致getElementById返回 null - 简单示例：
fetch('header.html')
.then(r => r.text())
.then(html => document.getElementById('site-header').innerHTML = html);
footer 同理，替换 ID 和路径即可。
用 jQuery.load() 最省事（但得引入 jQuery）
如果你项目里 already 用了 jQuery，.load() 是最顺手的方案，语法短、自动处理异步、还能带选择器过滤内容。
立即学习“前端免费学习笔记（深入）”；
- 必须确保 jQuery 已加载，且脚本放在
</body>前；否则$未定义或 DOM 未挂载 -
footer.html里如果有<script>标签，默认不会执行——这是安全机制，别指望它自动运行导航高亮逻辑 - 可精准加载某一部分，比如只取
footer.html里的<div class="copyright">：$('#foot').load('footer.html .copyright'); - 错误时静默失败，建议加
.fail()捕获，例如：.fail(() => console.error('footer 加载失败'));
别碰 <iframe>（除非你明确接受它的缺陷）
看起来简单，实际埋坑最多：SEO 不友好、高度自适应难、样式隔离导致 CSS 无法穿透、移动端滚动卡顿、跨域更麻烦。
- 即使设了
scrolling="no"，iOS Safari 仍可能显示空白滚动条 - 父页面无法用 CSS 控制 iframe 内部元素（比如想把 header 的 logo 放大 20%，做不到）
- Google 搜索引擎基本不索引 iframe 内容，意味着你的版权信息、导航链接不会被收录
- 如果 header.html 里有相对路径的图片或 CSS，iframe 加载时路径基准是 iframe 自身 URL，不是主页面，极易 404
本地开发时 file:// 协议下 fetch 会失败
Chrome、Edge 等浏览器出于安全限制，直接双击打开 HTML 文件时，fetch('header.html') 会报 net::ERR_FILE_NOT_FOUND 或 CORS 错误——这不是代码问题，是协议限制。
- 唯一可靠解法：起一个本地 HTTP 服务，哪怕只是 Python 一行命令：
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - VS Code 安装 Live Server 插件，右键 → “Open with Live Server”，自动搞定
- 千万别尝试改浏览器启动参数绕过（如
--disable-web-security），那只是掩耳盗铃，上线必崩
真正容易被忽略的是：所有这些方法都要求 header/footer 文件和主页面保持相同部署层级。一旦你把 index.html 放进 /pages/ 子目录，而 header.html 还在根目录，路径就得同步改成 ../header.html——这种相对路径错位，是 80% 的“加载空白”问题根源。
