在前端开发中，通常需要引用不同目录下的资源文件，如CSS、JavaScript、图片等。这些资源文件可以使用绝对路径或相对路径进行引用。相对路径是相对于当前文档所在的路径来描述资源文件的位置，相对路径更加灵活和方便，因此在实际开发中被广泛使用。
相对路径的分类
相对路径分为两种类型：基于文件的相对路径和基于网站根目录的相对路径。
基于文件的相对路径
基于文件的相对路径是以当前文件所在的目录作为参考点，描述资源文件与当前文件之间的相对位置。我们可以使用“.”表示当前目录、“..”表示上一级目录，也可以直接使用目录名表示资源文件的位置。例如：
<!-- 引用同级目录下的style.css文件 --> <link rel="stylesheet" href="./style.css"> <!-- 引用上一级目录下的common.js文件 --> <script src="../common.js"></script>
基于网站根目录的相对路径
基于网站根目录的相对路径是以网站根目录为参考点，描述资源文件与网站根目录之间的相对位置。我们可以使用“/”表示网站根目录，也可以使用目录名表示资源文件的位置。例如：
<!-- 引用网站根目录下的logo.png文件 --> <img src="/images/logo.png"> <!-- 引用根目录下的jquery.js文件 --> <script src="/jquery.js"></script>
相对路径的优点
相对路径相对于绝对路径有以下几个优点：
- 灵活性更高：相对路径可以在不同的环境中使用，因为它们是动态计算的。
- 可移植性更强：相对路径可以轻松地移植到不同的服务器上。
- 更易于维护：相对路径使得代码更加整洁和易于理解。
示例代码
下面是一个示例代码，展示了如何使用相对路径引用不同目录下的资源文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ---- ---------------
---- ------------------- ---
----- ---------------- -------------------
-------
------
---- ------------------- ---
---- -----------------------
---- -------------------- ---
------- ----------------------------
-------
-------总结
相对路径在前端开发中是非常重要的，它能够让我们方便地引用不同目录下的资源文件。同时，相对路径也具有灵活性、可移植性和易于维护等优点。因此，在实际开发中，我们应该尽可能地使用相对路径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15397