HTML 相对路径和绝对路径

 

绝对路径和相对路径的理解一直是很多同学的难点，

绝对路径是和当前html文件无关的一个路径，例如，D:/myvscode/project002/images/1.jpg

相对路径，是说从当前的html文件出发，从什么路径能够到达img或者html等等资源文件的路径。

例如，images/1.jpg ，表示从当前html的目录先进入到子目录images，然后就能找到1.jpg文件

 

下图为一个简单网站的目录结构，project目录下有about、htmls、images 3个子目录，

• index.html中：

1. 如果要访问4.jpg，index.html文件和要访问的4.jpg是同目录的，可以直接访问。

         所以路径为： 4.jpg

     2. 如果要访问1.jpg，则先要从index.html文件所在的目录进入images子目录，然后就可以访问1.jpg了。

        所以路径为： images/1.jpg

 

About.html中：

1. 如果about.html要访问4.jpg，那么需要先进入到父目录“project”，然后就可以访问4.jpg,  “..”表示父目录。

所以路径为：../4.jpg

     2. 如果要访问1.jpg，则先要从about.html文件所在的目录先进入父目录，然后进入images子目录，然后就可以访问1.jpg了。

所以路径为： ../images/1.jpg