📅 最后修改于: 2023-12-03 15:11:22.670000 🧑 作者: Mango
相对路径是指在资源引用上使用相对路径，而不是绝对路径。相对路径主要用于模板中，使模板的引用更为清晰和方便调试。HTML中的相对路径主要用于图片、CSS和JavaScript等资源的引用。
HTML中的相对路径根据引用资源和当前页面的位置可以分为两种类型：同级和上下级。
同级相对路径指页面与引用资源位于同一目录下的路径。直接使用资源名称即可。例如：
<img src="logo.png">
上下级相对路径指页面与引用资源不在同一目录下的路径。上级目录用../表示。例如，若资源位于上一级目录的images文件夹内，则可使用如下路径引用：
<img src="../images/logo.png">
HTML中，不同资源的相对路径引用方式有所不同。
在HTML中使用图片，只需要在<img>标签中的src属性中填写图片的相对路径，如下所示：
<img src="../images/logo.png" alt="My Logo">
在HTML中使用CSS，需要使用一个<link>元素来引入CSS文件。<link>元素的href属性中填写CSS文件的相对路径，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 相对路径</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
在HTML中引用JavaScript文件，可以使用<script>元素来包含JS代码。<script>元素有两种方式引用：直接在HTML文件中嵌入JS代码和在外部JS文件中引用JS代码。如果使用外部JS文件，需要在<script>元素中的src属性中填写JS文件的相对路径，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 相对路径</title>
</head>
<body>
<script src="../js/main.js"></script>
</body>
</html>
HTML中的相对路径主要用于图片、CSS和JavaScript等资源的引用。相对路径有同级和上下级两种类型，在不同的引用资源和当前页面的位置可以使用不同的类型。使用相对路径可以使模板的引用更为清晰和方便调试。