html - 将 html 源拆分为多个文件

标签 html

HTML 是否支持将源代码拆分为多个文件?我正在寻找 C++ 的一些等价物 #include;或者可能像 C# 的 partial;一个可以采用源路径并在该位置注入(inject)文件内容的元素。

如果之前有人问过这个问题,我深表歉意。 Google 和 SO 搜索并没有返回多少。我不是网络专家,但我找到的唯一解决方案是使用 iframe,许多人出于各种原因不喜欢它。

只是我的 html 源变得越来越大,我想通过拆分成多个文件来管理它。

最佳答案

你不能,至少在平面 HTML 中不能。您可以做的是使用 Javascript 加载和放置片段。 iframe 也不理想,因为与 #includepartial 之类的指令相反,这些片段永远不会被编译成一个单一的页面。

不过,我认为了解您的网页将如何提供服务在这里很重要。这是一个静态网站吗?因为在这种情况下,我会用您选择的语言编写一个简单的脚本来编译页面。假设您有这样一个基础:

<html>
    <head>
        <!-- ... -->
    </head>

    <body>
        {{ parts/navigation.html }}
        <!-- ... -->
    </body>
</html>

您可以编写一个脚本,逐行运行此文件并将内容加载到一个名为的变量中,例如,compiled_html。当它找到 {{ file }} 时,它会打开 file,读取其内容并将其附加到 compiled_html。当它结束时,它将变量的内容写入 HTML 文件。您将如何实现它取决于您所知道的语言。我确信在 C# 中执行此操作非常简单。

通过这种方式,您将能够将 HTML 页面的源代码拆分为多个文件(并在需要时重复使用某些部分),但您最终仍会得到功能齐全的单个文件。

关于html - 将 html 源拆分为多个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43038935/

相关文章:

php - OnClick 在页面加载/刷新时激活

html - 如何对齐表单中的元素,以便问题在左侧而选项在右侧

html - 与 FireFox 不一致的表格边框

javascript - Jquery比较两个表中的行

html - 父div的双倍高度?

javascript - 如何在不使用 iframe 的情况下在页面上显示博客?

html - 列表标题的 aria 标签,语义正确吗?

html - 响应式 div 的图像左右没有任何边距

javascript - 查找正文中的特定文本并通过 JS 将其删除

html - 调整窗口大小时, slider 图像未占用全宽,因此会出现一些背景空间