第五章——认识媒体：为你的页面增加图像

来源：互联网发布：基金数据下载编辑：程序博客网时间：2024/05/16 10:16

浏览器如何处理图像

浏览器看到一个<img>元素时，相比其他标记，会做不同的处理：浏览器在页面中显示图像之前，必须先获或这个图像。
下面通过一个例子来说明浏览器是如何处理图像的。比如，服务器中的lounge文件夹中有这样一个index.html文件：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Head First Lounge Elixirs</title>    </head>    <body>        <h1>Our Elixirs</h1>        <h2>Green Tea Cooler</h2>        <p>            <img src="../images/green.jpg" />            Chock full of vitamins and minerals, this elixirs combines            the healthful benefits of green tea with a twist of chamomile            blossoms and ginger root.        </p>        <h2>Raspberry Ice Concentration</h2>        <p>            <img src="../images/lightblue.jpg" />            Combining raspberry juice with lemon grass, citrus peel and            rosehips, this icy drink will make your mind feel clear and             crisp.        </p>        <h2>Blueberry Bliss Elixir</h2>        <p>            <img src="../images/blue.jpg" />            Blueberries and cherry essence mixed into a base of             elderflower herb tea will put you in a relaxed state of             bliss in no time.        </p>        <h2>Cranberry Antioxidant Blast</h2>        <p>            <img src="../images/red.jpg" />            Wake up to the flavors of cranberry and hibiscus in            this vitamin C rich elixir.        </p>        <p>            <a href="../lounge.html">Back to the Lounge</a>        </p>    </body></html>

当我们请求这个页面时，浏览器是如何获取和显示这个页面的呢？敬请期待：

首先，浏览器从服务器获取文件“index.html”。
接下来，浏览器读取”index.html“文件，显示这个文件，发现其中有4个图像需要获取。所以它需要从Web服务器逐个得到这些图像，先从”green.jpg“开始。
获取到”green.jpg“之后，浏览器显示这个图像，然后转向下一个图像：“lightblue.jpg”。
现在浏览器已经获取了“lightblue.jpg”，所以它会显示这个图像，然后转向下一个图像：“blue.jpg”。对页面上的每一个图像都会重复这个过程。

所以浏览器需要向服务器发送5个请求。

图像格式

Web上最常用的3种图像格式：

JPEG
PNG
GIF

那么，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 src="images/drinks.gif">

<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 src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png" alt="The typical new pencil can draw a line 35 miles long.">

alt属性需要指定描述这个图像的一些文本。如果图像未能显示，就会使用这个文本来取代它。

`<img>`元素的width和height属性

可以使用width和height属性提前告诉浏览器你的页面中一个图像的大小。可以这样使用width和height属性：

<img src="images/drinks.gif" width="48" height="100" />

要记住，浏览器是在下载了HTML文件并开始显示页面之后才下载图像。浏览器下载图像之前，除非你告诉它，否则它无法知道图像的大小。
我们在调整图像大小时，宽度和高度一般都使用像素数指定，那什么是像素呢？现在我们初步了解一下：我们的计算机显示屏就是由数百万个称为像素的点组成。

0 0

第五章——认识媒体：为你的页面增加图像

浏览器如何处理图像

图像格式

<img>元素

<img>元素的alt属性

<img>元素的width和height属性

`<img>`元素

`<img>`元素的alt属性

`<img>`元素的width和height属性