七、图像（绿叶学习网）

1. 表1 img标签常用属性
   属性 说明
   src 图像的文件地址
   alt 图片显示不出来时的提示文字
   title 鼠标移到图片上的提示文字
   src和alt这两个属性是img标签必不可少的属性。title属性的值往往都是跟alt属性的值相同。

2. src，即“source（源文件）”。img标签的src属性用于指定图像源文件所在的路径，它是图像必不可少的属性。img标签是一个[自闭合标签]，没有结束标签。src属性用于设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径。

3. alt属性用于设置图片的描述信息，这些信息是给搜索引擎看的。在搜索引擎优化SEO中，alt属性也是一个非常重要的属性。

4. title属性用于设置鼠标移到图片上的提示文字，这些提示文字是给用户看的。语法：。

A. 相对路径和绝对路径：
（1）相对路径，就是在同一个网站下，不同文件之间的的位置定位。引用的文件是相对当前网页的位置而言的，根据这个相对位置得出相对路径。
（2）绝对路径，指的是完整的路径。
B. 在visual studio中引用图片，都是采用拖拽方式自动生成代码；
C. 对于一个网站而言，外部文件或图片的引用都是使用相对路径，几乎不用绝对路径。

6. 位图，又称为点阵图像，是由称作像素（图片元素）的单个点组成的。通常位图又分为8位、16位、24位和32位。
   所谓8位图并不是图像只有8种颜色，而是2的8次方（即256）种颜色，8位图指的是用8个bits来表示颜色。从人眼的感觉来说，16位色基本能满足需要了。24位色又称为“真彩色”。2的24次方，大概是1600万之多，这个数字差不多是人眼可以分辨颜色的极限了。32位色并不是2的32次方的发色数，其实也是2的24次方种颜色，不过它增加了2的8次方阶颜色的灰度，也就是8位透明度，因此就规定它为32位色。
   在制作页面的时候，设计者一般选择24位图像。32位图像虽然质量好，但同时也带来更大的图像容量。如果一个页面使用体积过大的画，会使得浏览器加载页面速度变慢，事实上，一般肉眼也很难分辨24位图和32位图的区别。
   放大原始位图，会使图像效果失真，缩小原始位图，同样会使图像效果失真，这是因为缩小图像，减少的是图像中像素的数量。

7. 位图格式
   位图3种格式：“.jpg”、“.png”、“.gif”。
   （1）JPG格式
   JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
   （2）PNG格式
   PNG支持透明信息。所谓透明，即图像可以浮现在其他页面文件或页面图像之上。可以说，PNG是专门为web创造的图像，通常大部分页面设计者在页面中加入lLogo或者是一些点缀的小图像时，都会选择使用PNG格式。
   由于JPG格式容量较大，在保证图片清晰、逼真的前提下，网页中不可能大范围使用文件较大的jpg格式图片。PNG格式图片体积小，而且无损压缩，能保证网页的打开速度，所以PNG格式图片是很好的选择。
   由于PNG优秀的特点，PNG格式图片可以称为“网页设计专用格式”。
   （3）GIF格式
   GIF只支持256色以内的图像。所以，GIF格式的图片效果是很差的。但是，GIF有一个最大的特点，就是可以制作动画，图像作者利用图像处理软件，将静态的GIF图像设置为单帧画面，然后把这些单帧画面连在一起，设置好一个画面到下一个画面的间隔时间，最后保存为GIF格式就可以了。可以说，这就是简单的逐帧动画。目前这种格式的动画在互联网上广为流行。
   ：当处理色调复杂、绚丽的图像时，如照片、图画等，适合使用JPG格式；而处理一些logo、banner（横幅）、简单线条构图的时候，适合使用PNG格式；GIF格式通常只适合表达动画效果。

8. 位图绘制工具：（1）Adobe公司的Photoshop软件；2）Windows系统的画图。

9. 矢量图，又称为“向量图”。矢量图是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图是以一种数学描述的方式来记录图像内容的图像格式。如一个方程y=kx，当这个小方程体现在坐标系上的时候，设置不同的参数可以绘制不同角度的直线，这就是矢量图的构图原理。矢量图最大的优点是无论放大、缩小或旋转等不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果（图片效果差）。在网页中，比较少用到矢量图，一般在网页logo和矢量插图我们才有可能用到矢量图。矢量图主要用于印刷行业，因为矢量图放大并不会失真，这样在印刷时就不会出现毛边或者模糊的情况，这一点是Photoshop都比不上的。随着3D和Flash发展，我们主要利用矢量图来造型，然后导入到3D MAX放样或者在Flash动画中使用。矢量图的后缀一般有“.ai”、“.cdf”、“.fh”、“.swf”。“.ai”后缀的文件是一种静帧的矢量文件格式，“.cdf”后缀的文件多以工程图为常见。而“.swf”格式文件其实指的是flash，flash也是页面中最常见的一种动画。

10. 矢量图绘制工具：（1）Adobe公司的illustrator；（2）Corel公司的CorelDRAW。

11. 位图与矢量图的区别
    A. 位图受分辨率的影响，而矢量图不受分辨率影响。因此，当图片放大时，位图清晰度会变低，而矢量图清晰度不变。
    B. 位图组成单位是“像素”，而矢量图组成单位是“数学向量”；
    C. 位图适用于色彩丰富的图片，而矢量图却不适用于色彩丰富的图片；
    D. 位图常用于网页中的照片等，容量较大；矢量图常用于印刷行业、网页logo或矢量插图。