HTML图片

一、图片标签

在HTML中，可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。

相关的语法：

<img src = "" alt = "" title = ""/>

1、src属性

src用于指定这张图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。

相关语法：

<img src = "图片路径" />

“图片路径”指的是图片的地址，任何一张图片必须指定src属性才可以显示。也就是说，src是img标签必不可少的属性。

2、alt属性和title属性

alt属性和title属性都用于指定图片的提示文字。一般情况下，alt和title的值都是相同的。不过两者含有区别：

• alt属性用于图片描述，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字。
• title属性用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。

注意：在实际的开发中，对于img标签，src和alt这两个属性是必选属性，一定要添加；而title属性是可选属性，可加可不加。

二、图片路径

1、绝对路径

绝对路径，指的是图片在你的计算机中的完整路径。平常我们使用计算机的文件夹上方所显示的路径就是绝对路径。

2、相对路径

相对路径指的是图片相对当前页面的位置。

注意：

• 在实际的开发中，不论是图片还是超链接，一般都使用相对路径，几乎不会使用绝对路径。
• 对于图片或文件，不建议使用中文，因为很多服务器是英文操作系统，不能对中文文件名提供很好的支持。

三、图片格式

1、位图

位图又叫作“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样会失真。

在实际开发中，最常见的位图有三种：jpg(或jpeg)、png、gif。

jpg(或jpeg)、png和gif三种位图的区别：

• jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg格式的图片体积较大，并且不支持保存透明背景。
• png格式是一种无损失格式，可以无损失压缩以保证页面打开速度。此外，png格式的图片体积较小，并且支持保存透明背景，不过不适合存储颜色丰富的图片。
• gif格式的图片效果最差，不过它适合制作动画。

总结：如果想要展示色彩丰富的高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。

2、矢量图

矢量图又叫作“向量图”，是以一种数学描述的方式来记录内容的图片格式。矢量图最大的优点是图片无论放大、缩小或旋转等，都不会失真。最大的缺点是难以表现色彩丰富的图片。

矢量图的常见格式有".ai" “.cdr” “.fh” “.swf”。其中".swf"格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。对于矢量图，可以使用illustrator或者CoreIDRAW这两款软件来处理。

位图与矢量图的区别：

• 位图适用于展示色彩丰富的图片，而矢量图不适合于展示色彩丰富的图片。
• 位图的组成单位是”像素“，而矢量图的组成单位是”数学向量“。
• 位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
• 网页中的图片绝大多数是位图，而不是矢量图。