能否将单个HTML文件中的部分代码复用至其他HTML/PHP文件？

DevOps 小满

2026-8-7

实现HTML代码片段复用的方法

针对PHP文件的方案

如果你的目标文件是PHP格式，直接用PHP的内置包含函数就能搞定：

把需要复用的下拉菜单代码单独存成一个文件，比如命名为menu.php，内容就是：

<select id="demo">
  <option value="1">Option one</option>
  <option value="2">Option Two</option>
  <option value="3">Option Three</option>
</select>

在需要引用这个菜单的PHP文件里，加一行代码就行：

<?php include 'menu.php'; ?>

要是怕找不到文件导致后续出错，就换成require，它会在文件不存在时直接终止代码执行；include只会报个警告，继续往下跑，按需选就行。

针对纯HTML文件的方案

纯HTML本身没自带文件包含功能，不过有几种实用方法可以实现：

方法1：用JavaScript动态加载

把复用代码存成menu.html，然后在目标HTML文件里加一段JS，动态把菜单插入到页面指定位置：

<!-- 先在页面里放个容器，用来装菜单 -->
<div id="menu-container"></div>

<script>
  fetch('menu.html')
    .then(res => res.text())
    .then(html => {
      document.getElementById('menu-container').innerHTML = html;
    });
</script>

方法2：用HTML模板标签（适合现代浏览器）

先在页面里定义模板，然后用JS渲染：

<template id="menu-template">
  <select id="demo">
    <option value="1">Option one</option>
    <option value="2">Option Two</option>
    <option value="3">Option Three</option>
  </select>
</template>

<div id="menu-container"></div>

<script>
  const template = document.getElementById('menu-template');
  const clone = template.content.cloneNode(true);
  document.getElementById('menu-container').appendChild(clone);
</script>

不过这个方法只能在同一个HTML文件里复用，如果要跨文件还是得用JS加载的方式。