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

Question

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

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

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

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

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

我知道html实际上没有include功能，但是我认为应该通过其他语言（例如PHP或JavaScript）解决此问题吗？ 我只是想知道它是否可能，如果可能的话，如何？

Answer 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>

看到这个链接。

借助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>

看到这个链接。

仅使用HTML5，您可以尝试执行以下操作：

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

看到这个链接。

这是否有助于回答您的问题？

Answer 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 width="100%" height="500px" data="snippet.html"></object>

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

请享用：）

Answer 3

这无法通过HTML完成，您可以进行PHP包含，也可以使用以下W3学校示例：

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

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

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

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-05-25 15:37:03

解决方案2
2 2016-05-25 15:41:11

解决方案3
1 2016-05-25 15:32:51

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-05-25 15:37:03

解决方案2 2 2016-05-25 15:41:11

解决方案3 1 2016-05-25 15:32:51

解决方案1
2 已采纳 2016-05-25 15:37:03

解决方案2
2 2016-05-25 15:41:11

解决方案3
1 2016-05-25 15:32:51