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>