第九章 图片和多媒体

1 图片

1.1 图片标记img

高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。

不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。网页中常用的图片格式为GIF、JPEG和PNG。

一般在网页设计中选择的图片不要超过8KB，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。

如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。 在HTML文档中，显示图片所用的标记是。

格式：

? img是插入图片的标记，其常用属性如表9-1。其中src是其必须的属性。 ? src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径，

也可以是绝对路径。

表9-1 img的属性及其功能说明 img属性 功能说明 src 指定图像源，即图像的URL路径 width 指定图像的显示宽度 height 指定图片的显示高度 hspace 指定图片的水平间距 vspace 指定图片的垂直间距 align 指定图片的对齐方式 border 指定图片的边框大小 alt 显示图像的说明文字 实例1.html：

网页效果如图9-1。

图9-1插入图片示例

1.2 指定图像的高与宽

默认情况下，在HTML页面中显示的是图像的原始大小。

如果要显示指定的图像大小，就需采用img标记的width和height属性。 格式：

? width和height的单位可以是像素，也可以是百分比。百分比表示显示

图像大小为浏览器窗口大小的百分比。

? 在width和height属性中，如果只设置了其中的一个属性，则另一个属

性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。

实例2.html：

第二个图设置为50%，其宽度为显示窗口宽度大小的二分之一，图的大小随浏览器窗口大小变化而变化，网页效果如图9-2。

图9-2指定图像的高与宽

1.3 指定图像的间距

标记的hspace和vspace属性分别用来指定图像的水平间距和垂直间距。其值为数字，单位为px，默认值为0。

格式：

hspace 指的是所设置图片与相邻元素的水平间距。 vspace指的是所设置图片与相邻元素的垂直间距。

实例3.html，通过一个表格把未指定图像间距、只指定图像水平间距、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清晰地进行比较显示。

图像间距说明	图像间距示例
未指定图像间距
指定图像水平间距