在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
HTML图像标签特点及相关属性介绍，在HTML中图像由<img>标签定义。通过使用<img>标签可以在文档中显示图像。主要涉及到alt属性、宽度和高度属性、表框属性、边距属性、对齐属性这些属性。
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设置背景图像来实现。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
Web前端学习网站哪个好？怎么选？
下一篇：
前端和后端哪个工资高？学哪个简单？
相关推荐 更多
HTML5培训课程学什么内容？学了有什么用？
HTML5培训课程学什么内容？学了有什么用？事实上，HTML5是Web中核心语言HTML的规范，一般HTML5培训课程都是包括在前端工程师的培训中，因此学习HTML5除了要学习相关语法、标签等内容，还需要掌握前端开发基础、移动Web网页开发、前后端交互等等知识。下面我们来看看HTML5相关培训课程具体学习内容。
6495
2019-09-15 11:03:55
参加前端HTML5开发专业培训哪家好？
HTML5是目前最火爆的软件开发之一，随着微信小程序的爆红和移动手机的广泛普及，无疑又给HTML5添了一把火。而且HTML5也是前端的核心技术之一，只要做前端开发必然就离不开HTML5技术。因此不少渴求高薪工作的小伙伴都开始学习HTML5技术了，而选择专业的培训机构是快速入门的最佳方法。然而前端HTML5开发专业培训机构这么多，参加前端HTML5培训哪家好呢？
5605
2019-10-15 16:42:05
HTML5开发工程师培训需要学什么内容？
HTML5开发工程师培训需要学什么内容？HTML5开发工程师其实也是Web前端工程师，他的培训内容一般有HTML、HTML5、CSS、Java 等前端开发相关技术、还有AngularJS框架、响应式布局、页面开发等等，这些都是必须要学习的内容。下面介绍一些博学谷的HTML5开发工程师培训课程。
5518
2019-10-17 10:59:03
学习前端的机构哪家比较好？
先给大家讲几个前端培训机构的判断标准，行业的口碑、授课讲师的资质、课程内容的质量以及还有班级的学习氛围。可能有人要说了，我不知道怎么了解这些判断标准，不能直接推荐一个靠谱的培训机构吗？当然可以，但是直接推荐还是过于主观，不一定适合所有人。因此，最好的办法就是大家多试听几家培训机构的课程，货比三家，依照以上的几个判断标准，就一定能选出最适合你的前端培训机构。
5805
2020-08-05 17:00:22
HTML5中Nav元素作用及应用场景知识点
HTML5中Nav元素作用及应用场景知识点，Nav元素一般用来做导航栏，链接到本页面的某个位置或者是其他页面。元素标签<nav>将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。
5866
2021-04-07 10:18:20
