在html中/和./和. ./的含义和使用

HTML中 / ./ …/是什么意思，怎么用？HTML中相对路径的 / 和./ 和…/在开发过程中，引入资源是经常会用到的，可以说是家常便饭了。在引入资源时候，资源路径又分为绝对路径和相对路径的两种。在开发中用的比较多的是相对路径。本文以HTML…<img src="D:\img\default.png"><img src="./img/

AS761379193

10341人浏览 · 2021-05-04 22:17:17

AS761379193 · 2021-05-04 22:17:17 发布

在html中 /和./和. ./是什么？该怎么用？

HTML中相对路径的/和./和. ./

在开发过程中，引入资源是经常会用到的，可以说是家常便饭了。在引入资源时候，资源路径又分为绝对路径和相对路径的两种。在开发中用的比较多的是相对路径。本文以HTML…

<img src="D:\img\default.png"><!-- 这是绝对路径 -->

<img src="./img/default.png"><!-- 这是相对路径 -->

关于什么是绝对路径和相对路径的问题，我从网上摘要一段。不是本文重点

操作系统课上是这样子说的，在文件查找上，绝对路径：在树型目录结构中，从根节点到任一个数据文件或者目录文件都只有一条唯一的通路。将从根节点到一个数据文件的通路上经过的各个目录文件名和数据文件名用“/”连接起来，就形成了可用来访问这个数据文件的路径名；相对路径：可以为每个进程设置一个“当前目录”，又称为“工作目录”，这样每次查找文件就不需要机械地使用绝对路径，取而代之的是使用文件相对与当前目录的路径，这个就是相对路径。当然说的有点抽象，具体的请看下面我的分析主要应用在html

HTML中相对路径的 / 和./ 和…/（重点）

这本是十分简单的一个问题！但是我发现某些干了一段时间的dalao，都不能熟练掌握使用，用的时候全靠蒙。

首先创建个案例测试
绿色的表示文件夹，红色index.html为测试文件位置。
如果不想自己手动创建，最下面有我打包好的案例文件。
HTML_Path1
HTML_Path2
我们的测试直接上代码吧，建议自己动手试一下，实践出真理。

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试文件-index.html</title>
</head>
<body>
<!-- ../表示定位到上一级，这里有两个../表示上一级的上一级也就是上两级，也就是定位到one目录下 -->
<div>../../one.png<img src="../../one.png" title="../../one.png"></div>

<!-- 这里只有一个../也就是上一级，也就是定位到two目录下，然后指定two.png -->
<div>../two.png<img src="../two.png" title="../two.png"></div>

<!-- 如果是在同一级目录的资源，直接指定资源就行 -->
<div>three.png<img src="three.png" title="three.png"></div>

<!-- 如果是在同一级目录的资源，第二种写法就是./表示当前目录 -->
<div>./three.png<img src="./three.png" title="./three.png"></div>

<!-- ./定位当前目录，当前目录下的four下的four.png -->
<div>./four/four.png<img src="./four/four.png" title="./four/four.png"></div>

<!-- 这样写也行，four目录跟index.html在同级 -->
<div>four/four.png<img src="four/four.png" title="four/four.png"></div>

<!-- 以此类推 -->
<div>./four/five/five.png<img src="./four/five/five.png" title="./four/five/five.png"></div>
<div>four/five/five.png<img src="four/five/five.png" title="four/five/five.png"></div>

<!-- 甚至你可以这么玩，反复横跳，坑队友专用 -->
<!-- 下面的意思是先定位到one目录，再逐级打开five目录，再返回上一级打开four.png -->
<div>../../two/three/four/five/../four.png<img src="../../two/three/four/five/../four.png" title="../../two/three/four/five/../four.png"></div>

<!-- 单/指定根目录，就是这个文件能到的最顶层目录，太坑了最好不用 -->
<!-- 这个文件（index.html）在我这里是C:\Users\Admin\Desktop\one\two\three\index.html -->
<!-- 下面打开的文件在C:\c.png -->
<div>/c.png<img src="/c.png" title="/c.png"></div>

</body>
</html>