当前位置 博文首页 > mxd：（10）html图像<img>基础
（一）<img>元素特性(大多数特性都可通过CSS实现，建议弃用相应特性)
1. src特性用于指明图像来源，由于网站所用图像大多来自本地，建议使用相对地址：src="logo.gif"
2. alt特性用于对图片进行描述，当浏览器无法加载图片时会用该文字替代图片；利于屏幕阅读器和搜索引擎工作。
3. height和width特性用于控制图像的高度和宽度（通常用像素值指定图片大小，百分比可能造成图像扭曲;应该尽量保证图片大小与网站上预留空间大小一致，否则任意指定图片大小也会造成图片扭曲）
4. align特性（弃用）用于在网页中对其图像（或指定文本相对于图像的环绕方式），其值可以有：top、middle、bottem、left和right
5. border特性（弃用）用于为图片添加边框，值单位为像素点：border=“2”
6. hspace和vspace特性（弃用）用于指定图像周围应该预留的空白空间，值单位为像素。（hspace表横向，vspace表纵向）
7. name和id特性，用于在网页中标识图片。
（二）使用图像做链接
只需在<a>标签中放置图片，则点击图片即可实现相应跳转。
<a href="网址"><img src="图片来源" alt=“图片描述” /></a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<base href="/testsmarty/templates/"></base>
<title>图像学习</title>
</head>
<body>
<table border="1" align="center">
<caption>图像使用</caption>
<tr>
<td><a href="http://www.baidu.com" title="链接到百度"><img src="picture/test1.jpg" width="200" height="350" border="2" hspace="5" vspace="10" /></a></td>
<td><a href="http://www.google.com.hk" title="链接到谷歌"><img src="picture/test2.jpg" width="200" height="350" border="5" hspace="5" vspace="10" /></a></td>
</tr>
</table>
</body>
</html>
（三）图片选取
正确的选取图像格式以及合理安排图像的保存方式能够提高网页加载速度，这里简单讨论下图片的存储格式。
网站上大多数静态图是位图图像BMP，由像素组成，并指定每个像素的颜色，常见格式包括JPEG、GIF、TIFF、PNG等。屏幕上每平方英寸中像素的数量称为图像分辨率，通常，在web上使用的图像应保存为每英寸72个像素点。浏览器通常支持3中位图图形格式：GIF、JPEG和PNG。
GIF（图形交换格式）图像：使用256色的调色板创建GIF图像图像每个像素是256中颜色中的一种，这256色的调色板由保存图像的程序从1600多万种颜色中选出。GIF图像的调色板存储在查找表中，每个像素参考查找表中的颜色信息。优势在于：如果许多像素使用相同颜色，图像不需要保存重复的颜色信息，从而使文件较小。该图像格式适用于颜色较单一的图形图像，而不适用于照片。当图像颜色少于256色时，该图像是不失真的；但多于256色的情况下，使用抖动技术来替代该像素颜色。
GIF动画：GIF图像能够在一个文件中存储多个帧或图像副本，这使得GIF图像能够在不同版本间循环，从而可以创建简单的动画。
JPEG图像：可以存储和压缩具有很多种颜色的图像。压缩JPEG图像的过程包括抛弃人们无法感知的颜色数据，比如微小的颜色变化，由于该图像格式抛弃了这些数据而无法还原到最初版本，被称为有损压缩。由于JPEG格式设计用于操作类似于照片的真实图像，故不适用于存储具有大量单调颜色或者有较高对比度硬边线的图像。
PNG（可移植网络图形）图像：PNG格式有两个版本，8位的PNG与8为GIF有相同限制，仅有256中颜色，且每个像素或为透明或者不透明。24位PNG则不受颜色数量限制，不会丢失任何颜色数据；而且使用映射为每个像素提供不同颜色的透明度。PNG的压缩比好于相应的GIF格式。
总结：网站图像应保持较小的文件尺寸；JPEG格式保存具有许多细节的逼真图像；GIF和PNG保存具有单调颜色或硬边线的图像。
