相对路径 - HTML

在编写 HTML 代码时，我们经常需要引用其他文件，例如图片、样式表、JavaScript 文件等。这时就需要使用路径来定位这些文件。

相对路径是相对于当前文件的路径。相对路径应该使用相对于当前文档所在位置的目录来描述文件的位置。

相对路径的写法

相对路径有以下几种写法：

1. 相对于当前文档所在目录的相对路径：

   <img src="./images/example.png" alt="example">
   <link rel="stylesheet" href="./styles/example.css">
   <script src="./js/example.js"></script>
   

   这些文件与当前 HTML 文件在同一目录下。

2. 相对于当前文档所在上级目录的相对路径：

   <img src="../images/example.png" alt="example">
   <link rel="stylesheet" href="../styles/example.css">
   <script src="../js/example.js"></script>
   

   这些文件与当前 HTML 文件在同一级目录下。

3. 相对于当前文档所在上级的上级目录的相对路径：

   <img src="../../images/example.png" alt="example">
   <link rel="stylesheet" href="../../styles/example.css">
   <script src="../../js/example.js"></script>
   

   这些文件与当前 HTML 文件在同一级的上级目录下。

4. 相对于当前文档所在子目录的相对路径：

   <img src="./images/example.png" alt="example">
   <link rel="stylesheet" href="./styles/example.css">
   <script src="./js/example.js"></script>
   

   这些文件与当前 HTML 文件在子目录中。

相对路径的注意点

1. 相对路径大小写敏感。

2. 如果文件名或目录名中包含空格等特殊字符，需要使用 URL 编码，例如：

   <img src="./images/my%20photo.png" alt="my photo">
   

3. 如果文件名或目录名包含非 ASCII 字符，应该使用 UTF-8 编码。

4. 如果文件名或目录名包含中文，需要在 HTML 页面中添加以下 meta 标签，用于设置字符集：

   <meta charset="UTF-8">
   

结论

相对路径是相对于当前文档所在位置的路径，为 HTML 文件中引用外部文件提供了便利。我们需要注意相对路径的写法和注意点，以确保路径正确。