3.1 在网页中插入图片

在网页中插入图片可以使网页更加生动、直观，图文并茂的网页更能吸引用户的眼球。

3.1.1 网页常用图片格式

目前，图片格式有GIF、JPEG、PNG、BMP、TIF等多种，在制作网页时，是否可以不加考虑图片的格式呢？答案是否定的。因为不同格式图片的浏览速度是不同的。从浏览速度的角度来看，目前适合在网上浏览的图片格式主要有JPEG、GIF和PNG 3种。

1.JPEG

联合图像专家组标准（JointPhotographicExpertsGroup，JPEG）又称JPG，它支持数百万种色彩，主要用于显示照片等颜色丰富的精美图像。JPEG是质量有损耗的格式，这意味着在压缩时会丢失一些数据，因而降低了最终文件的质量，然而由于数据丢失得很少，因此在质量上不会差很多。

2.GIF

图形交换格式（GraphicsInterchangeFormat，GIF）是网页图像中很流行的格式。它最多使用256种色彩，最适合显示色调不连续或具有大面积单一颜色的图像。此外，GIF还可以包含透明区域和多帧动画，所以GIF常用于卡通、导航条、LOGO、带有透明区域的图形和动画等。

3.PNG

可移植网络图形（PortableNetworkGraphics，PNG）既融合了GIF透明显示的颜色，又具有JPEG处理精美图像的优势，是逐渐流行的网络图像格式，但目前浏览器对其的支持并不一致。

3.1.2 插入图片基本语法

在网页中插入图片需要使用<img>标签。

基本语法：

语法说明：src属性指定需要插入的图片文件路径，这是一个必设属性。只使用src属性时，将在网页中插入一个原始大小的图片。<img>标签除了src属性外，还有一些常用的属性，如表3-1所示。

注：<img>标签除了表3-1所示的属性外，还有一些现在已不建议使用的属性，如border、align、width、height、vspace和hspace等，这些属性主要用于设置样式，建议使用CSS代替这些样式属性来设置元素样式。例如，图片的水平对齐建议使用CSS的text-align属性或浮动和定位来实现，垂直对齐建议使用CSS的vertical-align来设置，而不是使用标签的align属性。

【示例3-1】在网页中插入一张原始图片。

上述代码在IE11浏览器中的运行结果如图3-1所示。

从图3-1中，可以看到使用<img>标签及其src属性可以在网页中插入一张没有经过任何修改的原始图片。

3.1.3 设置图片大小

使用<img>标签插入图片，默认情况下将插入原始大小的图片，如果想在插入时，修改图片的大小，可以使用height和width属性或CSS样式实现。在实际应用中建议使用CSS样式设置。在此介绍使用标签属性设置图片大小的方法。

基本语法：

语法说明：宽度和高度为某个数值，单位是px（像素）。两个属性可以同时设置，也可以只设置其中一个。当只设置其中一个属性值时，另一个属性值会等比例缩放。

【示例3-2】设置图片大小。

在该示例中共插入了4张图片，其中第一张插入的是原始图片（98px×98px），第二张图修改宽度为原图的三分之一，第三张图修改高度为原图高度的三分之二，第四张图同时修改宽度和高度为原图的三分之二。在IE11浏览器中的运行结果如图3-2所示。

3.1.4 设置图片描述信息和替换信息

为了让用户了解网页上的图片内容，当用户将鼠标指针移动到图片上时，应弹出图片的相关描述信息；在图片无法正常显示时，应该在图片位置处显示替换图片的文本。要达到这些目的，需要对网页上的图片设置描述信息和替换信息。设置图片描述信息需要使用title属性，设置图片的替换信息需要使用alt属性。

基本语法：

语法说明：图片描述信息和替换信息可以包括空格、标点以及一些特殊字符。在实际使用时，title和alt属性的值通常会设置为一样的。

注：在较低版本的浏览器中，如IE7及以下版本的浏览器，alt属性可以同时设置图片的描述信息和图片的替换信息。但在较高版本的浏览器中，如IE8及以上版本的浏览器，设置图片的描述信息必须使用title属性，图片的替换信息则必须使用alt属性来设置。所以为了兼容各种浏览器，设置图片的描述信息和替换信息时，应分别使用title和alt属性。

【示例3-3】设置图片的描述信息和替换信息。

上述代码使用title属性设置图片的描述信息，当鼠标指针移动到图片时将弹出该描述信息。alt属性设置的信息是图片无法下载时显示的替换信息。上述代码在IE11浏览器中的运行结果如图3-3和图3-4所示。