前置条件
-
假设有三个不同的布局文件：
header.html、content.html和footer.html，你可以将它们组合成一个完整的页面-
header.html（头部布局）：<header> <h1>欢迎来到我的网站</h1> <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> -
content.html（主体内容布局）：<main> <section> <h2>欢迎来到我们的内容区</h2> <p>这里是一些示例内容。</p> </section> <section> <h2>第二部分</h2> <p>这里是另一部分内容。</p> </section> </main> -
footer.html（页脚布局）：<footer> <p>© 2024 我的公司. 版权所有。</p> </footer>
-
方法解析
使用 <iframe> 标签嵌套
-
使用
<iframe>标签将其他 HTML 文件嵌入到当前页面中。这种方法适合将不同的布局组合在一起，每个文件作为独立的内容显示<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组合多个 HTML 文件</title> </head> <body> <h1>主页</h1> <!-- 将其他 HTML 文件嵌入到页面 --> <iframe src="header.html" width="100%" height="100px"></iframe> <iframe src="content.html" width="100%" height="500px"></iframe> <iframe src="footer.html" width="100%" height="100px"></iframe> </body> </html> -
优点：结构清晰，能快速引入其他 HTML 文件
-
缺点：每个嵌入的文件都是独立的文档，可能会导致页面加载较慢，并且不能共享样式和脚本
使用 JavaScript 动态加载 HTML 文件
-
通过 JavaScript 使用 AJAX 中
fetchAPI 动态加载多个 HTML 文件的内容，将它们插入到主页面中的指定容器里<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组合多个 HTML 文件</title> </head> <body> <h1>主页</h1> <!-- 用于插入各个 HTML 文件的容器 --> <div id="header"></div> <div id="content"></div> <div id="footer"></div> <script> // 使用 fetch 动态加载 HTML 文件 function loadHTML(url, containerId) { fetch(url) <!-- 发起网络请求，获取指定的 url（例如 header.html、content.html 和 footer.html）的内容 --> .then(response => response.text()) <!-- 将响应内容（HTML 文件）转化为文本格式 --> .then(data => { <!-- 将获取的 HTML 内容插入到页面中对应的元素（header、content、footer） --> document.getElementById(containerId).innerHTML = data; }) <!-- 如果发生错误（比如文件未找到），通过 .catch 捕获并处理 --> .catch(error => console.error('Error loading HTML:', error)); } // 加载不同部分的 HTML 文件 loadHTML('header.html', 'header'); loadHTML('content.html', 'content'); loadHTML('footer.html', 'footer'); </script> </body> </html> -
优点：文件内容动态加载，能够在主页面中插入多个 HTML 文件，同时保留页面的一致性
-
缺点：需要 JavaScript 支持，依赖于浏览器对
fetch或 AJAX 的支持。对于首次加载的用户来说，可能有延迟
将多个 HTML 文件的内容合并成一个文件
-
如果不需要动态加载，可以直接将多个 HTML 文件的内容合并成一个文件。这是最直接的方法，将所有的 HTML 内容（如头部、主体、脚部等）粘贴到一个单独的 HTML 文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组合多个 HTML 文件</title> <link rel="stylesheet" href="styles.css"> <!-- 共享样式 --> </head> <body> <!-- Header 部分 --> <header> <h1>网站头部</h1> <p>这是头部内容</p> </header> <!-- Main Content 部分 --> <main> <h2>网站内容</h2> <p>这是主体内容</p> </main> <!-- Footer 部分 --> <footer> <p>这是脚部内容</p> </footer> <script src="script.js"></script> <!-- 共享脚本 --> </body> </html> -
优点：简洁，所有内容都包含在一个文件中，加载速度更快
-
缺点：如果有多个页面，可能会导致冗余和代码重复，维护起来不太方便
使用模板引擎（如 PHP、Jinja、EJS）
简介
- 如果正在构建一个动态网站，可以使用模板引擎（如 PHP、Jinja、EJS 等）来组合多个 HTML 文件。模板引擎允许你将不同的布局分离，并在服务器端动态组合这些布局，最终生成一个完整的 HTML 页面
使用 PHP include
- 在 PHP 中，可以使用
include或require将多个 HTML 文件组合成一个完整的页面。PHP 会在服务器端将模板文件合并并生成一个动态的 HTML 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组合多个 HTML 文件</title>
</head>
<body>
<?php include('header.html'); ?> <!-- PHP 会加载 header.html 文件的内容，并将其插入到当前页面中。这种方式会直接合并文件内容 -->
<div id="content">
<?php include('content.html'); ?> <!-- 分别加载 content.html 和 footer.html，并将它们插入到页面的相应部分 -->
</div>
<?php include('footer.html'); ?> <!-- 分别加载 content.html 和 footer.html，并将它们插入到页面的相应部分 -->
</body>
</html>
-
优点：在服务器端动态组合页面，可以有效地减少重复代码，便于维护
-
缺点：需要服务器支持，如 PHP、Node.js 等，且这种方法不适用于纯前端项目
使用 Node.js 中的模板引擎（如 EJS）
-
EJS：EJS（Embedded JavaScript）是一个常用的
Node.js模板引擎，它允许在 HTML 文件中嵌入 JavaScript 代码来生成动态内容 -
Node.js中的模板引擎（如 EJS）：在使用 EJS 时，可以在服务器端定义模板，并将数据传递给模板进行渲染// 使用 Express 和 EJS const express = require('express'); const app = express(); // 设置 EJS 为视图引擎 app.set('view engine', 'ejs'); app.get('/', (req, res) => { <!-- 服务器端通过 render 方法渲染 index.ejs 模板，并将数据传递给模板 --> res.render('index', { title: '首页', content: '这是页面内容' }); }); app.listen(3000, () => { console.log('服务器运行在 http://localhost:3000'); }); -
index.ejs模板文件：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= title %></title> <!-- EJS 标签用于将传递的数据（如 title 和 content）插入到 HTML 中 --> </head> <body> <h1>主页</h1> <div id="content"> <%= content %> <!-- EJS 标签用于将传递的数据（如 title 和 content）插入到 HTML 中 --> </div> </body> </html> -
优点：
- 强大的动态数据支持：可以在模板中插入动态内容，非常适合构建动态网站
- 简洁易用：EJS 语法与 HTML 类似，容易上手
-
缺点：
- 服务器依赖：需要安装和配置
Node.js及相关模块，适用于全栈开发 - 较复杂的开发环境：对于小型项目，配置和运行服务器可能会显得复杂
- 服务器依赖：需要安装和配置
使用 Python 中的 Jinja2 模板引擎
-
Jinja2：在 Python 环境中，Jinja2 是一种流行的模板引擎，它允许在模板中嵌入 Python 代码，生成动态的 HTML 内容。Jinja2 与 Flask、Django 等 Python Web 框架紧密集成
-
使用 Jinja2 渲染 HTML 文件
-
安装 Jinja2：
pip install jinja2 -
Python 示例代码：
from jinja2 import Template # 模板文件内容 # HTML 块 html_template = """ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> # 这是 Jinja2 的变量占位符，传入的数据会在渲染时被替换 </head> <body> <h1>{{ header }}</h1> # 这是 Jinja2 的变量占位符，传入的数据会在渲染时被替换 <div id="content"> {{ content }} # 这是 Jinja2 的变量占位符，传入的数据会在渲染时被替换 </div> </body> </html> """ # 模板渲染 template = Template(html_template) # 传入模板中需要替换的变量值，Jinja2 会返回渲染后的 HTML 字符串 rendered_html = template.render(title="主页", header="欢迎", content="这是动态生成的内容") # 输出渲染后的 HTML print(rendered_html)
-
-
优点：
- Python 集成：Jinja2 非常适合与 Python 的 Web 框架（如 Flask 和 Django）一起使用
- 灵活的模板语法：支持条件判断、循环、过滤器等功能，非常强大和灵活
- 分离逻辑和视图：使得前端和后端代码分离，代码更易于维护
-
缺点：
- 需要 Python 环境：与
Node.js和 PHP 一样，Jinja2 也需要 Python 环境支持，无法在纯前端项目中使用
- 需要 Python 环境：与
使用 Web Components（现代前端）
-
Web Components 是一种现代的前端技术，它允许将多个 HTML 组件封装成独立的可重用元素。这些组件可以在一个页面中按需加载。例如，使用
<template>标签创建模板，并通过 JavaScript 渲染这些模板：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Components</title> </head> <body> <h1>组合多个 HTML 文件</h1> <!-- 模板定义 --> <template id="header-template"> <header> <h1>网站头部</h1> </header> </template> <template id="content-template"> <main> <h2>网站内容</h2> <p>这是内容部分</p> </main> </template> <template id="footer-template"> <footer> <p>网站脚部</p> </footer> </template> <div id="header-container"></div> <div id="content-container"></div> <div id="footer-container"></div> <script> // 通过模板加载内容 function loadTemplate(templateId, containerId) { const template = document.getElementById(templateId); const clone = document.importNode(template.content, true); document.getElementById(containerId).appendChild(clone); } loadTemplate('header-template', 'header-container'); loadTemplate('content-template', 'content-container'); loadTemplate('footer-template', 'footer-container'); </script> </body> </html> -
优点：能够将 HTML 结构封装成组件，适合现代前端开发，支持复用
-
缺点：浏览器支持较新，可能不适用于旧版浏览器
总结
-
最简单的方法：将多个 HTML 文件的内容直接合并到一个文件中，适用于不需要动态加载的场景
-
动态加载：使用
<iframe>或 JavaScript 动态加载 HTML 文件，适用于需要在页面中嵌套其他内容的情况 -
模板引擎：适用于动态网页，能够将不同的部分组合成完整的页面
-
Web Components：适合现代前端开发，使用封装的组件来组合页面