在HTML中，可以使用`
标签来引用其他页面，，`html，，“在现代网页开发中，模板的使用极大地提高了代码的复用性和维护性，通过在模板中引用其他页面，开发者可以有效地组织和重用代码，从而提高开发效率，本文将详细介绍如何在模板中引用其他页面，并提供相关示例和常见问题解答。
使用HTML的iframe标签
HTML中的<iframe>标签允许你在当前HTML文档中嵌入另一个HTML页面，这是最直接的方法之一，适用于需要完全包含外部页面内容的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Parent Page</title>
</head>
<body>
<h1>This is the parent page</h1>
<iframe src="child.html" width="600" height="400"></iframe>
</body>
</html>
在这个例子中，child.html将被嵌入到parent.html页面中。
二、使用JavaScript的Fetch API
如果你需要在加载页面时动态地引入其他页面的内容，可以使用JavaScript的Fetch API来获取并插入内容。
fetch('child.html')
.then(response => response.text())
.then(data => {
document.getElementById('content').innerHTML = data;
});
对应的HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Parent Page</title>
</head>
<body>
<h1>This is the parent page</h1>
<div id="content"></div>
<script src="loadContent.js"></script>
</body>
</html>
这种方法适用于需要在运行时动态加载内容的场景。
三、使用Web组件（Custom Elements）
Web组件提供了一种创建可重用自定义元素的方法，可以在任何HTML文档中使用，你可以创建一个自定义元素，并在其中引用其他页面的内容。
class MyComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
fetch('child.html')
.then(response => response.text())
.then(data => {
this.shadowRoot.innerHTML = data;
});
}
}
customElements.define('mycomponent', MyComponent);
对应的HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Parent Page</title>
</head>
<body>
<h1>This is the parent page</h1>
<mycomponent></mycomponent>
<script src="mycomponent.js"></script>
</body>
</html>
这种方法不仅使代码更加模块化，还提供了良好的封装性。
四、使用服务器端包含（Server Side Includes, SSI）
对于支持SSI的服务器（如Apache），你可以在HTML文件中使用<!#include virtual="filename" >指令来包含其他文件，注意，这需要在服务器配置中启用SSI。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Parent Page</title>
</head>
<body>
<h1>This is the parent page</h1>
<!#include virtual="child.html" >
</body>
</html>
这种方法适用于简单的静态页面包含，但在现代Web开发中较少使用。
五、使用模板引擎（如Handlebars、EJS）
模板引擎允许你创建复杂的模板，并在渲染时动态填充内容，使用EJS：
<!templates/parent.ejs >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Parent Page</title>
</head>
<body>
<h1>This is the parent page</h1>
<%include('child'); %>
</body>
</html>
对应的JavaScript部分：
const ejs = require('ejs');
const template = ejs.compile(fs.readFileSync('templates/parent.ejs', 'utf8'));
const rendered = template({});
console.log(rendered);
这种方法适用于需要动态生成复杂HTML的场景。
表格对比不同方法的优缺点
| 方法 | 优点 | 缺点 |
|