HTML使用图像

1.插入图像标记<img .....>

（1）图像的源文件src

概述：src属性用于指定图像源文件所在的路径，它是图像不可少的属性

语法：<img src = "images/car.jpg" width = "474" height = "264">

说明：src属性用来设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径

提示：图像的地址可以使用文件和http://关键字作为图像的地址，并且能够用于在网页载入图像

（2）图像的提示文字alt

概述：当浏览该网页时，如果图像下载完成，将鼠标指针放在该图像上，会出现提示文字，还可以在图像没有被下载时在图像的位置上显示提示文字

语法：<img src = "webk/flag_1.jpg" alt = "环保咨询" width = 268 height = 170 align = "left">

   (3)图像的宽度和高度 width、height

概述：如果img元素不定义高度和宽度，图片就会按照原始尺寸显示

语法：<img src = "image/5.jpg" width = "200" height = "160">

   (4)图像的边框border

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

语法：<img src = "image/8.jpg" width = "300" height = "201" border = "5">

   (5)图像的垂直边距vspace与水平间距hspace

概述：垂直边距vspace用来调整图像与文字的垂直边距；通过调整图像的水平间距，可以使文字和图像排列的更紧凑

语法：<img src = "image/88.jpg" width = "160" height = "110" vspace = "20"  space = "20"  align = "right">

提示：使用这俩个属性会在图像周围对称加入空格，hspace属性在图像俩侧加入空格，而vspace属性在图像顶部和底部加入空格

（6）图像的排列align

概述：图像和文字之间的对齐是通过align属性来设定的，align对齐方式有俩种：即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样，只有三种：左中           右。相对对齐方式是指图像与一行文字的相对位置。

语法：<img src = "图像文件地址" align ＝ “文字的对齐方式”>

align属性值：bottom——图片底部和当前行文字底部对齐

          top——图片的顶端和当前行文字顶端对齐

           middle——图片水平中线和当前行文字中线对齐

       left ——图片左对齐

     center——图片居中

     right——图片右对齐

2.图像的超链接

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

（1）图像的超链接

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

语法：<a href = "#"><img src = "image/7.jpg" width = "400" height = "284" border = "0"/></a>

说明：href参数用来设置图像的链接地址

提示：由于使用<a>标记，图像链接和文字链接相同，创建E-mail链接需要将mailto://添加到E-mail地址前面。链接到一个HTTP站点，需要在网址前使用http://协议

（2）图像热区链接

概述：在HTML中可以把图片划分成多个热点区域，每一个热点区域链接到不同的网页。这叫做映射地图

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

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

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

  </map>