一、基本概念
1、相对路径：相对于当前文件的路径。网页中表示路径一般使用这个方法。
2、绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，比如，你的yearbook程序是存放在 c:/mafangshan/webapp 下的，那么 c:/mafangshan/webapp/yearbook就是yearbook的绝对路径
二、相对路径常见的写法：
"./"：代表目前所在的目录。
"../"：代表上一层目录。
"/"开头：代表根目录。
根目录下有test1文件夹和image/image1.jpg，test1下有index1.html文件和test2文件夹。test2文件夹下有index2.html和image2.jpg图片文件。
1、文件在当前目录
index2.html访问image2.jpg
<img src=”./image2.jpg”>或者<img src=”image2. jpg”>
2、文件在上一层目录
index1.html访问image下的image1.jpg
<img src=”../image/image1.jpg”>
index2.html访问image下的image1.jpg
<img src=”../../image/image1.jpg”>
3、文件在下一层目录
index1.html访问test2文件夹下的image2.jpg
<img src=” ./test2/image2.jpg”><img src=” test2/image2.jpg”>
4、根目录表示法,任何页面访问image下的image1.jpg图片
<img src=”/image/image1.jpg”>
三、常使用且要注意的地方
A、css中的图片路径,写css里的图片路径，url是图片针对样式文件的位置
-- index.html
-- css/main.css
-- images/image1.jpg
如果： index.html引用main.css，且在main.css 引用images目录里的1.jpg ：
background: url(../images/image1.jpg) *** 正确
background: url(images/image1.jpg) *** 错误
B、Js中图片地址均相对于调用JS的页面的相对位置。
document.getElementById("IMG1").style.backgroundimage
= "url(../images/image1.jpg)";