第5章 HTML网页中的图片_HTML+CSS+JavaScript实用详解-QQ阅读男生科幻网

书名：HTML+CSS+JavaScript实用详解
作者名：叶青编著
本章字数：131字
更新时间：2020-08-26 19:31:43

第5章 HTML网页中的图片

上一章学习了HTML网页中段落和文字的控制，不过没有了图片的参与，网页难免单调。本章学习在HTML网页中显示图片、认识网络中各种类型的图片、学习图片的热区超级链接的制作。本章内容的学习相对容易，很多时候可以把图片作文字一样处理，比如超级链接、滚动效果等。

5.1 认识网页中的图片格式

图片在电脑中以文件形式存在，图片的格式很多，不同的格式文件大小也不同。在网页中对图片不同格式的理解非常重要。在网页制作中，制造者最关心的是如何在保持图片质量的同时，能尽量压缩图片的文件大小。

说明：影响网页表现的最大瓶颈是网络的带宽，网页的元素中，图片文件大小相对较大、较占带宽，影响网页打开速度。所以网页图片文件大小越小，打开网页越快，浏览者才有兴趣继续看网页。

5.1.1 常用的图片格式

图片文件的格式是计算机存储这幅图的方式与压缩方法，要针对不同使用目的来选择合适的格式。不同程序也有各自的图片格式，如“PSD”是PhotoShop软件的格式，内部格式带有软件的特定信息，如图层与通道等。不过很多程序无法打开“PSD”格式，不属于通用格式，网页制作中更不会使用它。

不同的图片格式各自以不同的方式来表示图形信息，常用的格式有：

（1）BMP。这是微软公司自身图形文件自身的点位图格式，比如读者采用Windows自带的画图程序绘画，默认生成的就是BMP格式的图片。

BMP格式保存的图像没有失真，由于它保存每个像素的信息，不支持文件压缩，所以文件也比较大。网页制作中很少使用BMP格式的图片。

（2）JPEG。JPEG是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。即压缩比越大，文件越小，图片质量越差。

正因为JPEG图片可以选择多种压缩级别，非常灵活，所以使用非常广泛。比如大多数码相机默认的照片存储格式就是JPEG。

在肉眼无法明显分辨质量损耗的前提下，JPEG文件大小可以远远小于BMP，所以JPEG也广泛应用于网页制作领域。

（3）GIF。GIF图片以8色~256色存储图片数据。GIF图片支持透明度、压缩、交错和多图像图片（动画GIF）。GIF透明度不是alpha通道透明度，所以不能支持半透明效果。GIF文件规范的GIF89a版本中支持动画GIF。

也就是说，GIF的特点是颜色数量少，很多情况下图片文件大小可以远远小于JPEG，而且支持透明度。最有意思的是，GIF支持动画图片，所以GIF格式非常适合网上传输。

（4）PNG。PNG图片以任何颜色深度存储图片，它也是与平台无关的格式。PNG也支持透明度，以及压缩。PNG格式分为PNG-8和PNG-24，PNG-8格式类似于GIF格式，支持8色~256色，而PNG-24格式质量最好，因为PNG-24压缩不失真并支持透明背景和渐显图像的制作。IE浏览器对PNG支持不是很好，所以目前网页制作中很少使用。

说明：由于PNG的高品质以及透明度支持，Flash动画制作中比较常用。

在D:\web\目录下创建img目录，放入BMP、JPEG和GIF这3种格式的图片，并分别命名为bmp.bmp、jpeg.jpg和gif.gif。创建网页文件，命名为img_type.htm，编写代码如代码5.1所示。

代码5.1 不同的图片格式展示：img_type.htm

        <html>
        <head>
          <title>不同的图片格式展示</title>
        </head>
        <body>
        BMP格式图片：<img src="img/bmp.bmp"><br /><br />
        JPEG格式图片：<img src="img/jpeg.jpg"><br /><br />
        GIF格式图片：<img src="img/gif.gif">
        </body>
        </html>

在浏览器地址栏输入http://localhost/img_type.htm，浏览效果如图5.1所示。

图5.1 不同的图片格式展示

以上3种格式的图片虽然视觉差异不大，但文件大小相差甚远。

5.1.2 怎样选择合适的图片格式

那么在建设网站时，图片的不同格式如何选择呢？上一节说过BMP是没有压缩的图片格式，文件大小非常大，所以不予选择。也就是说制作网页时，图片格式一般在JPEG和GIF中选择，先比较一下JPEG和GIF各自的特点。

