路径的类型又分为两种，第一种是相对路径，第二种是绝对路径。本日先来理解一下相对路径。相对路径是相对付当前文件的位置来表示资源，也便是图片位置的路径表达办法。大略来说便是图片相对付当前html文档的位置。这里把相对路径的分类给大家列出来了，一个一个往下看。
·首先是同级路径。同级路径不须要在html里面写任何符号，只须要将文件名写到html属性里就可以了。在代码里看一下，这里有一个image，点jpg的图片和html文档处于同一级，以是在html的属性里直接写image，点jpg保存一下看看效果。
可以看到现在图片是正常展示的，同级路径下只须要在html属性里完全填写图像文件的名称就可以了。
·再来看第二个下级路径。当图像文件位于html文件下一集时，须要在html属性里完全填写同级文件夹的名称，然后斜杠写出对应图片文件的名称。
→首先打开资源文件夹，在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。
→打开vscode，新建一个gtml文档，这里新增一个image标签。
→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了，打开往后会创造里面有一个image，点jpg的图片。把这个路径写一下，在src属性里面写入位于当前html文件同级的images文件夹的名称，利用符号斜杠找到image，点gpg，看一下效果。此时图片也完全显示出来了。
→如果在amager四文件夹里还有一个amager四文件夹，下级路径又该怎么写？在amager文件夹里再新建一个文件夹，打开vscod，在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹，在这里面又放了一张图片。
这张图片该当若何让它展示出来？一起来看一下。
→首先找到同级的images文件夹，利用符号斜杠，此时vscode会供应给两个选项，一个是imagers文件夹，另一个是imager.gpg。选择imagers，imagers文件夹里面的imager.gpg的文件了，保存一下看看效果。
在浏览器中这两张图片都完美的展现出来了。
末了来看一下相对路径里面的。上级路径利用的符号是点点杠。上级路径又该当怎么理解？也便是图像文件是位于当前这个 hd ml文件的上一集。
在练习文件夹里新增一个名为 hd ml的文件夹，打开vs code，选择刚刚新增的文件夹，选择新建文件，这里须要新增一个 hd ml文档。在当前 hd ml文档中，如果想要调用上一级的 image 点 j p g 的图片该当怎么做？在 sr c 属性里面利用点点杠。
这里 vs code供应了上一集路径中存在的文件，选择 image 点 j p g，在浏览器中看下效果，此时图片也是正常显示的。如果hd ml文件藏得更深一些，把当前的文件复制一份，新增一个hd ml文件夹，将复制的文档粘贴一下，打开刚刚复制的文档，修正sr c属性里面的值，利用点点杠。
此时是没有找到 amage 点 j p g 的文件，这个时候就须要重复刚刚的操作，点点杠就能找到须要到的 amage 点 jbg 的文件了，保存一下看看效果。这里可以看到图片还是正常显示出来了。
本期视频紧张理解了相对路径的三种分类，一个是同级路径，一个是下级路径，还有一个是上级路径。希望小伙伴们下来可以好好练习一下，这对付后期的内容非常主要。下期再来聊聊绝对路径。本期的内容到此结束，感谢不雅观看，下期再见。
