导入 HTML 文件，包括 CSS答案

【问题标题】：Import HTML File, Including CSS导入 HTML 文件，包括 CSS
【发布时间】：2021-04-12 10:36:05
【问题描述】：

美好的一天。

我希望能够将我设计的 HTML 元素导入到我的文档中。我会将它用于页眉和页脚。当我想更改页眉和页脚的某些内容时，不必编辑服务器上的每个文档，我只想编辑一个文件，这将更改所有文档。我尝试过<iframe>，通过嵌入仅打开标题的页面，但有太多事情可能出错（考虑到我的一半用户将使用不同的移动设备）。

如何将我服务器上的 HTML 文件导入另一个文件而不复制它？

【问题讨论】：

HTML 中没有这样的东西。您必须研究一种服务器端编程语言
最简单的可能是Server Side Includes，具体取决于您使用的网络服务器。除此之外，您实际上是在寻找从服务器端编程语言开始的。有多种服务器端语言/框架/等。您可以使用，并且您描述的功能在其中任何一个上都是非常介绍的。

【解决方案1】：

您可能想看看Webcomponents！ Webcomponents 允许您编写自己的控件并导入它们，而无需将它们复制粘贴到任何地方的网页中。例如，如果您有自己的标题控件，您可以在文件中定义它（例如 myHeader.js）：

class MyHeader extends HTMLElement
{
  /* Your header style and layout */
}
window.customElements.define('my-header', MyHeader );

然后在您的 HTML 中引用：

<!-- Include control -->
<script src="controls/myHeader.js"></script>


<!-- Later in your file -->
<my-header> </my-header>

这样，您不必在每个文件中复制粘贴整个控件，同时还可以重复使用该控件。

【讨论】：