从0到1：HTML+CSS 快熟上手之图片

7.1 图片标签

一个好的网页需要图文并茂，这样可以使用户的体验更好，再HTML中我们可以使用img标签来显示图片，想要掌握img标签，我们就要掌握，src，alt，title三个属性。

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

其中src属性指的是图片的路径，alt属性是吐过图片不存在们也就是src属性没有值的时候显示的内容，而title属性是当我们的数标光标移动到图片上去的时候显示的内容。

7.2 图片路径

对于图片路径可以分为相对路径和绝对路径。

比如说我们再编辑网站程序时，目录图下所示：

                            图 1

7.2.1 page1.html引用图片

1. 绝对路径

绝对路径指的是电脑中的完整路径。

<img src="D:/website/img/haizei.png" />

所谓的相对路径，指的是相对于当前页面位置的路径。

从图1中可以知道，文件夹img和page1.html是出于同一层目录上的，然后haizei.png是位于img文件目录下，是父子关系，因此相对目录是"img/haizei.png"。

2.相对路径

当page1.png和haizei.png的位置如下图2所示，则相对路径是什么。

                             图 2 

因为此时haizei.png和page1.html 再同一层目录下，所以相对路径是

<img src="haizei.png" />

7.2.2 page2.html引用图片

1.绝对路径

<img src="D:/website/img/haizei.png" />

2.相对路径

由图1可知道，img和test位于同一目录下，haizei.png位于img文件夹下，page2.html位于test文件夹下。所以haizei.png和page2.html是同一层目录的关系。也就说hazei.png

位于page2.html上一级目录img文件夹下，所以相对路径是".../img/haizei.png"，其中.../表示上一级目录。

如果page2.html和haizei.png的目录关系如下图3所示，则相对路径是什么

因为此时haizei.png和test位于同一层目录下。而test文件夹是page2.html的上一级目录所以相对路径如下所示

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

7.3 图片格式

一 位图

位图的主要格式有三种，它们分别以：jpg，png，gif，为后缀

主要特点如下所示：

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

二 矢量图

矢量图，又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。

矢量图是以一种数学描述的方式来记录内容的图片格式。举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。

矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。

三 矢量图和位图的区别

1. 位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
2. 位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
3. 位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
4. 网页中的图片绝大多数都是位图，而不是矢量图。