JPEG是有损压缩，以24位颜色存储，颜色比GIF更为丰富。一般适用于对颜色丰富程度要求高的图片，比如照片。

注意：24位颜色不是24种颜色，而是2的24次方种颜色。

GIF最多只能存储256种颜色，在颜色数量少的图片中能保持更小的文件大小，并且支持透明度以及动画。一般适用于颜色少的图片，比如企业标志、小图标和网页动画广告。

JPEG格式和GIF格式没有绝对的谁好谁坏之分，根据网页对图片的不同需要选择。

相比JPEG格式，颜色越多的图片，GIF格式文件大小占劣势，并且图片质量差；颜色越少的图片，GIF格式文件大小占优势，并且能保持图片质量。

5.2 插入图片

上一节学习了不同格式的图片选择，已经确定了制作网页的主流图片格式为JPEG和GIF。本节开始学习如何控制图片在网页上的显示。

注意：JPEG图片文件的扩展名为jpg，GIF图片文件的扩展名为gif。

5.2.1 插入图片到网页

插入图片的HTML是单标签<img/>，通过src属性的值确定所插入图片的路径。在D:\web\img\目录下，放入图片文件，并分别命名为img.jpg。创建网页文件，命名为img.htm，编写代码如代码5.2所示。

代码5.2 插入图片：img.htm

        <html>
        <head>
          <title>插入图片</title>
        </head>
        <body>
        <p align="center">插入一张小猫的图片：<br />
        <img src="img/img.jpg" /></p>
        </body>
        </html>

在浏览器地址栏输入http://localhost/img.htm，浏览效果如图5.2所示。

图5.2 插入图片

代码比较简单，不过读者必须清楚，网页文件和图片文件是分开存储的，如果图片的位置改变了，图片将无法显示。即网页文件只是通过<img />代码和图片链接。

5.2.2 设置图片的高度和宽度

在默认情况下，<img />标签显示的图片高和宽取图片原始的高和宽。比如图片的原始尺寸为宽250、高200像素，在网页中显示也是宽250、高200像素。

不过某些情况下需要不同的高和宽，通过<img />标签的width属性和height属性可以设置图片在网页显示宽度和高度。

width属性和height属性的值不需要单位，默认单位为像素。编写格式为：

        <img src="图片路径" width="指定宽度" height="指定高度"/>

注意：更改了<img />标签的width属性和height属性，并不会改变图片文件的原始尺寸。

5.2.3 设置图片的边框

<img />标签可以通过border属性的设置，使图片在网页中显示边框，border属性的值为边框的粗细，单位默认为像素。其编写格式为：

        <img src="图片路径" border="边框粗细数值"/>

5.2.4 给图片添加提示文字

类似于超级链接的文字提示，<img />标签的title属性同样可以设置图片的文字提示，其编写格式为：

        <img src="图片路径" title="提示文字"/>。

修改img.htm网页文件，编写代码如代码5.3所示。

代码5.3 插入图片的设置：img.htm

        <html>
        <head>
          <title>插入图片</title>
        </head>
        <body>
        插入图片（设置边框为10像素，加入文字提示）：<br />
        <img src="img/img.jpg"  border="10"title="读者你好，这是一幅小猫的图片啊！"/><br
    /><br />
        插入图片（设置边框为10像素，改变图片的宽度和高度）：<br />
        <img src="img/img.jpg"  border="10" width="350" height="180"/>
        </body>
        </html>

在浏览器地址栏输入http://localhost/img.htm，浏览效果如图5.3所示。

图5.3 img标签的边框设置

5.2.5 给图片添加替代文字

当<img />标签的src属性的路径找不到相应的图片文件时，<img />标签提供了一个alt属性的值来替代图片的文字。其编写格式为：

        <img src="图片路径" alt="替代文字"/>。

在D:\web\目录下创建网页文件，命名为img_alt.htm，编写代码如代码5.4所示。

代码5.4 图片替代文字：img_alt.htm

        <html>
        <head>
          <title>图片替代文字</title>
        </head>
        <body>
        插入一个错误的图片路径：<br />
        <img src="img/img_alt.jpg">
        </body>
        </html>

在浏览器地址栏输入http://localhost/img_alt.htm，浏览效果如图5.4所示。

图5.4 图片替代文字

