将多个 HTML 文件、图像和 CSS 文件合并为一个 HTML 文件

Question

我有一个由大量 HTML 文件和一些 CSS 文件组成的网站，文件夹内有文件夹，不会引入任何外部资源。 （很确定没有 JS。）有没有办法将它们全部合并到一个 HTML 文件中？我的意思是，我单击一个链接，它会加载另一个 html 文件以及它引入的 CSS 和图像，而无需多个文件。

Answer 1

您可以将所有 HTML、CSS 和图像合并到一个 HTML 文件中，创建一个独立的网页。以下是实现这一目标的方法： 1-移动 CSS 内联：将所有外部 CSS 放置在 HTML '' 中的 '' 标签内。

2-将图像嵌入为 Base64：将图像转换为 Base64 并使用 '' 标签中的 src 属性将它们嵌入，如下所示：

<img src="data:image/png;base64,iVBORw0KGgo..." alt="image" />

3-合并 HTML 文件：将所有 HTML 文件的内容复制到一个文件中，用于每个部分和带有 #ids 的内部导航。

4-使用 JS 提高可见性：使用 JavaScript 切换部分：

  <a href="#" onclick="showSection('about')">About</a>
    <script>
      function showSection(id) {
        document.querySelectorAll('div').forEach(div => div.style.display = 'none');
        document.getElementById(id).style.display = 'block';
      }
    </script>