html绝对路径的写法,绝对路径和相对路径有什么区别？

刘代码之前，分别介绍过绝对路径和相对路径的概念，但仍有一些网友对两者的区别还是不太清楚，所以，今天，我们就专门针对绝对路径和相对路径有什么区别的问题进行一次比较全面的介绍，看看两者之间到底有哪些区别？

概念不同

绝对路径是一个完整的url地址，相对路径，是相对于当前文件目录到目标文件目录的地址。

绝对路径

绝对路径是一个完整的url地址，也叫绝对url，或绝对地址，有协议开头和盘符开头两种绝对路径；

1、以http、https等协议开头的绝对路径，比如，完整的刘代码博客地址：http://www.liudaima.com，或刘代码博客某个博文的地址：https://liudaima.com/110.html；

2、以盘符开头的绝对路径：也就是某个文件存放在电脑硬盘中的完整url地址，比如，我们在D盘中的web文件夹里有一个网页文件index.html，那么，这张图片的绝对路径就是：D:\web\index.html。

相对路径

相对路径，是除协议和盘符之外的部分，所以，它是不完整的url地址，这是因为它是从当前文件目录开始，并指向目标文件目录，这和绝对路径从协议或盘符开始是不相同的；

写法不同

绝对路径只要写出完整url地址即可，而相对路径不需要写完整的路径，只需要根据当前文件和目标文件的相对位置书写出正确的路径即可！

接下来，我们就用下图中的文件index.html和图片tupian.png进行演示操作：

如上图所示，在D盘中的web文件夹里有两个文件：一个是index.html文件，另一个是abc文件夹，在abc文件夹里还有一张图片tupian.png；

1、绝对路径写法

文件index.html的绝对路径是：D:\web\index.html

图片tupian.png的绝对路径是：D:\web\abc\tupian.png

2、相对路径写法

在文件index.html中引用图片tupian.png，这个时候，我们就需要在index.html文件中加载显示这个图片，或存在一个链接到tupian.png的url地址，这个图片tupian.png的URL地址可以用下面两种方法写：

可以用绝对路径写(这个前面已经介绍过)：D:\web\abc\tupian.png

也可以写成相对路径：由于我们是在index.html文件中引用图片，所以，就是相对于index.html文件，图片tupian.png的相对地址如下：./abc/tupian.png

index.html文件和abc文件夹同在web文件夹里，属于同级目录，同级目录用一个单点紧跟一个斜杠(./)表示；

相对路径，通常会使用单点(.)和斜杠(/)两个特殊符号来表示，下面来看看几种常见的表现形式及其代表的意义：

◆以“./”开头，代表同级目录，“./”也可以省略不写！

◆以"../"开头：上一级目录；

◆以"../../"开头：上上级目录；

◆以"/”开头，代表根目录；

有关相对路径更详细的介绍，请阅读：https://liudaima.com/a/124.html

优缺点不同

绝对路径的优点

绝对路径更加的直观明了，比如刘代码博客的某一篇博文的绝对地址是https://liudaima.com/120.html，无论你把这个地方放到其他什么地方，别人都可以通过这个地址正确的找到这篇博文，再或者，如果有人复制了刘代码博客的某篇文章，那么，这篇文章中的绝对路径也都会是正确有效的；

绝对路径的缺点：

绝对路径是固定不变的，但如果文件本身的位置改变了，绝对路径也就发生了变化，那么原有的绝对路径就会失效。

相对路径的优点

相对路径是相对于当前文件目录和目标文件的关系建立的路径地址，所以，只要相对路径的文件之间的相对位置没有发生改变，相对路径就会一直是正确的，比如，a文件和b文件同在web文件夹里，只要a和b的相对路径不变，那么，a和b两个文件相对路径就一直正确！

相对路径的缺点

相对路径的缺点就是指向的目标文件位置发生变化后，在当前文件中的指向目标文件的原有相对路径就会失效。