HTML使用相对路径获取各级目录下文件方式详解

在HTML中，可以使用相对路径来引用当前目录或其他目录中的文件。相对路径的起点是当前文件所在的目录。

相对路径的基本语法

相对路径从当前HTML文件所在的目录开始计算，基本语法如下：

<!-- 在当前目录下寻找名为filename的文件 -->
<a href="./filename"></a>

<!-- 在上级目录中寻找名为filename的文件 -->
<a href="../filename"></a>

<!-- 在当前目录下的子目录中寻找名为filename的文件 -->
<a href="./dir/filename"></a>

<!-- 在上级目录下的子目录中寻找名为filename的文件 -->
<a href="../parent-dir/filename"></a>

获取同级目录下文件

当HTML文件和对应的目标文件位于同级目录中时，直接使用文件名即可引用该文件。

<!-- 引用同级目录下的filename1.html文件 -->
<a href="./filename1.html">Link to filename1.html</a>

<!-- 引用同级目录下的image.jpg文件 -->
<img src="./image.jpg" alt="image">

获取其他目录下文件

当HTML文件和目标文件不在同一级目录时，需要使用相对路径。例如，HTML文件在某个目录中，而要引用的文件在该目录下的子目录中，则需要在路径中补充子目录名。

<!-- 引用同级目录下的filename1.html文件 -->
<a href="./filename1.html">Link to filename1.html</a>

<!-- 引用上级目录中的filename2.html文件 -->
<a href="../filename2.html">Link to filename2.html</a>

<!-- 引用当前目录下的子目录dir的filename3.html文件 -->
<a href="./dir/filename3.html">Link to filename3.html in dir</a>

<!-- 引用上级目录下的子目录parent-dir中的filename4.html文件 -->
<a href="../parent-dir/filename4.html">Link to filename4.html in parent-dir</a>

相对路径的引用方式有许多，需要根据页面和文件的位置进行灵活运用。当然在实际开发过程中，应当充分利用路径的抽象能力，提取出公共部分，尽量简化路径和代码。

以上是HTML使用相对路径获取各级目录下文件的详解攻略。