如何在另一个文件中包含一个HTML文件

使用HTML包括可以大大简化您的网站的管理

转到任何网站并浏览页面,您很快就会意识到,虽然每个页面在许多方面可能有所不同,但在其他网页中也非常相似。 几乎所有的网站都包含在网站每个页面上重复的设计元素。 在每个页面上可以找到的网站元素的一些示例是徽标所在的标题区域,导航区域和页脚区域。

网站上的重复元素可以确保用户体验的一致性。 访问者不需要在每个页面上定位导航,因为一旦他们找到了导航,他们就会知道他们访问的网站的其他页面上的位置。

如何使网页设计更高效

作为负责管理网站的人员,这些重复的领域提供了一个挑战。 如果您需要对该领域的某些内容进行更改,该怎么办? 例如,如果您的页脚(位于网站的每个页面上)都包含一年的版权声明,那么当该年发生变化并且您需要编辑日期时会发生什么? 由于该部分位于每个页面上,因此您现在需要单独编辑您网站的每个页面以进行更改 - 或者是否?

包含的内容可以消除必须编辑您的网站的每个页面的重复内容。 相反,您只需编辑一个文件,整个网站及其中的每个页面都会得到更新!

让我们看看几种方法,您可以将此功能添加到您的网站中,并在其他许多方面包含一个HTML文件。

内容管理系统中的重复内容

如果您的网站使用CMS ,那么它可能使用某些模板或主题是该软件的一部分。 即使您从头开始自定义构建这些模板,该网站仍然将这个框架用于页面。

因此,这些CMS模板将包含在每个页面上重复的网站区域。 您只需登录到CMS的后端并编辑必要的模板。 使用该模板的网站的所有页面都将被更新。

即使您的网站没有内容管理系统,您仍然可以利用包含的文件。 在HTML中,可以帮助您更轻松地管理网站的这些模板化区域。

什么是HTML包含?

include是HTML的一部分,它本身不是完整的HTML文档。 相反,它是可以通过编程插入完整网页的另一页的一部分。 大多数包含文件都是在网站的多个页面上重复的上述项目。 例如:

在页面上包含这些重复的区域是有好处的。 不幸的是,插入文件的过程并不是单独使用HTML所能发生的,因此您需要有一些类型的程序或脚本来将您的包含文件添加到您的网页中。

使用服务器端包含

服务器端包含,也称为SSI,最初是为了让Web开发人员在其他页面中“包含”HTML文档而开发的。

基本上,当页面在服务器上运行并发送到Web浏览器时,在一个文档中找到的代码片段会被包含到另一个文档中。

SSI包含在大多数Web服务器上,但您可能必须启用它才能使其工作。 如果您不知道您的服务器是否支持SSI,请联系您的托管服务提供商

以下是一个如何使用SSI在您的所有网页中包含HTML片段的示例:

  1. 将HTML网站的常见元素保存为单独的文件。 例如,您的导航部分可能会保存为navigation.htmlnavigation.ssi
  2. 使用以下SSI代码在每个页面中包含该HTML文档的代码( 使用引号替换文件的路径和文件名 )。 {C}
  1. 将此代码添加到要包含该文件的每个页面上。

使用PHP包含

PHP是一种服务器级的脚本语言。 它可以做很多事情,但一个常见的用法是在页面中包含HTML文档,就像我们刚刚用SSI覆盖的那样。

像SSI一样,PHP是服务器级技术。 如果您不确定您的网站是否具有PHP功能,请联系您的托管服务提供商。

以下是一个简单的PHP脚本,您可以使用它在任何启用PHP的网页上包含一段HTML代码:

  1. 保存您的网站的常见元素(如导航)的HTML以分隔文件。 例如,您的导航部分可能会保存为navigation.htmlnavigation.ssi
  2. 使用以下PHP代码将HTML包含在每个页面中( 用引号将文件的路径和文件名替换掉 )。 navigation.php“);?>
  3. 在您想要包含该文件的每个页面上添加相同的代码。

JavaScript包括

JavaScript是在您的网站页面中包含HTML的另一种方式。 这具有不需要服务器级编程的优点,但它稍微复杂一些 - 它显然适用于允许使用Javascript的浏览器,除非用户决定禁用它,否则这种做法大多数情况下都是如此。

以下是如何使用JavaScript包含HTML片段的方法

  1. 将网站常用元素的HTML保存为JavaScript文件。 任何写在这个文件中的HTML都必须用document.write函数打印到屏幕上。
  2. 将该文件上传到您的网站。
  3. 使用