Html 将链接元素和脚本元素存储在单独的文件中

Html 将链接元素和脚本元素存储在单独的文件中,html,Html,我们可能需要在HTML页面的头部元素中放置大量链接元素和脚本元素。此外,也可能有许多页面具有相同的上述元素。因此,我们可以将所有的链接放在一个文件中,并且只将包含该文件的链接放在HTML头元素中吗 例如: <link href="links.something"> etc 等 而不是 <HEAD> <link href="css/home.css" rel="stylesheet" type="text/css" media="screen" /> &l

我们可能需要在HTML页面的头部元素中放置大量链接元素和脚本元素。此外,也可能有许多页面具有相同的上述元素。因此,我们可以将所有的链接放在一个文件中,并且只将包含该文件的链接放在HTML头元素中吗

例如:

<link href="links.something"> etc
而不是

<HEAD>

<link href="css/home.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/images.css" rel="stylesheet" type="text/css" media="screen" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>`

<HEAD>

`

您可以从服务器端脚本(比如PHP)动态生成它们,我已经使用CodeIgniter MVC框架实现了这一点,尽管您可以使用纯PHP实现

您还可以使用模板引擎(比如Smarty)来完成同样的事情

纯php:

<head>
include('js_files.php');
</head>

我对Smarty不太确定,因为我只是从它开始,这是我开始使用它的主要原因,不幸的是,我丢失了我看到的教程的链接。

在您的情况下,最好使用PHP
包含
s
例如,页面将分为以下部分进行编码:
header.PHP
footer.PHP
,主要内容也将动态加载

<html>
<head>
<?php 
include('header.php'); //PHP file that holds all the links(not anchor links) and scripts
?>
</head>
<body>
<?php 
include('body.php?page=whatever');
include('footer.php');
?>
</body>
</html>


这样,您只需编辑一个文件即可对多个文件进行更改。

您应该在生产站点中缩小并合并CSS和JS文件。这样,您只加载一个CSS和一个JS文件(可能是jQuery或CDN中的其他库)?如果你试图压缩,你所做的一切就是增加加载时间。@Blender:有程序或工具吗?@nirosharathnayaka:类似的方法应该会奏效:@bobthyasian:在我的网站上,我有100多个页面。因此,当我添加新的或删除一个元素时,我必须编辑所有页面。例如,我将升级jQuery1.8。。。到1.9。。。我必须编辑所有的页面。但如果我只有一个页面,所有元素都在一个单独的页面中,那就容易多了。类似于将PHP数据库连接保存在一个单独的文件中。我不熟悉PHP框架和模板引擎。请提供任何教程或示例。谢谢。成功了。但这是一种标准方式吗?因为我从未在head元素中看到过php部分。但是它成功了。PHP不在乎这一点。只有客户端脚本,如javascript。这实际上是大多数CMS(比如WordPress)的工作方式。我的意思是,作为程序员,这是一种标准/好的方式吗?因为它有一个在html中放置元素的标准方法。只要你保持简单。
<html>
<head>
<?php 
include('header.php'); //PHP file that holds all the links(not anchor links) and scripts
?>
</head>
<body>
<?php 
include('body.php?page=whatever');
include('footer.php');
?>
</body>
</html>