📅 最后修改于: 2023-12-03 14:56:28.316000 🧑 作者: Mango
在 HTML 中，可以使用相对路径或绝对路径来引用资源（如图像、CSS、JavaScript 文件等）。 了解什么是相对路径和什么是绝对路径以及它们之间的区别非常重要。在这篇文章中，我们将深入了解相对路径和绝对路径，并讨论它们的使用场景。
相对路径是相对于当前文档的路径。 如果您正在编写一个 HTML 页面，而图像文件和 CSS 文件都保存在与 HTML 文件相同的目录中，则可以在 HTML 文件中只提供文件名来引用它们。 这就是相对路径的优点。 下面是一个简单的例子：
<img src="image.jpg" alt="My Image">
在这个例子中，图像文件和 HTML 文件都在同一个目录中。 我们只提供了图像的文件名，因为它在同一个目录中，浏览器会相对于当前 HTML 文件路径来查找相应的图像文件。
相对路径也可以使用 "../" 和 "./" 这样的符号来向上或向下导航目录，类似于 Linux 文件系统中的一些特殊文件夹 "." 和 ".."。 下面是另一个例子：
<img src="../images/image.jpg" alt="My Image">
<link href="./css/style.css" rel="stylesheet">
在这个例子中，查找图像文件和 CSS 文件就会向上或向下导航到相应的目录。
绝对路径是指在 Web 服务器上的文件系统中的完整路径。 如果您知道资源在服务器上的位置，则可以使用绝对路径来引用资源。 例如：
<img src="http://www.example.com/images/image.jpg" alt="My Image">
<link href="http://www.example.com/css/style.css" rel="stylesheet">
在这个例子中，Web 浏览器将直接从 Web 服务器下载图像和 CSS 文件。 http://www.example.com 是网站域名，跟在后面的路径表示图像和 CSS 文件在服务器上的位置。
需要注意的是，如果您使用绝对路径引用资源，则无论该 HTML 文档位于何处，浏览器都会在服务器上查找该资源。因此，如果该资源不在服务器上，或者位于错误的位置，那么浏览器将无法找到它。
当您需要引用同一目录中的资源时，相对路径是最好的选择。 它是简短的，易于阅读和维护。
当您需要引用在服务器上不同目录中的资源时，使用相对路径变得困难。在这种情况下，使用绝对路径是最好的选择。您只需要知道资源在 Web 服务器上的位置，并提供完全的路径即可。
需要注意的是，相对路径只适用于同一 Web 站点内的资源。 如果您需要引用不同 Web 站点的资源，则必须使用绝对路径。
了解相对路径和绝对路径可以帮助您更好地管理和维护您的 Web 项目。 您可以在每个情况下选择最优的路径类型，并避免许多在 Web 开发中常见的错误。