HTML图像标签的基本特点和相关属性

HTML网页中任何元素的实现都要依靠HTML标签&＃xff0c;要想在网页中显示图像就需要使用图像标签&＃xff0c;接下来将详细介绍图像标签以及和它相关的属性。图像标签的基本语法格式如下。

<img src&＃61;"图像URL" />


在上面的语法中&＃xff0c;src属性用于指定图像文件的路径和文件名&＃xff0c;是img标签的必需属性。
要想在网页中灵活地使用图像&＃xff0c;仅仅依靠src属性是远远不够的。为此HTML还为标签准备了其他的属性&＃xff0c;具体如下表所示。
表1对标签的常用属性做了简要的描述&＃xff0c;下面对它们进行详细讲解&＃xff0c;具体如下&＃xff1a;

1.图像的替换文本属性alt

有时页面中的图像可能无法正常显示&＃xff0c;如图片加载错误&＃xff0c;浏览器版本过低等。因此为页面上的图像添加替换文本是个很好的习惯&＃xff0c;在图像无法显示时告诉用户该图片的信息&＃xff0c;这就需要使用图像的alt属性。

2.图像的宽度和高度属性 width、height

通常情况下&＃xff0c;如果不给标签设置宽高属性&＃xff0c;图片就会按照它的原始尺寸显示&＃xff0c;此外&＃xff0c;也可以通过width和height属性用来定义图片的宽度和高度。通常我们只设置其中的一个属性&＃xff0c;另一个属性则会依据前一个设置的属性将原图等比例显示。如果同时设置两个属性&＃xff0c;且其比例和原图大小的比例不一致&＃xff0c;显示的图像就会变形或失真。

3.图像的表框属性 border

默认情况下图像是没有边框的&＃xff0c;通过border属性可以为图像添加边框、设置边框的宽度。

4.图像的边距属性 vspace、hspace

在网页中&＃xff0c;由于排版需要&＃xff0c;有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

5.图像的对齐属性align

图文混排是网页中很常见的效果&＃xff0c;默认情况下图像的底部会与文本的第一行文字对齐&＃xff0c;如图1
图 1 图像标签的默认对齐效果

但是在制作网页时需要经常实现图像和文字环绕效果&＃xff0c;例如左图右文&＃xff0c;这就需要使用图像的对齐属性align。

注意&＃xff1a;
1、实际制作中并不建议图像标签直接使用border、vspace、hspace及align属性&＃xff0c;可用CSS样式替代。
2、网页制作中&＃xff0c;装饰性的图像不建议直接插入标签&＃xff0c;最好通过CSS设置背景图像来实现。