在HTML中图像标签<img src="">主要涉及alt属性、宽度和高度属性、表框属性、边距属性、对齐属性这些属性，下面分别介绍img标签的这些属性的特点和用法。

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，需要熟练掌握图像标签<img />和相关的属性。图像标签的基本语法格式：

在上面的语法中，src属性用于指定图像文件的路径和文件名，是img标签的必需属性。要想在网页中灵活地使用图像，仅仅依靠src属性是远远不够的。为此HTML还为<img />标签准备了其他的属性：

<img />标签的属性

<img />标签的常用属性：

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

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

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

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

3、图像的表框属性border

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

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

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

5、图像的对齐属性align

图文混排是网页中很常见的效果，默认情况下图像的底部会与文本的第一行文字对齐。但是在制作网页时需要经常实现图像和文字环绕效果，例如左图右文，这就需要使用图像的对齐属性align。

实际制作中并不建议图像标签<img />直接使用border、vspace、hspace及align属性，可用CSS样式替代。网页制作中，装饰性的图像不建议直接插入<img />标签，最好通过CSS设置背景图像来实现。

猜你喜欢：

什么是HTML语义化？HTML语义化有哪些好处？

HTML5中figure标签的作用

HTML入门之 a 标签

Html5是什么?HTML5的发展历程介绍

黑马程序员HTML&JS+前端课程

企业愿景：成为一个有情怀、有良心、有品质的一流教育机构；企业使命：帮助更多迷茫的学生实现，他们的梦想；企业价值观：初心至善，匠心育人；企业精神：草根精神：坚韧 务实 谦逊 节俭；创业精神：拼搏 开拓 思危 创新；协同精神：信任 互助 宽容 感恩；奉献精神：敬业、分享、真诚、关爱。千锋人独白：一群草根奉献着自己的青春年华，为创造一个有真正社会价值的职业教育机构“千锋教育”而奋力拼搏！几十年后，当每一位千锋人回忆在千锋这段历程，相信内心深处是欣慰的，因为我们没有虚度年华，我们一起努力拼搏做了一件非常有意义的事情：帮助更多迷茫的学生实现他们的梦想。