5.3 图文混合排版

网页中的图片和文字的处理非常类似，图片以及文字段落在一起时，可以通过HTML代码设置图文排版。<img />标签的align属性用于设置图片与段落的排版，其取值比较复杂。

图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括left、center和right三种，而相对文字对齐方式则是指图像与一行文字的相对位置。align的取值一共有以下几种，参考表5.1。

表5.1 align的取值

在D:\web\目录下创建网页文件，命名为img_align.htm，编写代码如代码5.5所示。

代码5.5 图文对齐设置：img_align.htm

        <html>
        <head>
          <title>图文对齐设置</title>
        </head>
        <body>
        图像顶部和同行文本的最高部分对齐<img src="img/img.jpg"border="5"width="62"
    height="42" align="top"/><hr />
        图 像 底 部 和 同 行 文 本 的 底 部 对 齐 <img  src="img/img.jpg"border="5"width="62"
    height="42" align="bottom"/><hr />
        图 像 中 部 和 同 行 文 本 的 基 线 对 齐 <img  src="img/img.jpg"border="5"width="62"
    height="42"  align="middle"/><hr  /> 图 像 中 部 和 同 行 文 本 的 中 部 绝 对 对 齐 <img
    src="img/img.jpg"  border="5" width="62" height="42" align="absmiddle"/><hr />
        <p><img src="img/img.jpg"  border="5" width="62" height="42" align="left"/>
    使图像和左边界对齐（文本环绕图像）一定要保证它随时有新鲜的饮用水。请不要给它太多的牛奶。它也许
    喜欢喝，但喝多了会造成腹泻。可用水按 1：1 稀释后给它喝。对于猫仔来讲，最好的食物就是幼猫粮。猫
    粮不仅含有猫所需要不得各种营养要素而且味道鲜美。为了丰富它的食谱，您也可以适时喂它一些新鲜煮熟
    的鱼肉、鸡肉，但要去骨。 </p><hr />
        <p><img src="img/img.jpg"  border="5" width="62" height="42" align="right"/>
    使图像和右边界对齐（文本环绕图像）一定要保证它随时有新鲜的饮用水。请不要给它太多的牛奶。它也许
    喜欢喝，但喝多了会造成腹泻。可用水按 1：1 稀释后给它喝。对于猫仔来讲，最好的食物就是幼猫粮。猫
    粮不仅含有猫所需要不得各种营养要素而且味道鲜美。为了丰富它的食谱，您也可以适时喂它一些新鲜煮熟
    的鱼肉、鸡肉，但要去骨。 </p>
        </body>
        </html>

在浏览器地址栏输入http://localhost/img_align.htm，浏览效果如图5.5所示。

图5.5 图文对齐设置

5.4 给图片加链接

除了文字可以作为超链接外，图片也可以作为超链接。给图片设置超链接，与文字链接类似，编写格式为：

        <a href = "链接地址"><img src = "图片文件地址" /></a>

图片加上链接标签后，其默认有1像素粗的蓝色边框（类似于文字链接的蓝色下划线）。可通过图片标签的border属性对其边框粗细进行修改。

注意：如果不需要链接图片有边框，可设置border属性为0。

在D:\web\目录下创建网页文件，命名为img_a.htm，编写代码如代码5.6所示。

代码5.6 图片链接设置：img_a.htm

        <html>
        <head>
          <title>图片链接设置</title>
        </head>
        <body>
        图片链接（默认有边框）<br />
        <a href="img.htm"><img src="img/img.jpg" width="80" height="50" align="top"
    /></a><hr/>
        图片链接（消除边框）<br />
        <a href="img.htm"><img src="img/img.jpg" border="0" width="80" height="50"
    align="top"/></a><hr/>
        图片链接（边框设为5像素）<br />
        <a href="img.htm"><img src="img/img.jpg" border="5" width="80" height="50"
    align="top"/></a>
        </body>
        </html>

在浏览器地址栏输入http://localhost/img_a.htm，浏览效果如图5.6所示。

图5.6 图片链接设置

除了对整个图片设置超级链接外，还可将图片划分为多个区域，而每个区域可设置不同的超级链接，这些区域叫做“热区”。包含热区的图像可以称为映射图片。

要进行热区设置，首先需要在图片标签中设置映射名称，编写格式为：

          <img src ="图片文件地址" usemap ="#映射名称" />

