html引用另一个html

直接说结论：html里没有原生的引用include指令。你写<iframe src="page.html"></iframe>，引用那是引用嵌套窗口，不是引用引用。真正的引用“引用”指把另一个文件的内容合并进当前文档——这得靠JavaScript的fetch、jQuery的引用load，或者服务器端模板。引用

我见过不少新手卡在这。引用他们拿着静态页面，引用想复用导航栏和页脚，引用于是引用复制粘贴。改一个链接，引用得动十个文件。引用后来有人教他们用iframe，引用结果滚动条、引用焦点、样式隔离问题一堆，比复制还麻烦。

先看最实用的方案：fetch配合innerHTML。假设你有header.html，里面是一段<header>...</header>，在主页面里这样写：

<div id="header-placeholder"></div> <script> fetch('header.html') .then(r => r.text()) .then(html => document.getElementById('header-placeholder').innerHTML = html); </script>

这段代码跑起来，浏览器会把header.html的内容拽过来，塞进那个div里。注意，fetch是异步的，页面会先渲染空白占位，等文件回来才补上。本地双击打开html文件时，fetch会被CORS拦死——你得开个本地服务器，比如python -m http.server，或者用VS Code的Live Server插件。

另一个老办法是jQuery的.load()，写法更短：

$("#header").load("header.html");

前提是你引了jQuery库。这法子兼容性好，但jQuery本身越来越像上个时代的产物。除非你维护老项目，否则我不推荐新引入它。

要是你连JavaScript都不想写，那就交给服务器。Apache的SSI（Server Side Include）用，Nginx有ssi on;配置，PHP直接<?php include 'header.html'; ?>。这些是真正的“引用”，文件在服务器端合并完再发给浏览器，源码干净，没有闪烁。

但多数静态托管平台（比如GitHub Pages）不支持SSI。所以最通用的还是fetch方案。我自己的习惯是：把公共部分拆成组件文件，用一个load-components.js统一处理，页面里只留占位标记。这样写起来清爽，维护也方便。

有个坑必须提：fetch拿回来的内容里，script标签不会自动执行。如果你的header.html里有脚本，得手动eval或者用其他方式触发。还有，相对路径会乱——header.html里的图片src="logo.png"，被拉进主页面后，浏览器按主页面的路径去解析，很可能404。解决方法是给公共文件里的资源写绝对路径，或者用<base>标签。

说到底，HTML本身不给引用功能，是因为它定位成“文档描述语言”，不是编程语言。想要模块化，就得靠外部工具或运行时。理解这点，你就不会纠结“为什么不能直接<include src="...">”了。

我的建议是：小项目，复制粘贴最快，别折腾；页面多了，用fetch方案，成本低，可控性强；团队协作或项目复杂，直接上构建工具（Webpack、Vite）的模板引擎，那才是正道。