HTML学习笔记【3】使用图像

1. 图像的格式

a) Gif格式

图像交换格式，最多可以使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，如导航条，按钮，图标，徽章或其他具有同一色彩和色调的图像。可制作动态图像。还可以以交错显示。

B) JPEG格式

图像压缩格式，品质高，文件小。专门用于不含大色块的图像。最适合需要全彩模式才能表现效果的情况。

C)PNG格式

非破坏性网页图像文件格式，在Microsoft Internet Explorer和Netscape Navigator只能部分显示PNG格式的图像。

2. 插入图像

a) 插入图像标记img

属性	描述
Src	图像的源文件
Alt	提示文字
Width,hetgh	宽度和高度
Border	边框
Vspace	垂直间距
Hspace	水平间距
Align	排列
Dynsrc	设定avi文件的播放
Loop	设定avi文件循环播放次数
Loopdelay	设定avi文件循环播放延迟
Start	设定avi文件播放方式
Lowsrc	设定低分辨率图片
Usemap	映像地图

B)图像文件的源文件src

<img src="图像文件的地址">

路径可以是相对路径也可以是相对路径。

才

C)图像的提示文字alt

当浏览该网页时，将鼠标指针放在该图像上，鼠标指针旁边会出现图像的提示性文字。

<img scr="图像文件的地址" alt=“提示文字的内容”>

D）图像的宽度和高度width height

<img src="图像文件的地址" width="图像的宽度" hight="图像的高度">

E)图像的边框 border

图像在默认的情况下是没有边框的，通过border属性可以为图像添加边框线，可以设置边框线的宽度但是不能设置颜色。

<img scr="图像文件的地址" border="图像边框的宽度">

F）图像垂直边距 capace

用来调整图像与文字的垂直边距。

<img src="图像文件的地址" vspace="垂直边距">

G)图像水平间距hspace

图象与文字之间的水平距离可以用hspace进行调整

<img src="图像文件的地址" hspace="水平边距">

H) 图像的排列 align

使文字与图像对其，分为绝对对齐和相对对齐

<img sec="图像文件的地址" align="文字的对齐方式">

属性	描述
Bottom	图片的底部和当前行的文字底部对齐
Top	图片的顶端和当前行的文字顶端对齐
Middle	图片的水平中线和当前行的文字中线对齐
Left	图片左对齐
Center	图片水平中线和当前行的文字中线对齐
Right	图片右对齐

3. 图像的超链接

a) 图像的超级链接

<a href="链接地址"><img srx="图像文件的地址"></a>

B)图像热区链接

在HTML中可以吧图片划分成多个热点区域，没一个热点区域连接到不同的网页，这种效果的实质是吧衣服图片划分为不同的热点区域，再让不同的区域进行超链接，就是映射地图。

首先需要在图像文件中设置映射图像名，用<usemap>标记添加图像要引用的映射图像的名称如下：

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

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

<map name="映射图像名">

<area shape="热区形状"> coords="热区坐标" href="链接地址"></map>

如：

<img src="image/1jpg" width="384" height="240"  usemap="#Map">

<map name="Map" id="Map"><area shape="rect" coords="126,208,215,237" href="index2.html" />