如何使网站的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页面中链接到它们。