HTML学习笔记——使用图像

3.1 图像的格式
（1）GIF格式
GIF即图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
GIF格式最大优点就是可制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成一个动画文件。
GIF格式的另一个有点就是可以将图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大略猜出下载图像的雏形。
（2）JPEG格式
JPEG是一种图像压缩格式。此文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。
JPEG格式是一种压缩的非常紧凑的格式，专门用于不含大色块的图像。JPEG图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的区别。而JPEG文件只有GIF文件的1/4.JPEG对图标之类的含大色块的图像不是很有效，不支持透明图和动态图，但它能够保留全真的色调板格式。如果图像需要全彩模式才能表现效果的话，JPEG就是最佳选择。
（3）PNG格式
PNG图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点，而且还支持了48-bit的色彩，更快地交错显示，跨平台的图像亮度控制，更多层的透明度设置。
3.2 插入图像
3.2.1 插入图像标记img
图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也可以增加用户对网站风格的印象。img元素的相关属性见下表。

3.2.2 图像的源文件src
src属性用于指定图像源文件所在的路径，它是图像必不可少的属性。src参数用来设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径。图像的地址可以使用文件和http://关键字作为图像的地址，并且能够用于在网页上载入图像。
语法：<img src=”图像文件的地址”>
3.2.3 图像的提示文字title
提示文字有两个作用，当浏览该网页时，如果图像下载完成，将鼠标指针放在该图像上，鼠标指针旁边会出现提示文字。也就是说，当鼠标指针指向图像上方的时候，稍等片刻，可以出现图像的提示性文字，用于说明或者描述图像。第二个作用，如果图像没有被下载，在图像的位置上就会显示提示文字。
语法：<img src=”图像文件的地址” title=”提示文字的内容”>
3.2.4 图像的宽度和高度width、height
语法：
<img src=”图像文件的地址” width=”图像的宽度” height=”图像的高度”>
3.2.5 图像的边框border
默认情况下，图像是没有边框的，通过border属性可以为图像添加边框线。可以设置边框的宽度，但边框的颜色是不可以设置的。当图像上没有添加链接的时候，边框的颜色为黑色；当图像商添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。border的单位是像素，值越大边框越宽。
语法：<img src=”图像文件的地址” border=”图像边框的宽度”>
3.2.6 图像的垂直边距vspace和水平间距hspace
垂直边距vspace用来调整图像与文字的垂直边距。图像与文字之间的水平距离可以通过hspace参数进行调整。
语法：<img src=”图像文件的地址” vspace=”垂直边距” hspace=”水平间距”>
3.2.7 图像的排列align图像和文字之间的对齐是通过align属性来设定的，align的对齐方式有2种：绝对对齐和相对对齐。绝对对齐的效果和文字一样，只有3种：居中、居左、居右。相对对齐方式是指图像与一行文字的相对位置。
语法：<img src=”图像文件的地址” align=”文字的对齐方式”>

3.3 图像的超链接
除了文字可以添加超链接之外，图像也可以设置超链接属性。同一个图像的不同部分也可以链接到不同的文档，这就是热区链接。
3.3.1 图像的超链接
图像的链接与文字的链接方法是一样的，都是用标签来完成，只要将< img>标签放在< a>和< /a>之间就可以了。
语法：
<a href=”链接地址”><img src=”图像文件的地址”></a>
3.3.2 图像的热区链接
在HTML中可以把图片划分为多个热点区域，每一个热点区域链接到不同的网页。这种效果的的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接，这就是映射地图。
语法：
首先需要在图像文件中设置映射图像名，在图像的属性中使用 < usemap>标记添加到图像要引用的映射图像的名称如下：

<img src=”图像地址” usemap=”映射图像名称”>

然后需要定义热区图像以及热区的链接属性如下：

<map name=”映射图像名称”>
<area shape=”热区形状” coords=”热区坐标” href=”链接地址”>
</map>