能夠使用單個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