五、HTML基础之添加图像

.1 添加图像——img

语法：<img src=”图像文件的地址”>

说明：src参数用来设置图像文件所在的路径，可以是相对路径也可以是绝对路径。

5.2 设置图像属性

5.2.1 图像高度——height

默认情况下，改变高度的同时，其宽度也会等比例进行调整

语法：<img src=”图像文件的地址” height=图像的高度>

说明：高度单位是像素

5.2.2 图像宽度——width

语法：<img src=”图像文件的地址” width=图像的宽度>

说明：只设置高度时，宽度会等比例变化，若同时设置且缩放比例不同时，图像可能会变形。

5.2.3 图像边框——border

默认情况下，插入的图像没有边框，通过border属性为图像添加边框。

语法：<img src=”图像文件的地址” border=图像边框的宽度>

说明：border的单位是像素。

5.2.4 图像水平间距——hspace

如果不使用<br>标记或者<p>标记进行换行提示，那么添加的图像会紧跟在文字之后，而图像与文字之间的水平距离是可以通过hspace参数进行调整的。

语法：<img src=”图像文件地址” hspace=”水平间距”>

说明：水平间距单位是像素。

5.2.5 图像垂直间距——vspace

用来调整图像与文字之间的垂直距离

语法：<img src=”图像文件的地址” vspace=”垂直间距”>

说明：单位是像素

5.2.6 图像相对于文字基准线的对齐方式——align

图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字对齐方式则是指图像与一行文字的相对位置。

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

说明：align取值见表

 

5.2.7 图像的提示文字——alt

如果观看web站点的时候使用了一个非图像化的浏览器，或者为了加快浏览器速度关掉了图像显示，这时候提示文字就起作用了，当图像没有装载到浏览器上时，就会显示添加的提示文字，而下载图像之后，当鼠标停留在图像上方时也会显示出提示文字。

语法：<img src=”图像文件地址” alt=”提示文字的内容”>

说明：提示文字可以是中文，也可以是英文

5.3 图像的超链接

一幅图像可以切分成不同的区域设置连接，这些区域称为热区，因此一幅图像也就可以设置多个链接地址。

5.3.1 设置图像的超链接

语法：<A href=”链接地址” target=”目标窗口的打开方式”><img src=”图像文件的地址”></A>

5.3.2 设置图像热区链接

包含热区的图像也可以称为映射图像

语法：首先需要在图像文件中设置映射图像名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称如下：<img src=”图像地址” usemap=”映射图像名称”>

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

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

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

</map>

说明：在该语法中要先定义映射图像的名称，然后再引用这个映射图象。在<area>标记中定义了热区的位置和链接，其中shape用来定义热区形状，可以取值为rect(矩形区域)、circle(圆形区域)以及poly(多边形区域)；coords参数用来设置区域坐标，对于不同形状来说，coords设置的方式也不同。对于矩形区域rect来说，coords包含4个参数，分别为left、top、right、bottom，也可以将这4个参数看作矩形两个对角的点坐标；对于圆形区域circle来说，coords包含3个参数，分别为center-x、center-y、tadius，也可以看作是圆形的圆心坐标(x,y)与半径的值；对于多边形区域poly设置坐标参数比较复杂，跟多边形的形状有关。Coords参数需要按照顺序（可以是顺时针，也可以是逆时针）取各个点的x,y的值。一般情况下使用可视化软件进行参数的设置。