欢迎来我的博客查看原文。
相对路径与绝对路径，在 Web 开发中我们会经常遇到，本文将尽可能详细的讲解相对路径与绝对路径的区别，并举例说明。
一、基本概念
- 相对路径（Relative Path）： 相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。也就是指相对于当前位置的路径。
- 绝对路径（Absolute Path）： 绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。HTML绝对路径指带域名的文件的完整路径。
- 区分： 假如你不知道当前路径，仍能根据路径找到文件，就是绝对路径，反之则是相对路径。相对路径当整加粗样式体移动时（文件中各部分相对位置不变），仍然有效，而绝对路径移动后就失效了。
二、使用方法
相对路径使用：
当前目录：
当前目录的用./来表示。
举例说明：- 路径：
这里我们在index.html中引用图片1.png ，此时它们在同一个文件夹test1中。
- 代码：
<img src="./1.png"/>路径是 ./1.png。 注意，当前目录可以省略开头的./，即写成<img src="1.png"/>，也是可以的。 - 效果：
- 路径：
上级目录：
上级目录的用../来表示。
举例说明：- 路径：
index在test1文件夹中，而我们要引用的图片在其上一级目录中。
- 代码：
<img src="../1.png"/>路径是…/1.png。 - 效果：同上。
- 路径：
下级目录：
下级目录直接写。
举例说明：- 路径：
如图，我们要引用的图片在目录test1中。
- 代码：
<img src="test1/1.png"/>路径是test1/1.png。 - 效果：同上。
- 路径：
绝对路径使用：
如上面所展示的第三种情况，我们获得图片的绝对路径，为/Users/lianzhuotao/Desktop/test/test1/1.png。
此时代码更改为<img src="/Users/lianzhuotao/Desktop/test/test1/1.png"/>
效果和上面相同，可以正常显示。
三、区别
- 绝对路径
优点： 若你使用绝对路径，如果有人抄袭你的网站内容，里面的链接还会指向你的网站，如果有人将你的网页保存到本地电脑中，里面的链接、图片、css、以及js仍然会连接到你的网站。并且如即使网页位置改变，里面的链接还是指向正确的URL。
缺点： 内容页面比较固定，修改一个绝对地址就改变一个，其他路径不会发生变化，工作效率上比相对路径要差。在本机制作的时候不能使用绝对路径，因为链接应该指向真正的域名而不是测试机的。 - 相对路径
优点： 内容移动方便，可以整个目录移动。方便进行本机测试。节省代码，减少网页体积。
缺点： 页面位置发生变化时，就会出现大量的死链，链接很容易失效。
总之，一般来说，网页使用相对路径比较不容易出错。
当我们使用绝对路径时，往往编辑器都不能把图片的路径解析出来，因此图片无法在网页中显示出来。在真正的网站开发中，对于图片或者引用文件的路径，我们100%都是使用相对路径的。因此，大家不必纠结绝对路径问题，只需要掌握相对路径的写法即可。[1]
参考：
[1]:http://www.lvyestudy.com/les_hj/hj_7.2.aspx
[2]:https://baijiahao.baidu.com/s?id=1600321393073248706&wfr=spider&for=pc
[3]:https://www.jianshu.com/p/c557a7ccc409
写在最后：
以上是我的学习记录，希望能给像我一样的新人一点帮助！
这是我的邮箱，欢迎交流学习。
欢迎来踩我的博客！！
