相对地址怎么写？Web前端使用的相对地址到底要几个点几个斜杠！

“在学习Web前端知识的时候，经常会有类似关于写法的疑问，怎样更优？更快？更安全？我们把问题收集起来，系统的为大家解答，同样也欢迎你把疑问发给我们公众号后台，@前端大咖 并附上你的问题。大家一起帮你解决~”

在HTML，CSS，JS中都会使用到相对地址的情形，初学的同学会容易犯迷糊。比如，有同学会纠结于不知道如何表达相邻或平级的关系。其实，正确的思路应该是忘掉相邻或平级的关系，记住一点，在相对地址中只有上下级关系。

相对地址使用三种符号组合来表示一个文件或目录相对于另一个文件的位置。这三种符号为：

【/】指：【根目录】

【./】指：【当前目录】

【../】指：【上一级目录】

根目录是指当前硬盘的根目录，当前目录是指当前文件所在的目录，位置都很确定，麻烦的是上一级目录，我们下面详细分解。

相对地址以书写该相对地址所在的文件位置为参考点，这一点很容易被忽略。简单说，在html文件中所写的就是以该html文件的位置为参考点，在CSS文件中所写的就是以该CSS文件位置为参考点。

那么该如何确定相对地址？记住遵循一个规则：【考虑相对地址的时候就是反复问能往下了吗？能就往下，不能就往上】我们来举几个例子：

如图所示，在style.css中如果需要写相对地址来调用s.png，该怎么确定这个相对地址的写法呢？首先我们要确定参考点是style.css，那么它所在的css目录就是当前目录，然后寻找的时候，记得遵循上面的规则，我们问一下能往下找到了吗？图中明显不行，那么就往上，记一个../，然后这时候寻找的目录就是第二课了，一样问一下能往下找了吗？图中可以看到images是第二课的子目录，所以是可以，于是在style.css中调用s.png的相对地址就写成../images/s.png。学会了吗？是不是很简单？我们再来看一个例子：

如图所示，在styles.css中要引用img2.jpg该如何写相对地址呢？同样，首先确定参考点是styles.css，它所在的style目录是它的当前目录，我们先来问是不是可以往下找了？一看不行，于是往上一层，记一个../，这时候在demo1，再来问是不是可以往下找了？还是不行，于是再往上一层，记../../，这时候在file，再问是不是可以往下找了？依然不行，于是再往上一层，记../../../，这时候到html了，再问是不是可以往下找了？可以了，于是这个相对地址就记为：../../../img/img2.jpg

怎么样，学会了吗？多看几遍，赶快尝试一下吧 ^_^

/* ---=*--*=* 割一下 *-=*-=-*-=* */

上上下下左右左右BABA