2.3 图片标签
图片在网页中占据重要的位置，俗话说，一图胜千言。图片感官上的形象性，能够直接再现事物本身，直观具体地表达页面内容，更能够增加页面的美观性。图片不仅能够增加网页的吸引力，同时也大大地提升了用户在浏览网页的体验。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页的乐趣变得更加多样化。
2.3.1 图片的格式与分辨率
图片的格式有很多种，常见的有JPEG、GIF、BMP、TIFF、PNG等，选择网页上的图片只有一个原则，即在图片清晰的前提下，文件越小越好。因此在网页文件中使用最广泛的图片格式为GIF、JPEG和PNG。
GIF就是图片交换格式（Graphics Interchange Format），只支持256色以内的图片；GIF采用无损压缩存储，在不影响图片质量的情况下，可以生成很小的文件；它支持透明色，可以使图片浮现在背景之上；GIF文件可以制作动画，这是它最突出的一个特点。GIF文件的众多特点恰恰适应了Internet的需要，于是它成了Internet上最流行的图片格式，它的出现为Internet注入了一股新鲜的活力。
JPEG是一种广泛使用的压缩图片标准，也是网页中最受欢迎的格式，JPEG可支持多达16MB颜色，它能展现十分丰富生动的图片，也可以压缩。
PNG格式的图片近年来在网络中也很流行，其特点为不失真，具有GIF和JPEG的色彩模式，网络传输速度快，支持透明图片的制作。
分辨率是指在单位长度内的像素点数，单位为dpi，是以每英寸包含几个像素来计算的，像素越多，分辨率就越高，而图片的质量也就越细腻；反之图片就会越粗糙；一般来说，图片最好不要超过100KB，如果遇到必须使用大张图片的话，大家可以把一张大图切成几张小图，这样可以缩短图片的显示速度，不需要等全部图片下载完才显示。
2.3.2 嵌入图片
图片标签为＜img＞，是一个单标签，规范的图片标签语法格式如下：
＜img属性=”属性值”＞
该标签的属性和描述见表2-5。
表2-5 ＜img＞标签的属性及描述
1.图片的源文件src
该属性用于指定图片源文件的路径，为必不可少的属性。语法格式为：
＜imgsrc=”图片路径”＞
图片的路径可以是相对路径也可以是绝对路径。如何表示路径将在2.3.3小节中为大家介绍。
2.设置图片的提示文字alt
该属性定义了图片的替代文本。当图片没有被成功下载，不能正常在页面上显示图片时，则在图片的位置上就会显示提示文字；当图片下载完成，则当鼠标指针放在该图片上，鼠标指针旁边就会出现提示文字。
3.设置图片的宽度width和高度height
该属性为可选属性，设置了这些属性，就可以在页面加载时为图片预留空间。如果没有这些属性，浏览器就无法了解图片的尺寸，也就无法为图片保留合适的空间，因此当图片加载时，页面的布局就可能会发生变化。
Width和height属性值的单位可以是像素，也可以是百分比。如：
＜imgsrc="图片路径"width="60%"height="30px"＞
该行代码表示图片的宽度为浏览器宽度的60%，高度为固定值30px。
技巧：使用百分比值来代替像素的绝对值，将使浏览器按照与浏览器显示窗口的一定比例来缩放图片。
2.3.3 路径的表示方法
在页面的各个元素中，只有文本是写在HTML中的，其他多媒体元素如图片、声音、视频等都是嵌入到页面中的，HTML只记录了这些文件的路径，所以正确的路径信息是多媒体能够在页面上正常显示的基础。
文件的路径可以有两种表示方法：绝对路径和相对路径。
1.绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“food.jpg”这个图片是存储在硬盘的“C：\code\ch2\picture”目录下，那么“food.jpg”这个图片的绝对路径就是“C：\code\ch2\picture\food.jpg”。那么如果要使用绝对路径指定网页的图片就应该使用以下语句：
＜imgsrc="E：\book\Web前端开发实践教程\第2章\picture\food.jpg"＞
＜imgsrc="C：\code\ch2\picture\food.jpg"＞
事实上，在网页编程时，很少会使用绝对路径，如果使用“C：\code\ch2\picture\food.jpg”来指定背景图片的位置，在制作网站的计算机上浏览可能会一切正常，但是上传到Web服务器上就很有可能不能正常显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的C盘，有可能是D盘或H盘。即使放在Web服务器的C盘里，Web服务器的C盘里也不一定会存在“C：\code\ch2\picture”这个目录，因此在浏览网页时不会显示图片。
2.相对路径
为了避免这种情况发生，通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于本文档的目标文件位置。例如下面的例子，“2-7.htm”文件里引用了picture文件夹下的“food.jpg”图片，由于“picture”文件夹相对于“2-7.htm”来说，是在同一个目录的，那么要在“2-7.htm”文件里使用＜imgsrc="picture/food.jpg"alt="果冻美食"＞代码，只要这两个文件的相对位置没有变化（也就是说还是在同一个目录内），那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。
【例2-7】图片标签，代码如下：
在浏览器中预览，显示效果如图2-7所示。
图2-7 ＜img＞标签展示效果