相对路径

从当前文件出发查找另一个文件所经过的路径

相对路径:即相对于当前文件的路径,前端开发中比较常用的路径表示方法

相对路径更方便更改,相对比较灵活,但是如果不慎易造成链接失效,并且容易被人抄袭。

绝对路径

从根盘符出发所查找文件的路径

绝对路径:即主页文件或者目录在硬盘上真正的路径

绝对路径的话能避免这个问题,但是灵活性上相对较弱。

路径问题

  • 符号表示

    • / :表示根目录
    • ./ :表示当前目录
    • ../ : 表示上一级目录
    • ../../:表示上两级目录(依次类推)
  • 同级

    • 同级就是指图片和.html文件储存在同一个文件中
    • 格式:src=”596c68fdd8bcf.jpg”
    • 含义:在.html文件所在文件夹中查找名称叫做596c68fdd8bcf.jpg的图片
  • 下级

    • 下级就是存储图片的文件夹和.html文件在同一个文件夹中
    • 格式:src=”图片/596c68fdd8bcf.jpg”
    • 含义:在。html文件所在文件夹中查找名称为图片的文件夹然后在图片文件夹中找到叫做- 596c68fdd8bcf.jpg的图片
  • 上级

    • 上级存储图片的位置和存储代码的文件夹在同一个文件夹中
    • 格式:src=”../596c68fdd8bcf.jpg”
    • 含义:在。html文件所在文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹找到名为596c68fdd8bcf.jpg

      实例

      image-20200405124348412

如果about.jsp页面想引入common.css文件:
image-20200405124411989

以about.jsp为基点寻找 直到和static文件在同一级在进入liantai文件夹,再进入到css文件夹中找到common.css文件

about.css中想引入了images中的文件
image-20200405124436995

以about.css为基点寻找,../到上级目录与inmages同级进入images文件夹中找寻需要的文件