在网页开发中，使用HTML5结合div搭建可复用的公共模块模板，能够大幅减少重复编码工作，提升项目的开发效率和后期维护便利性。下面我们将一步步完成整个模板的创建过程。
一、搭建基础HTML5页面框架
首先我们需要创建一个标准的HTML5文档结构，用div划分出页面的核心区域，包括头部、主体内容区、侧边栏和页脚，这是后续拆分公共模块的基础。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可复用HTML5模板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-container">
<!-- 头部区域 -->
<div class="header"></div>
<!-- 主体内容区 -->
<div class="main-content">
<!-- 侧边栏 -->
<div class="sidebar"></div>
<!-- 内容区 -->
<div class="content"></div>
</div>
<!-- 页脚区域 -->
<div class="footer"></div>
</div>
</body>
</html>
二、拆分公共模块
页面中导航栏、页脚这类内容在多个页面都会用到，我们可以把它们拆分为独立的公共模块，方便后续复用。下面以头部导航栏和页脚为例进行拆分。
1. 头部导航栏模块
头部导航栏包含网站logo和导航链接，是几乎所有页面都需要的内容，我们将其写成独立的模块代码。
<!-- header.html 头部导航模块 -->
<div class="header">
<div class="logo">我的网站</div>
<nav class="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="product.html">产品中心</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</div>
2. 页脚模块
页脚通常包含版权信息和备案号，同样属于公共模块，单独保存后可以在所有页面引入。
<!-- footer.html 页脚模块 -->
<div class="footer">
<p>版权所有 © 我的网站 备案号：粤ICP备xxxxxxxx号</p>
<p>联系邮箱：support@ipipp.com</p>
</div>
三、实现模板复用
拆分好公共模块后，我们可以通过两种方式实现模板复用，分别是静态引入和动态加载，开发者可以根据项目需求选择合适的方式。
1. 静态引入（适合简单项目）
如果是纯静态页面项目，我们可以直接把公共模块的代码复制到每个页面对应的位置，也可以配合构建工具实现自动注入。下面是手动引入的示例，把头部和页脚模块插入到基础框架中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-container">
<!-- 引入头部导航模块 -->
<div class="header">
<div class="logo">我的网站</div>
<nav class="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="product.html">产品中心</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</div>
<div class="main-content">
<div class="sidebar">侧边栏内容</div>
<div class="content">首页主体内容</div>
</div>
<!-- 引入页脚模块 -->
<div class="footer">
<p>版权所有 © 我的网站 备案号：粤ICP备xxxxxxxx号</p>
<p>联系邮箱：support@ipipp.com</p>
</div>
</div>
</body>
</html>
2. 动态加载（适合多页面项目）
如果项目页面较多，手动复制公共模块代码维护成本很高，我们可以使用JavaScript动态加载公共模块，修改模块时只需要改一个文件即可生效。
// 动态加载公共模块的函数
function loadModule(url, containerSelector) {
fetch(url)
.then(response => response.text())
.then(html => {
document.querySelector(containerSelector).innerHTML = html;
})
.catch(err => console.error('加载模块失败:', err));
}
// 页面加载完成后加载头部和页脚模块
window.addEventListener('DOMContentLoaded', () => {
// 加载头部模块到.header容器
loadModule('header.html', '.header');
// 加载页脚模块到.footer容器
loadModule('footer.html', '.footer');
});
对应的基础页面结构只需要保留容器即可，不需要写模块的具体内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-container">
<div class="header"></div>
<div class="main-content">
<div class="sidebar">侧边栏内容</div>
<div class="content">首页主体内容</div>
</div>
<div class="footer"></div>
</div>
<script src="module.js"></script>
</body>
</html>
四、模板保存与维护注意事项
保存可复用模板时，建议单独创建一个modules文件夹存放所有公共模块文件，和页面文件、样式文件分开管理，目录结构清晰便于后续维护。如果后续需要修改导航栏内容，只需要修改header.html一个文件，所有引入该模块的页面都会自动更新，大幅降低维护成本。另外如果需要兼容不支持fetch的旧浏览器，可以将动态加载的代码替换为XMLHttpRequest实现，保证模板在所有环境下都能正常使用。