如何为HTML页面实现高效通用的全局页眉与页脚？

下面给你几个靠谱的方案，解决多页面共享页眉/页脚、统一维护的问题，针对你之前JS和PHP没成功的情况，附上正确的代码示例：

方法一：JavaScript 动态加载（无需服务器环境也能跑，适合静态页面） #

1. 把你的页眉代码单独存成一个文件，比如命名为 header.html，内容只保留页眉核心部分（去掉完整HTML结构，只留以下内容）：

<div class="header">
    <div class="left-section">
        <img class="company-logo" src="icons/company new logo.png">
    </div>
    <div class="middle-section">
        <div class="navbar-header">
            <a href="#home">Home</a>
            <div class="subnav">
                <button class="subnavbtn">About<i class="fa fa-caret-down"></i></button>
                <div class="subnav-content">
                    <a href="pages/about-business-goals-values.html">Business Goals & Values</a>
                    <a href="etc">etc1</a>
                </div>
            </div>
            <div class="subnav">
                <button class="subnavbtn">Candidates<i class="fa fa-caret-down"></i></button>
                <div class="subnav-content">
                    <a href="pages/candidate-feedback.html">Feedback</a>
                    <a href="pages/candidate-subit-cv.html">Submit CV</a>
                    <a href="etc">etc2</a>
                </div>
            </div>
        </div>
    </div>
    <div class="right-section">
        <button>Submit CV</button>
    </div>  
</div>

2. 在每个需要加载页眉的HTML页面里，找到<body>开头的位置，插入这段JS代码：

<body>
    <div id="header-placeholder"></div>
    <script>
        fetch('header.html')
            .then(response => response.text())
            .then(data => {
                document.getElementById('header-placeholder').innerHTML = data;
            });
    </script>

    <!-- 页面自身内容 -->
    ...
</body>

注意事项：

• 若页面放在子文件夹（比如pages/），fetch路径要改成../header.html，确保能定位到文件
• 本地直接打开HTML文件时，部分浏览器会因跨域限制无法加载，建议用VS Code的Live Server插件等本地服务器打开

方法二：PHP 引入（适合有PHP环境的服务器） #

服务器端直接合并内容，比JS更稳定，无加载延迟：

1. 同样把页眉代码存成header.php（内容和上述header.html一致）
2. 将HTML页面后缀改成.php（比如index.html改为index.php），在需要插入页眉的位置写：

<body>
    <?php include 'header.php'; ?>

    <!-- 页面内容 -->
    ...
</body>

注意事项：

• 服务器需支持PHP（大部分虚拟主机默认支持）
• 路径问题：页面在pages/文件夹时，要写成<?php include '../header.php'; ?>
• 必须通过服务器访问（比如http://localhost/index.php），不能直接打开.php文件

方法三：HTML 原生导入（简单但兼容性有限） #

HTML5原生导入功能，仅Chrome等部分浏览器支持，适合内部项目：

1. 页眉存为header.html
2. 在页面<head>中添加：

<link rel="import" href="header.html" id="header-import">

3. 在<body>中插入：

<body>
    <div id="header-placeholder"></div>
    <script>
        const importDoc = document.getElementById('header-import').import;
        const header = importDoc.querySelector('.header');
        document.getElementById('header-placeholder').appendChild(header.cloneNode(true));
    </script>
</body>

通用注意点 #

• 页脚实现逻辑和页眉完全一致，把页脚代码存成footer.html/footer.php即可
• 所有页面必须保留header.css的引入，确保加载的页眉能正常显示样式
• 你之前尝试JS/PHP失败，大概率是文件路径错误或未通过服务器访问，优先检查这两点

内容的提问来源于stack exchange，提问作者TeePee