Chap 04 HTML使用图像

4.1  图像的格式 

       网页中图像的格式通常有3种，即GIF、JEPG和PNG。目前GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。由于PNG文件具有较大的灵活性并且文件较小，所以它对于几乎任何类型的网页图形都是最适合的，但是Microsoft Internet Exporer 和Netscape Navigator只能部分支持PNG图像的显示。所以建议使用兼容性更好的GIF或JPEG格式。

1.  GIF格式

         GIF是英文单词Graphic Interchange Format 的缩写，即图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。

 2.  JPEG格式

            JPEG是英文Joint Photographic Experts Group 的缩写，它是一种图像压缩格式。此格式用于摄影或连续色调图像的高级格式，因为JPEG文件可以包含数百万种颜色，文件品质较高。

 3.PNG格式

           PNG是英文Portable Network Graphics 的缩写，PNG图像格式是一种非破坏性的网页图像格式，它提供了将图像文件以占用内存空间最小的方式压缩却不造成图像失真的技术。

4.2 插入图像

4.2.1  插入图像标题img

4.2.2  图像源文件src

语法：

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

 说明：

        路径可以是相对路径，也可以是绝对路径。图像的地址可以使用文件和http:// 关键字作为图像的地址，并且能够用于在网页上载入图像。

 4.2.3  图像的文字提示alt

         提示文字有两个作用，当浏览该网页时，如果图像下载完成，将鼠标指针放在该图像上，鼠标指针旁边会出现提示文字。也就是说，当鼠标指针指向图像上方的时候，稍等片刻，可以出现图像的提示性文字，用于说明或者描述图像。第二个作用是，如果图像没有被下载，在图像的位置上就会显示提示文字。

 语法：

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

说明：

提示文字的内容中英文均可。

 

4.2.4  图像的宽度和高度width、height

       width和height属性用来定义图片的高度和宽度，如果<img>元素不定义高度和宽度，图片就会按照它的原始尺寸显示。

 语法：

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

说明：

图像的宽度值和高度值单位均为像素。

 

4.2.5  图像的边框border

      默认情况，图像是没有边框的，通过border属相可以为图像添加边框线。可以设置边框的宽度，但边框的颜色是不可以设置的。当图像上没有添加链接的时候，边框的颜色为黑色；当图像上添加了链接时，边框的颜色和链接文字的颜色一致，默认为深蓝色。

 语法：

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

 

 4.2.6    图像的垂直边距vspace

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

  语法：

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

 

4.2.7  图像的水平间距hspace

        图像与文字之间的水平距离可以通过hspace参数进行调整。

 语法：

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

 

4.2.8  图像的排列 

        图像和文字之间的对齐方式是通过align属性来设定的，align的对齐方式有两种：绝对对齐和相对对齐。绝对对齐的效果和文字一样，只有3种：居中middle、

居左left、居右right。  相对对齐是指图像与一行文字的相对位置。

 语法：

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

 

4.3 图像的超链接

      除了文字可以添加超链接之外，图像也可以设置超链接属性。同一个图像的不同部分也可以链接到不同的文档，这就是热区链接。

 

4.3.1  图像的超链接

       图像的链接和文字的链接方法是一样的，都是用<a>标签来完成，只要将<img>标签放在<a>和</a>之间就可以了。

 语法：

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

 

4.3.2 图像热区链接

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

 语法：

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

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

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

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

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

</map>