零基础学习WEB前端开发(五)：HTML图像标签

一、图像标签和路径

1.必须的参数：src

 2.  alt 属性

3. title属性

4. width 和 height

5. border 边框

6.图像标签的几个注意点

二、图像路径

相对路径（重要）

绝对路径

---

一、图像标签和路径

1.必须的参数：src

src是必须的属性，用于指定图像中的路径和文件名

    
    
    
    


    图像标签的使用：
    

 效果：

 2.  alt 属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

3. title属性

提示文本，鼠标放在上面，对图像进行提示

4. width 和 height

调整图像的宽度和高度：

    
  图像标签的使用，height属性：
    

  

一般不同时修改宽和高，可以单独修改宽或者高，修改一个参数，另一个参数会自动适应其修改

5. border 边框

    
  图像标签的使用，border属性：
    

边框的颜色和边角都是可以修改的，需要学到css的知识。

6.图像标签的几个注意点

• 所谓的属性需要写在img的后面 
• 属性不分先后顺序，属性之间用空格隔开
• 属性采用赋值的形式，key = "value"

二、图像路径

相对路径（重要）

相对于html文件的路径

同一级路径	无	图像与html在一个文件夹下，如
下一级路径	/	图像在html下一个文件夹中，如
上一级路径	../	图像在html上一个文件夹中，如

绝对路径

是一个完整的位置，一般从盘符开始。

也可以引用一个网络中的绝对地址（实际开发不常用）：

 

    
  图像标签的使用，引用网络中的图片：
    

 

但是要注意的是，需要联网， 如果引用的图片被删了，将不能正常显示。