如何在 HTML 页面中正确使用 PHP 包含外部文件（如页眉页脚）-html教程-PHP中文网

php 的 include 或 include_once 可以高效复用页眉、页脚等公共代码，但必须确保文件以 .php 为扩展名，并通过本地 web 服务器（如 xampp）运行，纯静态 html 文件无法解析 php 代码。

php 的 include 或 include_once 可以高效复用页眉、页脚等公共代码，但必须确保文件以 .php 为扩展名，并通过本地 web 服务器（如 xampp）运行，纯静态 html 文件无法解析 php 代码。

在构建影院管理系统这类多页面网站时，保持页眉（header）和页脚（footer）统一且可维护至关重要。你不能直接在 .html 文件中使用 —— 这不是标准 HTML 标签，浏览器会完全忽略它；同样，已被废弃且从未被主流浏览器广泛支持。

✅ 正确做法是：将所有涉及 PHP 包含的页面改为 .php 后缀，并借助本地 PHP 环境执行。

1. 文件结构调整（推荐）

index.php（主页面）
header.php（仅包含
及导航结构，不含全局结构）
footer.php（仅包含页脚内容）
所有电影详情页如 movie-avengers.php、movie-inception.php 等

⚠️ 关键原则：header.php 和 footer.php 应只包含可复用的 HTML 片段（如
...
），不要重复、或标签，否则会导致嵌套结构错误或 SEO/渲染问题。

2. 示例代码

header.php（精简版，专注语义化复用）

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<!-- header.php -->
<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">
            @@##@@
          </a>
        </div>
      </div>
      <div class="dashboard-nav cell grid-x">
        <nav class="choicewrapper"><ul class="wrapper">
<li class="page-cinema"><a href="index.php" class="gradient-fill-hover">Al Cinema</a></li>
            <li class="page-card"><a href="cards.php" class="gradient-fill-hover">Card Promo</a></li>
            <li class="page-pass"><a href="passes.php" class="gradient-fill-hover">Pass</a></li>
          </ul></nav>
</div>
      <nav class="loginwrapper grid-x cell align-right"><div class="form-search-s grid-x">
          <form class="form-search" role="search">
            <input class="input-search" type="search" placeholder="Cerca film..." required><button type="submit" class="btn-search">?</button>
          </form>
        </div>
        <div class="profile-login">
          <a href="login/login.php"><i class="fas fa-user"></i> Login</a>
        </div>
      </nav>
</div>
  </nav></header>

index.php（主入口页）



  <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 保持不变 --><?php include_once 'header.php'; ?><main class="film-content"><h1>Benvenuti al Cate Cinema</h1>
    <p>Scopri i nostri film in programmazione.</p>
  </main><?php include_once 'footer.php'; ?>

3. 必须满足的运行前提

✅ 将所有含的文件保存为 .php（如 index.php, movie-guardians.php）
✅ 使用本地 PHP 服务器（如 XAMPP、MAMP 或 VS Code 的 Live Server + PHP插件）
✅ 访问地址必须是 http://localhost/your-project/index.php，不能双击打开 file:// 协议的 .php 文件（此时 PHP 不会被解析）
✅ 路径需准确：include_once 'header.php' 表示与当前文件同目录；跨目录用 ../includes/header.php

4. 替代方案（无 PHP 环境时）

若仅作静态原型演示，可考虑：

HTML 模板 + JavaScript 动态加载（不推荐生产环境，存在 CORS 和 SEO 限制）：

<div id="header-placeholder"></div>
<script>
  fetch('../header/header.html')
    .then(res => res.text())
    .then(html => document.getElementById('header-placeholder').innerHTML = html);
</script>

构建工具集成（如 Eleventy、Hugo、Webpack + html-loader）——适合进阶开发。

总结

PHP include 是轻量级、服务端渲染的模板复用方案，简洁可靠，但依赖正确配置。切勿混用 .html 与 PHP 语法，也不要在 header.php 中包裹完整 HTML 结构。坚持“分离关注点”：主页面负责整体骨架，header.php/footer.php 专注局部 UI 组件。这样既能提升开发效率，也便于后期统一维护样式与逻辑。

php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！