关于路径"/" “./” “../” "/" ""的区别

最新推荐文章于 2025-02-13 17:33:47 发布

原创最新推荐文章于 2025-02-13 17:33:47 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#相对路径

小Tips 同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文通过实例解析了相对路径标识符在HTML文件中如何引用资源，包括根目录、当前目录、上一级目录等概念，并展示了实际代码及运行结果。

突然被这几个相对路径的标示符搞晕了，就测试了一把

先看结果

"/" 指的是根目录

"./"和 " " 指的是当前目录

"../" 指的是上一级目录

依此类推 "../../"指的就是上上级目录

结论总是很抽象的，我们 for example:

这是我的一个测试目录，我现在的测试文件是"demo8.html" , 如下图所示

我的img文件夹下面有一张图片 "1.jpg"；

现在我们打开"demo8.html"文件进行编辑

现在我们按照，敲入一下代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>demo8</title>
</head>
<body>
<img src="/img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="../img/1.jpg" alt="">
</body>
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
</html>

运行看看，结果如图所示：