本地情况下 HTML文件中 五种相对路径（无点无斜杠、/、./、../和多个../） 的区别。

背景介绍

Hi！我是前端小白 阳阳！为了记录学习心得并帮助有需要的你我他少走弯路节省时间，我写下这篇博客来简单粗暴的总结下
本地情况下 HTML文件中 五种相对路径（无点无斜杠、/、./、…/和多个…/） 的区别。
下面我们以 在index.html文件中引入style.css样式表 为例来进行讲解。

经验总结

一.无点无斜杠=一点一斜杠=当前文件所在目录：

背景：

index.html文件在style.css上一级，与css文件夹同级，style.css在css文件夹下。


index.html文件路径为：‪E:\前端作业\JQuery作业4\index.html
style.css样式表路径为：‪E:\前端作业\JQuery作业4\css\style.css

HTML 代码：

<link rel="stylesheet" type="text/css" href="css/style.css">=
<link rel="stylesheet" type="text/css" href="./css/style.css">

解析：

当前index.html文件在 E:\前端作业\JQuery作业4\ 目录下，而该目录也是css文件夹所在的目录，所以无需多事，只要在当前目录下找css文件夹即可。而表示当前目录的就是 无点无斜杠或一点一斜杠。

二.两点一斜杠=往上跳一级：

背景：

index.html在html文件夹下，style.css在css文件夹下，html文件夹与css文件夹同级。



index.html文件路径为：‪E:\前端作业\JQuery作业4\html\index.html
style.css样式表路径为：‪E:\前端作业\JQuery作业4\css\style.css

HTML代码：

<link rel="stylesheet" type="text/css" href="../css/style.css">

解析：

index.html与style.css分别在各自文件夹下，而文件夹同级，均在 ‪E:\前端作业\JQuery作业4 下。所以在index.hyml文件中，要找到style.css，需先往上跳一级到达html文件夹所在目录 ‪E:\前端作业\JQuery作业4，在此目录下自然有css/style.css。

联想：

两点一斜杠重复n次=往上跳n级。

三.单斜杠=回溯到根目录：

背景：

css文件夹在E盘下，比index.html文件高3级，style.css样式表在css文件夹下。



index.html文件路径为：‪E:\前端作业\JQuery作业4\html\index.html
style.css样式表路径为：‪E:\css\style.css

HTML代码：

<link rel="stylesheet" type="text/css" href="/css/style.css">

解析：

css文件夹在根目录E盘下，要想在index.html中找到style.css，需回溯到根目录E盘，从而找到css文件夹下的style.css。

联想：

介绍到这里，相信屏幕前的你一定会想到 是否可以利用上一部分介绍的“两点一斜杠=往上跳一级”回溯到根目录呢，答案是肯定的！
HTML代码如下：<link rel="stylesheet" type="text/css" href="../../../css/style.css">
不过显然，回溯到根目录用 单斜杠 更方便。

真情流露

作者甄词酌句写下这篇博客，生怕哪里写的不清晰您看不清白，若您想要转载，念在作者一片赤诚之心的份上请注明出处。谢谢！！
本文由很多不足的地方，还有很多情况没有提到，还请各位同道中人多多指教！！