零基础掌握用HTML编辑网页如何引用公共头部和尾部-html教程-PHP中文网

静态html页面可通过fetch动态加载header/footer实现复用，需同源、预留容器、片段无html/head/body标签；本地开发须用http服务避免file://协议限制。

零基础掌握用html编辑网页如何引用公共头部和尾部

静态 HTML 页面没法直接用 include，但你不需要后端也能复用 header 和 footer——关键不是“能不能”，而是选对方法、避开常见断点。

用 `fetch` 动态加载最通用（适合纯静态站）

现代浏览器都支持，不依赖 jQuery，也不需要服务端配置。但要注意：文件必须同源（即 header.html 和 index.html 在同一域名或本地同目录），否则会触发 CORS 错误。

header.html 和 footer.html 只能写片段，不能包含、、标签，否则插入后结构错乱
目标页面中需预留容器，比如 <header id="site-header"></header>，再用 JS 注入
推荐在前执行，避免 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() 是最顺手的方案，语法短、自动处理异步、还能带选择器过滤内容。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

必须确保 jQuery 已加载，且脚本放在前；否则 $ 未定义或 DOM 未挂载
footer.html 里如果有 <script></script> 标签，默认不会执行——这是安全机制，别指望它自动运行导航高亮逻辑
可精准加载某一部分，比如只取 footer.html 里的 <div class="copyright">：<code>$('#foot').load('footer.html .copyright');
错误时静默失败，建议加 .fail() 捕获，例如：.fail(() => console.error('footer 加载失败'));

别碰 `<iframe></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% 的“加载空白”问题根源。