需遵循语义化布局与模块解耦原则：一、用语义化class的div搭建HTML5框架；二、将公共模块存为独立HTML片段；三、用fetch动态加载模板；四、用SSI服务端包含；五、用template元素克隆复用。
如果您希望使用 HTML5 标准结构，通过 div 元素搭建页面基础框架，并将头部、导航、侧边栏、主内容区、页脚等公共模块抽象为可复用的模板文件，则需遵循语义化布局与模块解耦原则。以下是实现该目标的具体方法：
一、基于语义化 div 的 HTML5 框架结构搭建
此方法不依赖任何构建工具或框架，纯手工编写符合 HTML5 规范的结构化 div 布局，确保各区域命名清晰、层级合理，便于后续提取为独立模板片段。所有模块均使用具有明确含义的 class 名称，避免语义模糊的命名如 box、wrap 等。
1、新建一个空白 HTML 文件，声明 HTML5 文档类型：a style="color:#f60; text-decoration:underline;" title= "html"href="https://www.php.cn/zt/15763.html" target="_blank">html>。
2、在
内按顺序添加五个核心 div 区域，分别赋予 class：header、nav、aside、main、footer。立即学习“前端免费学习笔记（深入）”；
3、为每个 div 添加简短示意性文本内容，例如在 header 中写“网站标题”，在 nav 中写“首页 | 关于 | 联系”，在 main 中写“主内容区域”。
4、为每个 class 编写基础 CSS 样式，设置最小高度、边框及内边距，用于视觉区分模块边界。
二、将公共模块保存为独立 HTML 片段文件
此方法将重复使用的结构（如导航栏、页脚）从主页面中剥离，单独保存为 .html 后缀的片段文件，便于在多个页面中通过服务器端包含或前端加载方式复用，提升维护效率。
1、创建新文件，命名为 header.html，仅包含完整语义化 header 结构及其内部元素，不包含 、
或 标签。2、同理创建 nav.html、footer.html 两个文件，每个文件只保留对应模块的 div 及其子元素。
3、确保所有片段文件保存在同一项目目录下的 /templates/ 子目录中，路径统一且无空格或中文字符。
4、在主页面中预留占位 div，例如
，并为每个占位符添加唯一 data-template 属性，值为对应片段文件名。三、使用原生 JavaScript 动态加载模板片段
此方法利用 fetch API 在页面加载完成后异步获取外部 HTML 片段内容，并注入到指定容器中，无需后端支持即可实现模块复用，适用于静态站点或轻量级项目。
1、在主页面
底部添加
