如何用PHP include在HTML中插入页眉页脚？本地站点实现遇阻

我正在本地开发一款影院管理网站，网站内各页面的页眉与页脚内容完全一致，仅主体内容不同，因此希望将页眉单独存为文件并嵌入到影片详情等页面中（影片详情页通过点击“立即购买”按钮打开）。尝试使用PHP include语句及<link rel="import">标签均未成功实现该功能，后续尝试使用<include>标签也无效，现附上修正后的可行方案及代码示例。

一、PHP 服务器端复用方案（推荐） #

PHP的include需要服务器环境支持，且需避免页面结构嵌套问题，具体修正步骤如下：

1. 重构页眉文件（header.php） #

仅保留页眉的HTML结构片段，移除完整的<html>/<head>/<body>标签：

<header class="header">
  <nav class="navigation-open">
    <div class="global container grid-x">
      <div class="logowrapper grid-x">
        <div class="logo-container">
          <a href="index.php">
            <img class="logo" src="../img/logo.png" alt="logo">
          </a>
        </div>
      </div>
      <div class="dashboard-nav cell grid-x">
        <nav class="choicewrapper">
          <ul class="wrapper">
            <li class="page-cinema">
              <a href="#" class="gradient-fill-hover">
                <span>A</span><span>l</span><span>&nbsp</span><span>C</span><span>i</span><span>n</span><span>e</span><span>m</span><span>a</span>
              </a>
            </li>
            <li class="page-card">
              <a href="#" class="gradient-fill-hover">
                <span>C</span><span>a</span><span>r</span><span>d</span><span>&nbsp</span><span>e</span><span>&nbsp</span><span>P</span><span>r</span><span>o</span><span>m</span><span>o</span>
              </a>
            </li>
            <li class="page-pass">
              <a href="#" class="gradient-fill-hover">
                <span>P</span><span>a</span><span>s</span><span>s</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <nav class="loginwrapper grid-x cell align-right">
        <div class="form-search-s grid-x">
          <form class="form-search" onsubmit="event.preventDefault();" role="search">
            <label for="search">Search for stuff</label>
            <input class="input-search" type="search" id="search" placeholder="Search..." autofocus required />
            <button type="submit" class="btn-search">Go</button>
          </form>
        </div>
        <div class="profile-login">
          <a href="../login/login.php" title="Accedi / Registrati">
            <i class="fas fa-user"></i>
            <span>Login</span>
            <i class="fas fa-caret-down"></i>
          </a>
          <div class="container-login open grid-x">
            <div class="dropdown-content grid-x cell">
              <div class="container-dashboard cell d-flex auto">
                <ul>
                  <li class="list-login">
                    <a href="#" class="login">
                      <i class="fas fa-user"></i>
                      <span>Login</span>
                    </a>
                  </li>
                  <li class="list-login">
                    <a href="#" class="registration">
                      <i class="fas fa-square-poll-horizontal"></i>
                      <span>Registrati</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </nav>
</header>

2. 在目标页面中引入页眉（prova.php） #

将页面后缀改为.php，并在<body>内使用include引入页眉：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- 引入字体资源 -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>
<body>
  <!-- 引入页眉 -->
  <?php include './header/header.php'; ?>
  
  <!-- 页面主体内容 -->
  <div class="main-content">
    <!-- 影片详情内容写在这里 -->
  </div>
</body>
</html>

注意事项：

• 必须通过PHP服务器（如XAMPP、WAMP）访问页面，直接打开.php文件不会执行PHP代码，需用http://localhost/路径访问。
• 确保include的文件路径与当前页面的相对位置正确。

二、前端原生复用方案（无需PHP） #

如果不想依赖服务器环境，可使用JavaScript动态加载页眉：

1. 页眉文件（header.html） #

内容同上述header.php，仅保留HTML片段。

2. 目标页面（prova.html） #

通过fetch API动态加载并插入页眉：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- 引入字体资源 -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>
<body>
  <!-- 页眉容器 -->
  <div id="header-container"></div>
  
  <!-- 页面主体内容 -->
  <div class="main-content">
    <!-- 影片详情内容写在这里 -->
  </div>

  <script>
    // 动态加载页眉
    fetch('../header/header.html')
      .then(response => response.text())
      .then(html => {
        document.getElementById('header-container').innerHTML = html;
      })
      .catch(error => console.error('加载页眉失败:', error));
  </script>
</body>
</html>

注意事项：

• 直接打开本地HTML文件可能触发CORS限制，建议使用本地服务器（如VS Code的Live Server插件）访问。

三、原方法失效原因 #

• <link rel="import">是已废弃的Web Components特性，现代浏览器不再支持。
• <include>并非HTML原生标签，无浏览器原生支持，需依赖框架或自定义JS处理。
• 原PHP用法错误：页眉文件是完整HTML文档，引入后会导致页面嵌套多个<html>/<head>/<body>标签，且.html后缀的文件不会执行PHP代码。

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