如何使網站的HTML設計具有可擴展性，可重用性和靈活性？

Question

我剛剛進入網站HTML設計的新領域。 我使用HTML，CSS，jQuery，JavaScript進行設計。 我已經使用上述技術設計了一個網站。 它幾乎有40個HTML設計網頁。 現在，我創建的設計中的需求更改來自客戶。 為了進行這些更改，我必須對幾乎所有文件進行更改。 這讓我頭疼。 這是一項非常繁瑣的工作。 現在，我想在每個文件中重用一些HTML代碼。 意味着左菜單應該包含在單獨的HTML文件中，頂部菜單應該包含在單獨的HTML文件中，頁腳菜單應該包含在單獨的HTML文件中，右鍵菜單應該包含在單獨的HTML文件中，等等。總之，我想要這個通用代碼在單獨的文件中，我應該能夠在每個HTML文件中包含所有這些文件。 這樣我只能在不同的HTML文件中執行HTML頁面的主體。 CSS和jQuery文件也應該可重用。 但是我不想使用任何服務器端技術來包含這些文件。 有人可以幫助我實現HTML代碼的可重用性和可擴展性嗎？ 提前致謝。

Answer 1

使用jquery或將頁面制作為PHP，並在需要常用部分或頁面的php標記中使用這些功能之一。

• include()
• include_once()
• require()
• require_once()

請查看此內容以獲取有關使用方法的更多信息，或進行一些簡單的Google快速搜索。

編輯：這是一個JQuery實現，然后全部在瀏覽器中執行：

在一些腳本標簽內：

$(document).ready(function(){
    $.get( "test.html" );
});

它遵循此頁面上的語法。 另外，看看W3school的jquery教程 。 另外，您可能希望在W3school上查看此頁面 ，以了解如何在所需的位置添加html頁面的內容。

Answer 2

跨頁面共享HTML的最簡單方法是Server Side Includes 。 您的用戶名似乎意味着您知道您的PHP，因此這將是處理它的最簡單方法（使用PHP）。 如果您絕對不能將其用作服務器端解決方案，則可以使用JS來代替 。

一種更復雜但可能更可取的處理方法是使用模板引擎。 大多數內容管理工具都包含此內容。 WordPress將是最常見的之一。

至於CSS和JS，它們應該已經在單獨的文件中，並且您應該在每個HTML頁面中鏈接到它們。