如何引用全局html_全局HTML文件（如header/footer）引用方法

通过引用全局HTML文件可统一管理网页头部和底部，提升维护效率。具体方法包括：一、使用JavaScript动态加载外部HTML内容，适用于静态网站；二、利用iframe嵌入header和footer页面，结构清晰；三、采用服务端包含（SSI）指令在服务器合并文件，需配置.shtml扩展名；四、使用Vue、React等前端框架将公共部分定义为组件，构建时自动注入；五、通过Node.js或PHP在服务端读取并拼接HTML片段，返回完整页面。各方法分别适用于不同技术场景，确保公共部分修改时只需更新单个文件。

如果您在多个页面中需要保持一致的头部或底部内容，直接在每个HTML文件中重复编写会导致维护困难。通过引用全局HTML文件（如header/footer），可以集中管理这些公共部分，修改时只需更新一个文件即可生效。以下是实现这一目标的几种方法：

一、使用JavaScript动态加载

利用JavaScript在页面加载时动态插入外部HTML文件内容，适用于静态网站或不依赖服务端技术的场景。该方法通过XMLHttpRequest或fetch API读取外部文件并插入指定位置。

1、创建一个公共的header.html和footer.html文件，包含需要复用的HTML代码。

2、在目标页面中添加用于插入内容的容器，例如：zuojiankuohaophpcndiv id="header"></div> 和 <div id="footer"></div>。

立即学习“前端免费学习笔记（深入）”；

3、在页面底部添加script标签，使用fetch函数请求header.html并将其内容写入容器：

4、fetch('header.html').then(response => response.text()).then(data => { document.getElementById('header').innerHTML = data; });

5、对footer部分执行相同操作，调用footer.html并注入到对应div中。

二、利用iframe嵌入全局文件

通过iframe标签将header和footer作为独立页面嵌入当前页面，结构清晰且兼容性好，适合不需要深度集成样式的场景。

1、将公共头部保存为header.html，底部保存为footer.html。

2、在主页面中使用<iframe src="header.html" frameborder="0" width="100%"></iframe> 引入头部内容。

3、在主要内容区域下方插入另一个iframe用于加载footer.html。

4、设置iframe的高度和样式以匹配整体布局，确保视觉连贯。

三、服务端包含（SSI）方式引入

在支持服务器端包含（Server Side Includes）的Web服务器上，可以在HTML文件中使用特殊指令自动合并外部文件内容，最终输出完整的页面。

1、确保Web服务器（如Apache）已启用SSI功能，并配置.htm或.shtml扩展名解析。

2、将需要复用的部分保存为单独文件，例如include-header.html和include-footer.html。

PhotoAid Image Upscaler

PhotoAid出品的免费在线AI图片放大工具

52

查看详情

3、在目标页面中使用SSI语法插入文件：<!--#include file="include-header.html" -->。

4、在页面末尾添加类似的SSI指令引入footer文件。

5、部署后访问页面时，服务器会自动将指定文件内容合并到响应中。

四、使用现代前端框架组件化引入

采用Vue、React等前端框架可实现真正的组件化开发，将header和footer定义为可复用组件，在构建阶段自动注入到各个页面中。

1、在项目中创建Header.vue和Footer.vue组件文件，分别封装头部和底部结构。

2、在主应用或布局组件中通过import语句导入这两个组件。

3、在模板中注册组件并使用自定义标签插入，如<Header /> 和 <Footer />。

4、运行构建工具（如Webpack）打包项目，生成静态HTML文件时自动包含组件内容。

五、通过Node.js或PHP服务端渲染引入

在服务端使用编程语言读取并拼接HTML片段，返回完整页面给客户端，适用于动态网站或需要SEO优化的场景。

1、使用Node.js的fs模块读取header.html和footer.html文件内容。

2、在处理HTTP请求时，先读取公共部分字符串，再与主体内容拼接。

3、通过res.writeHead和res.end方法发送组合后的完整HTML响应。

4、若使用PHP，则可在页面顶部使用include 'header.php'; 语句加载头部。

5、在页面底部使用相同语法引入footer.php文件完成结构闭合。

以上就是如何引用全局html_全局HTML文件（如header/footer）引用方法的详细内容，更多请关注php中文网其它相关文章！