在线客服
扫描二维码
下载博学谷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在线培训的机构并不难，我们只需要需要从以下几点进行考虑：
9509
2019-07-24 18:31:54
前端工程师必须了解的大前端跨平台解决方案
在各种平台多元化发展的同时，前端工程师要面对多种前端版本的开发，工作压力不断增大，因此前端工程师必须了解一下大前端，了解一下跨平台的解决方案。本文提供了目前比较实用的跨平台解决方案。希望对目前想提高的前端开发工程师有所帮助。
8535
2019-07-22 16:31:58
HTML5培训多少钱？值不值得参加？
HTML5培训多少钱？值不值得参加？目前在前端开发行业中，HTML5的使用异常广泛，因此不少人都动了参加HTML5培训的念头。那么HTML5培训多少钱？值不值得参加呢？就培训市场的普遍价格来看，HTML5培训的学费在一万到两万之间是比较合理的。至于值不值得参加，需要结合选择培训机构的课程内容仔细分析。下面以博学谷的前端课程为例，为大家介绍一下包含HTML5培训在内的所有课程内容。
5020
2020-01-10 10:14:52
JSP基于Java开发Web应用程序特点有哪些？
JSP基于Java开发Web应用程序特点有哪些？JSP是建立在Servlet规范之上的动态网页开发技术，实质是一个简化的Servlet，在JSP文件中HTML代码与Java代码共同存在，其中HTML代码用于实现网页中静态内容的显示，Java代码用于实现网页中动态内容的显示。为了与传统HTML有所区别，JSP文件的扩展名为JSP。
4090
2021-02-22 18:17:20
HTML5中Nav元素作用及应用场景知识点
HTML5中Nav元素作用及应用场景知识点，Nav元素一般用来做导航栏，链接到本页面的某个位置或者是其他页面。元素标签<nav>将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。
5150
2021-04-07 10:18:20
