HTML教程07第七章..docVIP

第七章　图像 　　万维网（WWW）与其他类型的网络（如FTP）最大的不同就在于：它在网页上可呈现丰富的色彩和图像。图像还可以作为链接来使用，这就让网页更加丰富多彩了。 7.1　图像格式和添加图像的标记img 　　图像格式有很多种，在网络中使用的图像格式应该能被各种操作系统所接受才行。目前，在网上流行的图像格式以GIF和JPEG为主，另外还有一种名为PNG的图像文件格式。图像文件一般要经过压缩，否则文件就太大了，不利于在网上传输。它们的简要情况介绍如下： GIF格式。GIF格式的图像文件只包含256色，因此色彩表现力不够，但图像文件可以很小，压缩效率高。GIF格式适合于商标、新闻式的标题，还可以形成简单的动画效果。文件的扩展名为.gif。 JPEG格式。照片之类的全彩图像一般都以JPEG格式来压缩，因此JPEG格式常用来保存超过256色的图像。但JPEG的压缩过程会造成图像数据的损失，是一种“有损压缩”。不过视觉上一般不易察觉。文件的扩展名为.jpg或.jpeg。 PNG格式。PNG（Portable Network Graphics）图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩，却又不造成图像失真的技术。因此它不仅具有GIF图像格式的大部分优点，而且还支持真彩色。PNG格式是Macromedia公司倡导的。 　　gif格式动画图片并不过时，而且在网页上随处可见。GIF文件的图片格式的压缩率比JPEG格式要好（因为它只有256色），而且GIF格式图片透明性特别好，加上节省空间，最适网上使用，这也是GIF格式图片之所以能一直被人们喜用而至今不衰的原因所在。JPEG格式压缩显示全彩图像的效率最高。虽然PNG格式兼具JPEG和GIF两种格式的优点，但其压缩率毕竟没有它们好，而且PNG不支持动画应用效果，因此三者都各有优点。 img src = 图像文件的地址 alt = 文字 border = 边框宽度 width = 图像宽度 height = 图像高度 　　各种属性的解释如下： src：用来设置图像文件所在的路径。可以是相对路径，也可以是绝对路径。 alt：当鼠标放在图片上时，显示的小段提示文字，一般用于说明此图片的标题或主要内容。当图像文件无法在网页中显示时，在图像的位置也会显示alt所设置的文字。 border：图像边框的宽度，单位是像素。在默认情况下图像无边框，即border = 0。 width和height：图像的宽度和高度，单位是像素。在默认情况下，如果改变其中一个值，则另一个值也会等比例进行调整，除非同时设置两个属性。 　　【例1】html head titleitsway -- 图像/title /head body p !--当把鼠标放在下幅图片上时，将显示“林冲图片”-- img src = linchong.jpg alt = 林冲图片 !--但以下两幅图片则没有设置alt属性-- img src = linchong.jpg width = 100 border = 1 img src = linchong.jpg width = 100 height = 100 !--下面故意写错文件名，是为了显示alt属性值-- img src = linchooooong.jpg alt = 林冲图片 /p /body/html 　　显示结果如下图所示。 　　可以看出，如果不指定width和height属性值，则图像以它的原始大小在网页中显示；如果同时指定width和height值，则一般图像会不等比例地伸缩；如果找不到文件，或者在网络上文件下载速度过慢，则会显示alt属性的值。 　　必须注意的是，src属性在img标志中是必须赋值的。　　这个主意的确很妙，可惜并没有写进HTML 4.01规范中。而且随着网速的提高，似乎没有必要把问题复杂化，所以现在并不用了。 7.2　align、hspace和vspace属性 　　img标记还有三个比较常用的属性，它们是： 　　（1）align属性：指定图像和周围文字的对齐方式。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括left、center和right三种，而相对文字对齐方式则是指图像与一行文字的相对位置。align的取值一共有以下几种。 align的值 含义 top 图像顶部和同行文本的最高部分对齐（可能是文本顶部，也可能是图像顶部） middle 图像中部和同行文本的中部对齐（通常是文本行的基线，并不是实际的中部） bottom 图像底部和同行文本的底部对齐 left