1.3 图像标签

文本使网页的内容得到充实，那图像使网页的内容更加丰富多彩。使用图像不仅能使网页更加美观、大方、整洁、形象和生动，而且能给网页增添无限生机，从而吸引更多的浏览者。因此图像在网页中的作用是举足轻重的。作为一个网页设计者，掌握好网页中图像的应用尤为重要。下面我们就开始介绍常用的图片格式，以及如何在网页中实现图文并茂的页面。

本节单词记忆：标签 1.img 属性 1.src 2.width 3.height

网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

一、常见的图片格式

在日常生活中，使用比较多的图像格式有4种，即JPG、GIF、SWF、BMP。在网页中使用比较多的是JPG、GIF和SWF，大多数浏览器都可以显示这些图像。下面我们就来分别介绍这4种常用图像。

1.JPG

JPG (JPEG)格式图像是在Intemet上被广泛支持的图像格式，它是联合图像专家组文件格式(Joint Photographic Experts Group)的英文缩写。JPG格式采用的是有损压缩，
会造成图像画面的失真，不过压缩之后的体积很小，而且还比较清晰，所以比较适合在网页中应用。

此格式最适合用于摄影或连续色调图像的高级格式，这是因为JPG文件可以包含数百万种颜色。随着JPG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通
过压缩JPG文件在图像品质和文件大小之间达到良好的平衡。

制作JPG文件的软件很多，比较常见的有Photoshop、HyperSnap等。

2.GIF

GIF图像是网页中使用最广泛，最普遍的一种图像格式，它是图像交换格式(Graphics Interchange Format)的英文缩写。GIF文件的众多特点恰恰适应了Intemet的需要，于是它成了Internet上最流行的图像格式，它的出现为Internet注入了一股新鲜的活力。

GIF格式图像采用的是无损压缩，由于只支持256色，所以GIF格式图像体积也很小。支持透明色，使得GIF在网页的背景和一些多层特效的显示上用得非常多，还支持帧动
画，这是它最突出的一个特点。要设计GIF动画，首先要用图像处理软件做好GIF动画中的每一幅单帧画面，然后再用专门的GIF动画软件把这些静止的画面连在一起，再定
好帧与帧之间的时间间隔，最后保存成GIF格式就可以了。

制作GIF文件的软件也很多，比较常见的有Photoshop、GIF Construction Set等。

3．SWF

SWF动画是网页中应用非常广泛的一种多媒体图像动画，这种格式的动画图像能够用比较小的体积来表现丰富的多媒体形式。在图像的传输方面，可以边传输边观看，因此
特别适合网络传输，特别是在传输速率不佳的情况下，也能取得较好的效果。事实也证明了这一点，SWF如今已被大量应用于Web网页进行多媒体播放与交互性设计。此
外，SWF动画是基干矢量技术制作的，因此不管将画面放大多少倍，画面不会因此而有任何失真。综上所述，SWF格式作品以其高清晰度的画质和小巧的体积，受到了越
来越多网页设计者的青睐，也越来越成为网页动画和网页图片设计制作的主流，目前已成为网页上动画的事实标准。SWF文件的缺点就是制作起来非常耗时耗力。

制作SWF文件的软件也很多，比较常见的有Flash、SWFText等。

4．BMP

BMP图像是在Windows操作系统中使用得比较多，它是“位图”的英文缩写。BMP图像可以用任何颜色深度（从黑白到24位颜色）存储单个光栅图像。BMP图像文件格式
与其他Microsoft Windows程序兼容。它不支持文件压缩，也不适用于Web页。从总体上看，BMP图像格式的缺点超过了它的优点。为了保证照片图像的质量，请使用
JPG文件。BMP文件适用于Windows中的墙纸。BMP的优点支持l位到24位颜色深度，并且与现有Windows程序广泛兼容。BMP的缺点是不支持压缩，这会造成文件非
常大。

制作BMP文件的软件也很多，比较常见的有Photoshop、Windows自带的“画图”软件等。

二、图像的基本语法

<IMG>标签用于在HTML文档中插入图像，该标签可以放在要显示图像的位置。

<IMG>标签不含任何内容，它使用src属性指定图像源文件所在的路径。

其中，src参数用来设置图像文件所在的位置，width和height属性用来指定图像的宽度和高度，alt属性有两个作用：第一个是在网页中，如果图像没有被下载，在图像位置
上出现的提示文字；第二个是在网页中，如果图像下载完，将鼠标放在该图像上，在鼠标旁边出现的提示文字。

示例1：

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>为图像添加提示性文字</TITLE>
</HEAD>
<BODY>
<IMG src="images/adv_2.jpg" alt="明星演唱会开幕" width="300" height="150">
</BODY>
</HTML>

示例1在浏览器中预览效果如图1所示，把鼠标指向图像上方，稍等片刻，就会出现提示文字“明星演唱会开幕”。

图1 给图像添加提示文字的效果

三、图像与文本的对齐

<IMG>标签的align属性可用于调整图像相对于周围文本的对齐方式。align属性可取下面的值：top、bottom、middle、left或right。

语法：

其中，align=”top”表示图片的顶端和当前行文字顶端对齐，align=”bottom”表示图片的底部和当前行文字底部对齐，align=”middle”表示图片的中部和当前行文字中部对齐，
align=”left”表示图片左对齐，align=”right”表示图片右对齐。

示例2

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>图像与文本的对齐方式</TITLE>
</HEAD>
<BODY>
<IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" />
请点击广告进入明星专区<BR>

<IMG align="top" src="images/adv_2.jpg" width="180" height="95" border="0" />
请点击广告进入明星专区
</BODY>
</HTML>

示例2在浏览器中预览效果如图2所示。

图2 图像与文本的对象方式