相对路径和绝对路径

作为前端初学者,你有时候需要在.html文件中引入图片、.css、.js等文件资源,这时候就需要设置引入文件的路径,通过路径告诉.html文件要引入的外部文件存放的位置。

绝对路径

假设你在电脑C盘上的pro文件夹中放了一个图片文件person.jpg,如果index.html文件需要引入person.jpg图片,可以把路径设置为C/pro/person.jpg

相对目录

所谓相对目录,就是相对某个文件设置文件路径。比如index.html文件和图片文件person.jpg都在同一个文件夹C/pro下,可以通过相对路径person.jpg或者./person.jpg引入,不需要通过绝对路径C/pro/person.jpg引入。

如果index.html的路径是C/pro/index.html,图片person.jpg的路径是C/pro/img/person.jpg,index.html引入person.jpg的相对路径可以设置为img/index.html./img/person.jpg

如果index.html的路径是C/pro/html/index.html,图片person.jpg的路径是C/pro/person.jpg,index.html引入person.jpg的相对路径可以设置为../person.jpg

如果index.html的路径是C/pro/html/index.html,图片person.jpg的路径是C/pro/img/person.jpg,index.html引入person.jpg的相对路径可以设置为../img/person.jpg

如果index.html的路径是C/pro/html/html2/index.html,图片person.jpg的路径是C/pro/img/person.jpg,index.html引入person.jpg的相对路径可以设置为../../img/person.jpg

person.jpg相对.html位置 index.html person.jpg 相对路径
同级目录 C/pro/index.html C/pro/person.jpg index.html./index.html
同级子目录 C/pro/index.html C/pro/img/person.jpg img/index.html./img/person.jpg
上级目录 C/pro/html/index.html C/pro/person.jpg ../person.jpg
上级目录的子目录 C/pro/html/index.html C/pro/img/person.jpg ../img/person.jpg
上上级目录的子目录 C/pro/html/html2/index.html C/pro/img/person.jpg ../../img/person.jpg

总的来说,子目录通过/文件名称表示即可,上级目录通过../表示即可。

网站绝对目录

绝对目录不一定就是本地磁盘的目录地址形式,也可以是某个网站的域名形式+文件目录层级,比如http://www.webgl3d.cn/links/videoTutorial.htmlhttp://www.webgl3d.cn/指向的是网站所在服务器的根目录,/links/videoTutorial.html指向根目录下的文件/links/videoTutorial.html,如果用相对目录的表达形式就是links/videoTutorial.html./links/videoTutorial.html`,关于Web服务器的知识如果你现在没有概念,可以以后慢慢理解网站绝对目录和网站根目录的含义。