Question

我已经尝试过在这里和Google上寻找此内容，但我还没有真正找到这个特定问题的答案，因此我不确定是否有某些内容-一个术语或一些我需要寻找的内容，因此抱歉，这是一个常见问题。

无论哪种方式，例如，我正在建立一个包含许多部分的网站，并且我希望这些部分是模块化的，因此每个部分都是自己的html文件。因此，基本上，我可以在主要html文件中的任何位置包含此小模块，或者可以将导航栏和页脚仅包含在其他HTML页面上，而不必重写代码行。

仅凭HTML就能做到吗？

Answer 1

编辑： object标签是值得探索的一个选项。您可以在页面上包含另一个文件（任何类型）。

与下面的其他选项相比，这似乎是一个更合适的选项。

<object type="text/html" data="file.html"></object>

它的工作原理与HTML5导入类似。

object标签是HTML 4的一部分，因此它是supported，因为IE6 +，Firefox 2 +，Chrome 1+等。

使用HTML5 Import。它确实实施它的支持/浏览器非常有限。

<link href="extern.html" rel="import" />

除此之外，如果要从客户端执行操作，则至少需要Javascript才能导入另一个文件。后端的功能多种多样，具体取决于您的技术。

Pete强调的另一种可能性是使用iframes（尽管我不希望使用它们）。

强烈建议您不要在here上看到使用HTML5导入。

以下是从以上链接中摘录的一些笔记：

MS Edge状态：考虑中
Chrome状态：已弃用
Firefox状态：未计划
WebKit状态：不考虑
Firefox尚无计划支持HTML导入，尽管目前可以通过about：config

Answer 2

否，使用纯HTML不能做到这一点。

替代品：

运行类似PHP的服务器端代码
使用静态网站生成器来构建您的页面
在页面上使用javascript引入常用组件（尽管当您尝试消除页面之间的代码重复时，这种方法无法正常工作）

Answer 3

您无法使用纯HTML做到这一点，但可以像下面的jQuery示例一样在html文件中的script标签内使用javascript

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
            $('#header').load("header.html");
            $('#footer').load("footer.html");
         });
      </script>
   </head>
   <body>
      <div id="header"></div>
      your content........
      <div id="footer"></div>
   </body>
</html>

Answer 4

您可以做的是创建一个php文件，在其中编写html代码，然后在index.php中调用该文件。例如：

Tis是您的索引.php，文件footer.php是包含所需html的另一个文件。

<html>
<body> 
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<?php include 'footer.php';?>
</body>
</html>

或

您还可以在html文件和src中创建iframe，并为其指定特定大小，然后可以引用所需的html文件

<iframe src="../../something.html"></iframe>

有没有办法将HTML导入HTML文件？

4 个答案: