PHP函数使用教程：如何在页面中引用外部JS和CSS文件？
在网站开发中，为了美化和增强页面效果，我们除了使用HTML语言编写页面内容之外，还需要使用外部的JavaScript和CSS文件。在PHP页面中如何引用外部JS和CSS文件呢？下面为大家介绍具体的方法和注意事项。
一、在PHP页面中引用外部CSS文件
1. 创建CSS文件
首先，在网站根目录下创建一个CSS文件夹，用来存放所有的CSS文件。
在CSS文件夹中创建一个或多个CSS文件。例如，我们创建一个名为style.css的CSS文件，里面包含以下样式：
body{
background-color: #f5f5f5;
}
h1{
font-size: 26px;
color: #333;
text-align: center;
}
p{
font-size: 14px;
color: #666;
line-height: 1.6em;
}
2. 在PHP页面中引用CSS文件
在PHP页面中使用<link>标签引用CSS文件。打开需要引用CSS文件的PHP文件，将以下代码添加到<head>标签中：
<link rel="stylesheet" type="text/css" href="css/style.css">
其中，rel属性定义文档与链接之间的关系，type属性定义链接文件的类型，href属性定义链接文件的路径。
注意事项：
1. CSS文件的路径是相对于引用它的PHP文件的路径。如果CSS文件与PHP文件在同一文件夹中，则路径为“css/style.css”。如果CSS文件在PHP文件的上一级文件夹中，则路径应为“../css/style.css”。
2. 外部CSS文件的区别在于不需要在PHP页面中包含CSS样式代码。这样可以将样式代码和HTML代码分离，便于维护和修改。
二、在PHP页面中引用外部JS文件
1. 创建JS文件
在网站根目录下创建一个JS文件夹，用来存放所有的JS文件。
在JS文件夹中创建一个或多个JS文件。例如，我们创建一个名为script.js的JS文件，里面包含以下脚本：
function showMsg(){
alert("欢迎来到我的网站！");
}
2. 在PHP页面中引用JS文件
在PHP页面中使用<script>标签引用JS文件。打开需要引用JS文件的PHP文件，将以下代码添加到<head>标签或<body>标签中：
<script type="text/javascript" src="js/script.js"></script>
其中，type属性定义脚本语言类型，src属性定义链接文件的路径。
注意事项：
1. JS文件的路径也是相对于引用它的PHP文件的路径。如果JS文件与PHP文件在同一文件夹中，则路径为“js/script.js”。如果JS文件在PHP文件的上一级文件夹中，则路径应为“../js/script.js”。
2. 在PHP页面中引用外部JS文件可以使JS代码和HTML代码分离，便于维护和修改。
三、引用外部JS和CSS文件的综合实例：
打开任意的PHP页面文件，插入以下代码：
<html>
<head>
<meta charset="utf-8">
<title>引用外部JS和CSS文件的实例</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>这是一个示例页面</h1>
<p>你好，欢迎来到我的网站！</p>
<button onclick="showMsg()">点击我</button>
</body>
</html>
在文件目录下创建css和js文件夹，分别创建style.css和script.js文件，分别输入以下代码：
/*style.css*/
body{
background-color: #f5f5f5;
}
h1{
font-size: 26px;
color: #333;
text-align: center;
}
p{
font-size: 14px;
color: #666;
line-height: 1.6em;
}
/*script.js*/
function showMsg(){
alert("欢迎来到我的网站！");
}
保存文件并通过本地服务器打开访问，即可看到引用外部JS和CSS文件的示例页面。
通过上述方法，我们可以在PHP页面中引用外部JS和CSS文件，从而使得页面更加美观和功能更加强大。需要注意的是，外部JS和CSS文件的路径是相对于引用它的PHP文件的路径。同时，外部JS和CSS文件的区别在于可以将样式和脚本与HTML标签分离，便于维护。