HTML图像标签和相对路径及绝对路径

1.怎么把图像插入网页？     表示为 <img src=”图像URL”/>  (单标签)

 注意：Img为图像image缩写

           Src是<img>标签的必须属性，它用于指定图像文件的路径和文件名

步骤：

（1） 第一步：先把图像文件放在网页文件中

       

 （2）第二步：把文件路径写入“ ”内

      

  图像标签属性：

   

2.路径

   由于页面图片很多，我们通常新建一个文件夹存放图像文件，此时查找图像需要采用路径的方式来指定图像文件的位置

分类：可以分为相对路径和绝对路径，相对路径在实际开发中使用更多。

（1）相对路径 ：指图片相对于HTML页面的位置 

相对路径的分类：

解释一下：

同一级路径：如果html文件与所要引用的图像文件在同一文件夹下，则为同一级路径

如下： 此时这些.html文件和img.jpg文件就是同一级路径

此时表示为：<img src="img.jpg">

 下一级路径如下：因为我们只引用一张图片，所以只需要images文件下的某一文件，假设需要bg.gif文件。那么bg.gif文件就是Html文件的下一级。

写为：<img src="images/bg.gif"

 上一级路径：

如下：img.jpg是直接在最大文件案例里的，而青春.html在案例的下一级h5综合案例的下一级。

所以img.jpg是青春.html的上一级。

<img src="../img.jpg">

 (2) 绝对路径

 目录下的绝对位置，直接到达目标位置，通常是从盘符（c盘、d盘）开始的路径。

Eg:“D:\web\img\logo.gif“或完整网络地址http://www.itcast.cn/images/logo.gif(网页中的地址)

注意：相对路径为/ 绝对路径为\