这里使用图片标签的usemap属性，用于定义图片的映射名称。

注意：映射名称用于标识，读者可以自己定义。

然后，就要定义各个热区以及超链接了，编写格式为：

          <map name = 映射名称>
        <area shape = "形状1" coords = "坐标1" href = "超级链接地址1" />
        <area shape = "形状2" coords = "坐标2" href = "超级链接地址2" />
        ……
        </map>

这里学习两个新标签，双标签<map></map>和单标签<area />。<map></map>标签用于包含多个<area />标记，其中的“映射名称”就是在<img>标记中定义的名称。<area>标记则用于定义各个热区和超链接，它有两个重要属性，shape和coords。shape属性用于定义热区形状，它有4个值：

（1）default：默认值，为整幅图片。

（2）rect：矩形区域。

（3）circle：圆形区域。

（4）poly：多边形区域。

coords属性用于定义矩形、圆形或多边形区域的坐标。编写规则如下：

（1）如果热区形状为矩形区域，则coords包含四个参数，分别为left、top、right和bottom。也可以将这四个参数看成矩形左上角和右下角顶点的坐标。

（2）如果热区形状为圆形区域，则coords包含三个参数，分别为center-x、center-y和radius，这三个参数是圆心坐标和圆的半径。

（3）如果热区形状为多边形区域，则coords需要按顺序取多边形各个顶点的（x、y）坐标值，因此形式为“x1, y1, x2, y2, ……”。浏览器会按照定义顶点的顺序将它们连接起来，形成多边形热区。

图片看做二维坐标系，其左上角坐标是（0，0），x轴向右、y轴向下为正，坐标数值单位为像素。

说明：手写HTML代码定义热区链接比较麻烦，需要制作者有很强的空间思维能力。推荐使用Dreamweaver设计视图制作，用鼠标拖拽可直接绘制热区链接。

在D:\web\目录下创建网页文件，命名为img_map.htm，编写代码如代码5.7所示。

代码5.7 图片热区链接设置：img_map.htm

        <html>
        <head>
          <title>图片热区链接设置</title>
        </head>
        <body>
        <p align="center">
        图片热区链接<br/>
        <a href="img.htm">
        <img src="img/img.jpg" border="0" usemap="#abc"  />
        <map name="abc">
          <area shape="circle" coords="115,56,26" href="img.htm" title="这是链接区域">
        </map>
        </a>
        </p>
        </body>
        </html>

笔者在图片上定义了一个圆形热区链接，圆心位置坐标为（115，26）像素，半径为26像素。在img.jpg这幅小猫图片上位置为猫头的圆形位置，链接提示文字为“这是链接区域”。在浏览器地址栏输入http://localhost/img_map.htm，浏览效果如图5.7所示。

图5.7 图片热区链接

5.5 制作滚动图片

制作图片的滚动效果和文字滚动方法一样，同样使用<marquee></marquee>标签，编写格式为：

        <marquee><img src="" /></marquee>

读者制作滚动图片时，<marquee></marquee>标签的其他属性可以自由发挥。在D:\web\目录下创建网页文件，命名为img_mar.htm，编写代码如代码5.8所示。

代码5.8 滚动图片设置：img_mar.htm

        <html>
        <head>
          <title>图片滚动设置</title>
        </head>
        <body>
        <p align="center">
        图片滚动设置</p>
        <marquee direction="down" scrollamount="10">
        <center><img src="img/img.jpg" border="0" /></center>
        </marquee>
        </body>
        </html>

在浏览器地址栏输入http://localhost/img_mar.htm，浏览效果如图5.8所示。

图5.8 图片滚动设置

说明：读者请注意代码5.7中的双标签<center></center>，它可以使包含内容居中，不过由于不是很规范，一般情况下不推荐使用。

5.6 小结

文本内容可以在网页中主要用于信息的传播，而图片在网页中不但可以传播信息，还可以美化页面。本章详细学习了图片在计算机中的常用格式，特别适合网络传播的GIF格式和JPEG格式。读者可以知道，网页中的图片只是通过单标签<img />链接在网页中，单标签<img/>的各种属性设置可控制图片的表现方式。大多数图片的版式设置和段落类似，读者根据上一章的内容学习本章会比较轻松。

本周热推：

简单高效LATEX 深入理解以太坊 Python测试之道深度剖析ApacheDubbo核心技术内幕 C++反汇编与逆向分析技术揭秘（第2版）