HTML 文件路径

HTML 文件路径是用于定位在网页中引用其他文件的一种方式。例如，当引用外部的 CSS 样式或 JavaScript 脚本时，我们需要使用文件路径来描述文件的位置。

文件路径类型

HTML 文件路径有两种类型： 绝对路径和相对路径。

绝对路径

绝对路径是从根目录开始描述文件的位置。在 Web 中，根目录通常是指 Web 服务器上的根目录。

例如，如果我们引用 Web 服务器上的一个图片文件 /images/avatar.jpg，则使用绝对路径 https://example.com/images/avatar.jpg 。

相对路径

相对路径是从当前文件的位置开始描述文件的位置。相对路径可以是相对于当前 HTML 文件所在的目录，也可以是相对于当前 URL 所在的目录。

例如，如果我们在 https://example.com/blog/articles/article-1.html 中引用 ../images/avatar.jpg，则使用相对路径 ../images/avatar.jpg。

文件路径语法

文件路径的语法是根据文件路径类型来确定的。

绝对路径语法

绝对路径的语法是以协议的形式开头，然后以根目录为参考点，描述文件在根目录中的路径。

<协议>://<域名>/<文件路径>

例如：

![avatar](https://example.com/images/avatar.jpg)

相对路径语法

相对路径的语法是以当前文件或 URL 所在的目录为参考点，描述文件与当前文件或 URL 所在目录的关系。

相对于当前 HTML 文件的目录

如果我们要描述一个在当前 HTML 文件所在目录下的文件，可以使用下述语法：

<文件名>

例如：

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

相对于当前 URL 所在的目录

如果我们要描述一个与当前 URL 所在目录处于同一级别的目录下的文件，可以使用下述语法：

../<文件名>

例如：

<a href="../index.html">返回首页</a>
<img src="../images/avatar.jpg" alt="头像">

总结

HTML 文件路径是用于定位在网页中引用其他文件的一种方式，包括绝对路径和相对路径两种类型。对于不同类型的文件路径，其语法也有所不同。熟练使用 HTML 文件路径可以更好地控制网页中的文件引用。