浏览器看到一个<img>元素时，相比其他标记，会做不同的处理：浏览器在页面中显示图像之前，必须先获或这个图像。 下面通过一个例子来说明浏览器是如何处理图像的。比如，服务器中的lounge文件夹中有这样一个index.html文件：
当我们请求这个页面时，浏览器是如何获取和显示这个页面的呢？敬请期待：
首先，浏览器从服务器获取文件“index.html”。接下来，浏览器读取”index.html“文件，显示这个文件，发现其中有4个图像需要获取。所以它需要从Web服务器逐个得到这些图像，先从”green.jpg“开始。获取到”green.jpg“之后，浏览器显示这个图像，然后转向下一个图像：“lightblue.jpg”。现在浏览器已经获取了“lightblue.jpg”，所以它会显示这个图像，然后转向下一个图像：“blue.jpg”。对页面上的每一个图像都会重复这个过程。所以浏览器需要向服务器发送5个请求。
Web上最常用的3种图像格式：
JPEGPNGGIF那么，JPEG、PNG和GIF有什么不同呢？现在先初略了解一下。
JPEG 最适合连续色调图像，如照片。可以表示包含多达1600万种不同的颜色。这是一种“有损”格式，因为缩小文件大小时会丢掉图像的一些信息。不支持透明度。文件比较小，以便Web页面更高效地显示。不支持动画。PNG PNG最适合单色图像和线条构成的图像(如logo、剪贴画和图像中的小文本)。PNG可以表示包含上百万种不同颜色的图像。PNG有3种：PNG-8(支持256种颜色)、PNG-16(支持数千种颜色)和PNG-32(支持数百万种颜色)，取决于你需要表示多少种颜色。PNG会压缩文件来缩小文件大小，不过不会丢掉信息。所以这是一种“无损”格式。允许将颜色设置为“透明”，使图像下面的东西可以显示出来。与相应的JPEG文件相比，PNG文件更大一些，不过取决于使用的颜色数，可能比相应的GIF文件小，也可能更大。GIF 类似于PNG，GIF最适合单色图像和线条构成的图像(如logo、剪贴画和图像中的小文本)。GIF可以表示最多256种不同颜色的图像。GIF也是一种“无损”格式。GIF也支持透明度，不过只允许一种颜色设置为“透明”。GIF文件往往比相应的JPEG文件大。支持动画。总结：
照片和复杂图像使用JPEG；单色图像、logo和几何图像使用PNG或GIF。如果把一个透明的图像放在Web页面中，则要确保这个图像的蒙版颜色与Web页面的背景色一致。GIF和PNG图像格式允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个Web页面中，图像后面的东西(如页面的背景色)就会透过图像的透明部分显示出来。<img>元素<img>元素示例如下：
<img>元素是一个内联元素。它不会在前面或后面插入换行。因此如果HTML中有多个图像，浏览器窗口足够宽时，浏览器会把它们并排摆放。那些更大的照片之所以没有并排摆放，是因为浏览器没有足够的空间来并排显示它们。实际上，它只能从上到下显示各个大图像。浏览器总是在块元素前后在垂直方向上显示间距。src属性指定了在Web页面上显示的图像文件的位置。<img>元素是一个void元素。更确切地讲，void元素是指HTML页面中在开始标记和结束标记之间没有任何内容的元素。没错，图像也是内容，不过<img>元素只是指向图像。图像并不是HTML页面本身的一部分。实际上，浏览器显示页面时，图像会取代<img>元素。另外要记住，HTML页面是纯文本，所以图像绝对无法直接作为页面的一部分。它是单独存在的。我们要记住src属性不只是用于相对链接，还可以在src属性中放入URL。图像与HTML页面一同存储在Web服务器上，所以Web上的每一个图像都有自己的URL，就像Web页面一样。 如果要指向另一个不同网站上的图像，通常要使用这个图像的URL(要记住，对于相同网站上的链接和图像，最好使用相对路径)。要使用URL链接一个图像，如下所示：
<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg"><img>元素的alt属性如果浏览器无法显示页面上的图像，可以使用<img>元素的alt属性为访问者提供一些指示，告诉他们图像里有什么信息。可以这样做：
<img>元素的width和height属性可以使用width和height属性提前告诉浏览器你的页面中一个图像的大小。可以这样使用width和height属性：
<img src="images/drinks.gif" width="48" height="100" />要记住，浏览器是在下载了HTML文件并开始显示页面之后才下载图像。浏览器下载图像之前，除非你告诉它，否则它无法知道图像的大小。 我们在调整图像大小时，宽度和高度一般都使用像素数指定，那什么是像素呢？现在我们初步了解一下：我们的计算机显示屏就是由数百万个称为像素的点组成。
新闻热点
疑难解答
