七海的html和css学习笔记（五）

第三章  为你的页面增加图像

        浏览器如何处理图像？

                浏览器对<img>元素的处理与其他元素稍有不同。以<h1>和<p>元素为例，浏览器在页面上看到这些标记时，只需要把他们显示出来就可以了，很简单。不过，浏览器看到一个<img>元素时，会做不同的处理：浏览器在页面中显示图像之前，必须先获取这个图像。

                简单来说，当浏览器读取带有<img>元素的html文件时，发现其中需要获取图片，它会从Web服务器 逐个请求这些图像。

       

        图像的格式

                世界上的图片有很多种，幸运的是，Web上最常用的只是其中三种格式：jpeg、png和gif。唯一比较困难的就是要确定在什么情况下使用哪一种格式。那么，jpeg、png、gif有什么不同呢？

                JPEG：最适合连续色调图像，如照片；可以表示包含多达1600万种不同颜色的图像；这是一种“有损”格式，因为缩小文件大小时会丢掉图像的一些信息；不支持透明度；文件比较小，以便Web页面更高效的显示；不支持动画。

                PNG：png最适合单色图像和线条构成的图像（如logo）；png可以表示包含上百万种不同颜色的图像，png有三种：PNG-8、PNG-24和PNG-32，取决于你需要表示多少种颜色；png会压缩文件来缩小文件大小，不过不会丢掉信息，所以这是一种“无损”格式；允许将颜色设置为“透明”，使图像下面的东西显示出来；与相应的JPEG文件相比，PNG文件更大一些，不过取决于使用的颜色数，可能比相应的GIF文件小，也可能更大。

                GIF：类似于PNG，GIF最适合单色图像和线条构成的图像；gif可以表示最多256种不同颜色的图像；gif也是一种“无损”格式；gif也支持透明度，不过只允许一种颜色设置为“透明”；gif文件往往比相应的jpeg文件大；gif支持动画。

                

        介绍img元素

                来看一个简单的<img>元素：<img src="images/drinks.gif">

                        i mg元素是一个内联元素，它不会在前面或后面插入换行。

                        img元素是一个void元素。

                        src属性指定了在Web页面上显示的图像文件的位置。

                img元素不只是用于相对链接，还可以在src属性中放入URL。图像与html页面一同存储在Web服务器上，所以Web上的每个图像都有自己的URL，就像Web页面一样。

                如果要指向另一个不同网站上的图像，通常要使用这个图像的URL（要记住，对于相同网站上的链接和图像，最好使用相对路径）。要使用URL链接一个图像，如下所示：

                        

<img src=""http://www.starbuzzcoffee.com/images/corporate/ceo.jpg>

        给图像提供候选格式

                当有些浏览器可能无法显示你的页面上的图像，还有一种候选做法。可以用<img>元素的alt属性为访问者提供一些指示，告诉他们图像里有什么信息，可以这样做

                        

<img src="http://wickedlysmart,com/hfhtmlcss/trivia/pencil.png" 
     alt="The typical new pencil can draw a line 35 miles long.">

        调整图像大小

                还需要知道<img>元素的另一个属性。实际上，应该是一对属性：width和height。可以使用这些属性提前告诉浏览器你的页面中一个图像的大小。可以这样使用width和height：

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

                宽度和高度都使用像素数指定。

                

        使用缩略图

                缩略图就是在图像较多或较大的情况下，在页面显示缩小版的图片，通过单击缩小版的图片跳转到原图页面。

                首先先做以下工作：

                        1、为缩略图创建一个文件夹。

                        2、将页面中的图片通过其他软件将大小修改到合适的像素数。保存到刚刚的文件夹中。

                        3、将缩略图通过<img>元素放入页面中。

                        4、为原图创建单独的html页面。

                        5、将缩略图的<img>元素代码放入到包含原图链接的<a>元素中，使点击缩略图可以跳转到原图链接。

                下面看一下示例代码：

                            

<a href="html/seattle_down.html">
    <img  src="thumbnails/seattle_downtown.jpg"
          alt="An iPod in downtown Seattle, WA">
</a>

                一旦把<img>元素放在一个<a>元素中，浏览器就会把这个图像当做一个可单击的链接，单击这个图像时，浏览器会获取href中的页面。