如何将一个 HTML 文件包含到另一个文件中？

Posted 2023-02-21

【中文标题】如何将一个 HTML 文件包含到另一个文件中？

【英文标题】：How to include one HTML file into another?

【发布时间】：2011-11-24 11:10:55

【问题描述】：

我已经在 *** 上尝试了所有可能的问题，但无法解决这个问题...

    <!--#include virtual="include.shtml"-->
    <!--#include virtual="include.html"-->
    <!--#include file="include.shtml"-->
    <!--#include file="include.html"-->
    <!--#include virtual="/include.shtml"-->
    <!--#include virtual="/include.html"-->
    <!--#include file="/include.shtml"-->
    <!--#include file="/include.html"-->
    <? include("/include.shtml"); ?>
    <? include("include.shtml"); ?>
    <? include("/include.html"); ?>
    <? include("include.html"); ?>

我尝试使用运行在 localhost/include/index.html 或 file:///home/sahil/Desktop/include/index.html 的 apache 服务器，其中包含以上所有内容，但它们都不适合我 :( .Now考虑到我的 index.html 和 include.html 都在同一个目录中，我应该使用哪种方法将一个 HTML 文件包含到另一个文件中？？？

【问题讨论】：

您拥有的第一种代码是SSI（灰色的），第二种是php（黑色和酒红色的）。这些不适用于 HTML 页面。在 HTML 页面中，您可以尝试使用 AJAX（最简单的方法是使用 jQuery's .load）或 iframe。

【参考方案1】：

将您想要包含的 html 文件添加到 php 文件中。 （仅将扩展名 - 更改为 .php）。如果文件在一个目录中，则包含代码为：

<?php include "nameoffile.php" ?>

【参考方案2】：

HTML 是静态的

不可能在另一个带有静态 HTML 的 HTML 页面中包含一个 HTML 页面，因为 HTML 根本不支持它。要使您的 HTML 动态化，您有两种可能性：使用客户端脚本或使用服务器端技术。

...除非您开始使用frames（HTML5 标准放弃）或iframes，否则它们很可能不是解决方案，因为它被视为完全不同的网页。

客户端解决方案

您可以创建一个 javascript 文件并使用 document.write function 编写您的 HTML，然后将 JavaScript 文件包含在您需要的任何地方。此外，您可以为此使用一些 AJAX，但有一些 JavaScript 库可以减轻您的负担，例如流行的 jQuery 库。

但是，我不建议使用客户端解决方案，因为它的麻烦多于其价值...

服务器解决方案

目前有许多服务器端解决方案：ASP、ASP.NET、ASP.NET MVC、Java、PHP、Ruby，不胜枚举。您需要了解的是，服务器端技术可以描述为特定服务器端语言的解析器，以自动执行某些繁琐的任务并执行可能对客户端造成安全风险的操作。

当然，您需要拥有托管此类站点和配置托管环境的方法。例如，您可以使用Apache 托管一个 PHP 网站，甚至可以拥有一个开发人员托管环境，例如 /MAMP/LAMP/WAMP。

您可以在online documentation 中查看在 PHP 中包含页面的示例。

就个人而言，我更倾向于使用服务器端解决方案。

【参考方案3】：

HTML 没有“包含”机制——我不确定您在 *** 上哪里看到过这些解决方案。您可能一直在寻找有关 PHP 或 ASP 等服务器端语言的答案。

对于只有静态页面和 JavaScript 的“纯”HTML，您确实有以下选项：

框架 阿贾克斯

请参阅 my answer here 了解示例代码和更多详细信息（如果这对您很重要，还有关于 SEO 的警告）。

【讨论】：

你能告诉我如何通过其中任何一个吗？？

@SahilGrover 我刚刚编辑了我的答案，以添加指向我之前发布过的更详细答案的链接。看看这是否有助于澄清事情。

我已经看到了你的答案，iframe 不是一个好主意，因为它提供了很大的余量，如果 broswer 禁用了 javascript，ajax 甚至更糟糕。

@SahilGrover 您应该能够设置iframe 的样式以删除所有镶边、边距和滚动条。是的，您对 JavaScript 的看法是正确的，我在其他答案中也提到了这一点。

如果这些都不适合您（并且没有理由期望这些机制会满足所有需求），那么您可能会考虑使用 PHP 来包含内容，而不将其用于任何其他服务器端脚本。您似乎已经在支持这种语言 (Apache httpd) 的服务器上。

【参考方案4】：

前者语法为SSI，后者为PHP。两者都是服务器技术，只有从支持并配置为检查文件语法的 HTTP 服务器访问时才有效（这通常意味着您必须打开支持并使用 .shtml/.php 文件扩展名（或更改从默认配置到确定要检查哪些文件））。其他服务器端技术也可用。

HTML 本身中唯一的“包含”机制是 (i)frames 和 objects。

您还可以考虑一个模板系统，例如 TT，您可以将其作为构建步骤运行以生成静态 HTML 文档（注意：TT 也可以即时使用）。

【讨论】：

我建议的多个（主要是超链接）事情中的哪一个？

我尝试使用 Iframe，这不是一个好东西。告诉我对象，我的框架通过为其设置额外的边距和填充来扰乱整个页面 CSS

当用于包含 HTML 文档时，对象实际上是具有较差浏览器支持的 iframe。所以从 iframe 切换到 object 只会产生问题（除了那些涉及 beancounters 的问题，当问题需要其他东西以获得最佳解决方案时，需要 HTML 的 Strict 变体）。

有没有办法将一个html文件静默放置到其他文件中，没有边距，没有填充没有边框？？

未内置在 HTML 中。这就是人们使用模板系统和包含的原因。