初学HTML5，总遇到关于img和background-img使用时遇到的路径问题

       刚开始学习HTML5的时候，总在关于什么时候使用img标签，什么时候使用background-image，感觉两者都可以，而且关于图片的引用路径经常弄错，导致图片显示不出来。

今天，就特地来总结一下关于这些问题的解决经验。

       一、什么时候使用img标签

        img标签是行内块级（inline-block）标签，直接写在body文件里，用于向他人展示图片的内容信息，对整个页面起着至关重要的作用。少了它，整个页面的信息就不完整了，因此，当一张图片包含了页面所必须要的内容信息时，使用img标签。

         此外，在编辑img标签的时候，alt属性通常会被忽略，最好是在alt里面写明图片信息，方便万一图片出了什么意外的时候好及时作出反应，养成一个良好的习惯。

      二、关于background-image

       当图片仅仅用于修饰，装饰美化页面的时候，使用background-image属性。

       img标签作为一个行内块级标签，不独占一行，但图片就代表了一部分内容，通常是不会在图片上编辑其他的，就算是要编辑，也是需要添加其他的标签；而background-image作为背景，一般来说是可以在上面添加其他内容的，而且对页面结构也不会产生什么影响。

      

       图片路径：

       这是在制作网页的时候难以避免会遇到的问题。

       路径一般分为绝对路径和相对路径。

       绝对路劲就是图片的物理地址，以一张在桌面上的图片为例，它的地址为：

       这个路径是要严格按照要求来的，错了一点图片就不能正常显示了，通常是图片文件与html文件不在同一个文件夹时用这种路径。

       其次就是相对路径了，相对路径是当图片与HTML文件在同一文件夹里时的路径格式，这个又分为几种情况：

      1.对于img标签来说

       当图片与html文件在同一级目录下时，可以直接写：此时的同一级目录是指像这样的，图片和html文件都在同一级。

     

       当图片位于html文件的下一级目录时这里的下级目录是指HTML文件于图片所在的目录处于同一级，例如：。

       2.对于background-image来说

       在编写一个内容比较丰富的网页的时候，我们通常会在外部链接一个css文件。这时的图片路径就不在是针对HTML文件而言了，而是css文件。

       当css文件与图片在同一级目录下时：。同一级目录是指：。

     

        在不同的目录，要么在头部文件里写：

   或者写：