html代码图片img标签属性有哪些?图片img标签的用法有哪些,下面全面给大家介绍html代码img标签属性的全部内容,让大家尽快熟悉html代码及图片img标签内容。
在html代码中,图像由img标签所定义,什么叫<img>图像空标签,图像空标签指的是没有闭合的<img>图像标签,如果你想在网页上显示图像,那么就必须要使用图像src属性,图像src属性指的是图像的URL地址。
图像img标签语法定义为<img src=”图片地址” alt=”图片描述文字”>
,src=”图片地址”指的是图片存储位置,如果图像名称为 “123.jpg” ,而且图像存储在www.zhuzhouren.cn的images目录中,那么图像URL地址为https://www.zhuzhouren.cn/images/123.jpg,即src=”https://www.zhuzhouren.cn/images/123.jpg”,网页在浏览器中显示图像的地方必有<img>图像标签。
img标签的定义和用法
<img>图像标签指的是向网页中嵌入一张图片,注意从技术上讲,图片<img>标签并不能插入图像,而且链接网页上的图片。
<img>图像标签链接的是占用网站服务器空间中图片,图片<img>标签还有两个属性内容,一个为src属性,另一个为alt属性,src属性定义的是图像URL地址,alt属性用来定义可替换图像的文本,alt属性用户是可以自定义的,建议alt属性内容要与图片内容相关,如下所示:
<img src=”123.jpg” alt=”用户定义图片描述文字”>
当浏览器无法加载图像的时候,图片alt属性内容会告诉用户图片的信息,此时浏览器显示的是alt属性替换图像的文本的内容,而不是图片,因此在网页上插入图片的时候建议要输入图片alt属性内容,这样有利于提高用户体验度。
HTML代码img标签属性的缩放:
HTML部分:
<div class=”tu”><img src=”123.jpg”></div>
HTML代码img标签css样式代码可控制图片大小:
.tu img{
max-height:720px;
max-width:640px;
width:expression(this.width > 640 && this.height < this.width ? 640: true);
height:expression(this.height > 720 ? 720: true);
}
说明:图片大于640自动缩放到640px,如果小于640px即为实际大小,高度大于720px缩放到720px,小于720px为实际大小。注意事项:一般对图片不控制大小。
图像的居中显示:(附全部对齐属性值)
left: 把图像对齐到左边
right: 把图像对齐到右边
middle: 把图像与中央对齐
top: 把图像与顶部对齐
bottom: 把图像与底部对齐
height,width属性
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
属性值默认单位为像素:<img src=”123.jpg” alt=”图片描述文字” width=”404″ height=”258″>
注意,在图片属性内容中定义图片的高度和宽度对于网站图片优化有着很好的作用,如果你的图片属性指定了高度和宽度,那么在图片加载的时候就会加载图片的宽度尺寸,如果未定义图片宽高尺寸,那么加载时图片有可能会影响html页面的布局。
img标签基本的注意事项:
1、网页不要用太多的图片,如果你的这个网页插入了10张图片,浏览器为了正确显示网页内容,就需要将图片一张张加载出来,需要较多的时间,影响用户体验度,建议网页少用图片。
2、在网页插入图片的时候,一定要插入正确的图片路径,如果图片路径不正确,网页就无法正常加载图片,严重影响了用户体验。
HTML图像标签所包含属性所表示的意思:
<img>定义图像标签;
<map>定义图像地图标签;
<area>定义图像地图中的可点击区域;
HTML 与 XHTML 之间的差异:
在 HTML 中, 标签没有结束标签;
在 XHTML 中, 标签必须被正确地关闭;
在 HTML 4.01 中,不推荐使用 image 元素的 “align”、”border”、”hspace” 以及 “vspace” 属性;
在 XHTML 1.0 Strict DTD 中,不支持 image 元素的 “align”、”border”、”hspace” 以及 “vspace” 属性。
img标签可选属性知识小补充:
align:规定如何根据周围的文本来排列图像;
border:定义图像周围的边框;
height:定义图像的高度;
hspace:定义图像左侧和右侧的空白;
ismap:将图像定义为服务器端图像映射;
longdesc:指向包含长的图像描述文档的URL;
usemap:将图像定义为客户端图像映射;
vspace:图像顶部和底部的空白;
width:图像宽度大小。
本篇文章发布于大兵SEO博客,为大兵原创内容,如若转载,请注明出处:https://www.zhuzhouren.cn/seojishu/2950.html,否则,禁止转载,谢谢配合!