HTML标签-路径标签

在引用外部文件(如超链接或者插入图片)时，经常会遇到我们的页面文件跟要引用的目标文件不在同一目录下的情况，这个时候，就带来了文件引用路径的问题。通常情况下，我们将引用的路径分为两种情况，绝对路径和相对路径。

绝对路径

• 概念

  绝对路径是指文件在硬盘上真正存在的路径，即物理路径。例如“bg.jpg”这个图片是存放在硬盘的“D:\work\code\imgs”目录下，那么， “bg.jpg”这个图片的绝对路径就是：

  <img src="D:\work\code\imgs\bg.jpg" > 
  

• 应用

  通常我们使用绝对路径，更多应用是在定位网络资源上，

  如：https://image.so.com/i?ie=utf-8&src=hao_360so&q=%E6%95%85%E5%AE%AB%E7%BB%9D%E7%BE%8E%E9%9B%AA%E6%99%AF

• 使用绝对路径的缺点

  在实际开发中，我们很少会使用绝对路径，如果使用“D:\work\code\imgs\bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的D盘， 有可能是E盘或H盘。即使放在Web服务器的D盘里，Web服务器的E盘里也不一定会存在“D:\work\code\imgs\bg.jpg”这个目录，因此在浏览网页时是不会显示图片的

相对路径

为了不同设备存放路径不一致的这种情况，通常在网页中指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于当前文件的位置。关于相对路径，有以下三种情况：

• 同级查找

  当图像文件和HTML文件位于同一文件夹时，只需输入图像文件的名称即可，如：

   <img src="1.png">
  

• 查找下一级

  当图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开，如：

  <img src="img/2.png">  
  

• 查找上一级

  当图像文件位于HTML文件的上一级文件夹，在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如：

  <im background="../img/0.png">