相对路径和绝对路径（实例）

⼀、基本概念

相对路径：即相对于当前⽂件的路径，前端开发中⽐较常⽤的路径表⽰⽅法绝对路径：即主页⽂件或者⽬录在硬盘上真正的路径。

⼆、符号表⽰

“./”：代表⽬前所在的路径\"../\"：代表上⼀层路径“/”开头，代码根⽬录

三、举例：

根⽬录下有demo1和images/1.jpg，demo1下有index1.html⽂件和demo1.1⽂件夹。demo1.1下有index2.html和2.jpg图⽚⽂件。

⽂件夹⽬录如图所⽰

1.⽂件在当前⽬录

如index2.html引⽤2.jpg，则⽂件路径应为

2.⽂件在上⼀层⽬录

如index1.html引⽤images⽂件夹下的1.jpg，则⽂件路径应表⽰为

如index2.html引⽤images⽂件夹下的1.jpg，则⽂件路径应表⽰为

3.⽂件在下⼀层⽬录

index1.html访问demo1.1⽂件夹中的2.jpg，则路径应表⽰为：

4.根⽬录表⽰法

任何页⾯访问images⽂件夹下的1.jpg，则可以表⽰为

四、注意

1.CSS中的图⽚路径

写到CSS中的图⽚路径，url是图⽚针对样式⽂件的位置。

如，index.html引⽤同⼀根⽬录下CSS⽂件夹中的main.css，⽽在main.css中需要引⼊images⽬录中的1.jpg，则路径应表⽰为：background:url（../images/1.jpg）

2.JS中图⽚地址均相对于调⽤JS的页⾯的相对位置

如：document.getElementById(\"IMG1\").style.backgroundImage= \"url(../Images/login.jpg)\";

五、优缺点分析

相对路径更⽅便更改，相对⽐较灵活，但是如果不慎易造成链接失效，并且容易被⼈抄袭。绝对路径的话能避免这个问题，但是灵活性上相对较弱。