能够使用单个 html 作为另一个 html 页面的“包含”答案

【问题标题】：Ability to use a single html that stands as an 'include' to another html page能够使用单个 html 作为另一个 html 页面的“包含”
【发布时间】：2016-05-25 15:26:49
【问题描述】：

我一直在寻找这个问题的答案，但似乎找不到确切的“单词”或“短语”来找到相关答案。

我的问题是，是否可以使用单个 html 作为另一个 html 页面的“包含”？

示例：能够使用一个包含 CSS 样式的文件，因此相同的文件可以自动出现在我包含它的网站的每个页面上。

我制作了一个扩展名为.html 的模板，其中仅包含我的整个网站主题的页眉和页脚。通常，我会将这些模板的内容复制并粘贴到每个新的 html 页面，然后为该页面添加唯一的正文内容。

我想做的是制作一个扩展名为.html 的模板，其中只包含我的页眉和页脚，这样我就可以执行include template.html 之类的操作，它会自动将template.html 页面的内容放在每个页面上页面，所以我不必每次都复制和粘贴。我发现更新/维护包含页眉和页脚脚本的网站的每个页面越来越难，因为我必须在进行更改时查找并替换这些脚本的每个实例，并且必须在整个网站中传播。

我知道 html 实际上没有 include 函数，但我认为应该有办法通过 PHP 甚至 JavaScript 等其他语言解决这个问题？我只是好奇它是否可能，如果可能，如何？

【问题讨论】：

如果 PHP 是您选择的语言，请查看 include()。您的语法实际上是正确的：include 'template.html'; 但该语句必须包含在 PHP 文件中，例如。 index.php
感谢您的快速回复，马库斯！ ...在这件事上我真的同意你的看法，但我的主要问题是...包含我的、 Navbar 和 Footer 的包含的 html 文件不会与我使用当前文档制作的样式存在兼容性问题?示例：页脚较早加载，所以它会在我的内容区域上方？
听起来你所追求的是模板引擎，例如 PHP 的 Twig
将页眉和页脚拆分为单独的文件。然后将它们包含在您需要的主模板中。 index.php: <html><?php include 'header.html';?> ... more stuff on page <?php include 'footer.html'; ?> </html> 反正就是这样。
List common html reference tags in one file的可能重复

标签： javascript php html

【解决方案1】：

我认为您有几个不同的选择。使用 PHP，您可以执行以下操作：

    <!DOCTYPE html>
    <html>
        <body>

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

        </body>
    </html>

见this link。

有了 AngularJS，你可以使用这样的东西：

    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <body ng-app="">
            <div ng-include="'myFile.htm'"></div>
        </body>
    </html>

见this link。

仅使用 HTML5，您可以尝试这样的事情：

    <object name="foo" type="text/html" data="foo.inc"></object>

见this link。

这有助于回答您的问题吗？

【讨论】：

所以基本上为了让这个对我有用..我必须：1.首先加载angular.js 2.将“模板”切片放入导航栏分离的部分页脚对吗？如果我错了，请纠正我...谢谢！
AngularJS 本身就是一头野兽。如果您仍在弄清楚将文件包含到标准模板中的逻辑，我将专注于 PHP include() 方法，直到您掌握它为止。然后扩展到框架。因为仅仅为了包含页眉和页脚而加载整个框架有什么意义？除非你打算在你的开发中继续使用/利用 AngularJS 库，否则现在不要打扰它。
我同意@Marcus。我觉得你已经说过一些关于 PHP 的事情。我使用的只是 PHP 包含页眉和页脚，它们工作得很好。

【解决方案2】：

您的问题可以通过不同的方式实现：

框架和 iframe

看看这两个标签

帧：http://www.w3schools.com/tags/tag_frame.asp
iframe : http://www.w3schools.com/tags/tag_iframe.asp

我不推荐此解决方案，因为 HTML5 不支持“框架”，并且“iframe”被制作为包含网站中的其他网站，而不是网站的一部分。您将无法将 CSS/JS 添加到“iframe”标签中的代码中。

后端解决方案

根据您正在处理的网站类型，您可以包含其他文件。以php为例：

include('youcode.html');

HTML5 解决方案

你也可以使用“object”标签：

<object width="100%" height="500px" data="snippet.html"></object>

这可能是您的最佳选择，请参阅：http://www.w3schools.com/html/html_object.asp

享受:)

【讨论】：

【解决方案3】：

这不能通过 HTML 完成，您可以做一个 PHP 包含或使用这个 W3 学校示例：

http://www.w3schools.com/howto/howto_html_include.asp

PHP 示例 template.html 重命名为 template.php

<html>
<?php include template.php ?>
</html>

【讨论】：

所以我必须将模板切片才能正常工作？提前致谢
这真的取决于模板，我通常有页眉和页脚。标题将包含任何侧栏。