我会说PHP也包含，在HTML中有一种方法，但它不是很好地使用它，iframes.

您可以使用JavaScript创建一个HTML模板并将其插入body中。
下面是一个示例

// to put inside myHeaderFooterTemplate.js at the same level of your html pages 

// create a header 
let header = document.createElement('header');
//make the HTML template to insert inside your header 
let headerContent = `<h1>HTML Ipsum Presents</h1>
<nav><a href="#">link 1</a> <a href="#">link 2</a></nav>
<p>some more text to spray all over the site</p>`;
//insert the header right before anything else
document.querySelector('body').prepend(header);
// fill your header with HTML template
document.querySelector('body>header:first-of-type').innerHTML = headerContent;

// Now again with a footer:

let footer = document.createElement('footer');
document.querySelector('body').append(footer);

let footerContent = ` 
<nav><a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="#">link 4</a></nav>
<p>some more text to spray all over the site</p>`;

document.querySelector('body>footer:last-of-type').innerHTML = footerContent;

/* you can style those element added to your HTML alike anyother */
header,footer {background:#bee;border:solid 1px #0008;text-align:center;}
footer nav {display:flex;justify-content:space-around;border-bottom:ridge}

<script src="myHeaderFooterTemplate.js"></script>
<!-- let say this is index.html header and footer will be inserted via a javascript -->
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
  elit sit amet quam. Vivamus pretium ornare est.</p>

了解javascript在这里做什么的资源：

• createElement
• prepend
• append
• template strings
• innerHTML

最后是如何将javascript链接到html文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

我在网上找到了这个，而且确实有效而迅速地工作。但是，我对最抽象的系统逻辑的理解水平并不“高级”，所以使用它，但要像它可能被感知到的那样至关重要。
基本上
1a）转到这里https://releases.jquery.com/;1b）从最新的jquery Core版本（即3.6.4）点击“minified”，紧挨着“uncompressed”，“slim”，“slim minified”。

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

2a）现在，在使用该代码之前，创建一个名为header.html的文件和一个名为footer.html的文件。
2b）在它们中，你必须分别粘贴你从index.html中剪切下来的代码，通常是相对于页眉和页脚的，当然是 Package 到<header id="header"></header>标签和<footer id="footer"></footer>标签中;在这一步的最后，你必须创建两个新的文件，它们相互包含了它们应该包含的代码，并被 Package 到它们的标签中。2一个文档用于页眉，包含页眉内容，一个文档用于页脚，只包含页脚内容。3（！！！！soooo无用和多余的清晰，pwef！！！）
2c）现在已经创建了两个新文件（“header.html”和“footer.html”），将它们保存在index.html文件所在的同一目录（或文件夹）中，或者您喜欢的任何位置;
现在回到编辑器中我们的原生index.html文件，没有页眉和页脚！！！（他真可怜！）
3a）让我们用公式替换剪切的代码，这样就可以让它恢复生机。所以，把从jquery中获得的代码粘贴到你的文档的</head>之前。
3b）就在下面，创建（通过编写）另一个脚本来复制下面的行，并在$('之后提到您自己的id，以及放置您自己以前创建的头文件的名称，在我们的示例中，称为'header.html'。

<script>
     $(function(){ 
         $('#header').load('header.html');
         $('#footer').load('footer.html');
     });
</script>

3c）现在，在标签的正上方粘贴以下代码，以替换先前剪切的<header></header>原始代码。

<div id="header"></div>

3d）对页脚做同样的操作，但是将下面的代码行放在主体的末尾，就在标记之前。

<div id="footer"></div>

对要在多页网站中创建的每个HTML文件执行此操作
注意：当您创建header.html和footer.html文件时，不要忘记在<header id="header"></header>和<footer id="footer"></footer>标记中包含相应的id！
总结：
1.剪切标头并创建仅包含标头代码的文件，标头代码包含在标签中;
1.对页脚执行相同操作;
1.将jquery代码和相关脚本粘贴到每个无页眉和页脚的HTML文档中;
1.使用您的ID和文件名自定义脚本;
1.创建一个<div></div>，它在之前放置页脚和页眉的区域中 Package ID（参见示例中的代码）。
就这样。好好享受吧！