html图片标签的实例,HTML-

迷南。 2022-10-06 07:56 152阅读 0赞

一、img的属性：alt/title

alt属性是替换名字，是给搜索引擎抓取使用，当图片显示不出来时，就会显示出alt的内容；

![0cf6e69ca755ea8779903ba47a988710.png][]

title 属性是提示文字，当鼠标移到图片上的时候会显示出来，大部分的标签都会有这个属性

![9ccd49dce97ed28c5201e3b76c47f1e5.png][]

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*alt和title属性的区别\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\*\* alt属性：

alt属性是为了在文档中图像不能显示的时候，提供给用户的文字说明。(alt text)

目标元素：img/area/input:image

图像不能显示的情况：

用户的浏览器不支持图像显示，或者图像显示被禁止

视觉障碍或者使用屏幕阅读器的用户

注意事项：

有文字的图像，通常会将alt设置为该文字

装饰性的图片可以设置alt=””，但是不能忽略，否则文字浏览器或屏幕浏览器会显示图片的文件名

alt的长度应该遵循“尽可能短，尽需要长”

\*\* title属性

title属性能够为元素提供额外信息，(tool tip)

目标元素：除了HTML/head/meta/title/script/base/basefont/param外的所有元素

主要用途：

为链接添加描述性文字

为图像提供额外的说明信息

二、设置图片加载错误时的显示默认图

在js中有onload、onerror两个事件，可在图片中加入，修改于的src地址，这样可改善网络差或者图片丢失时的用户体验：

![3.jpg][]

在使用js时，为了避免’的嵌套，可以

οnerrοr=javascript:this.src="images/icon2.png"

三、图片下莫名的间隙问题

原理：vertical默认基线(baseline)对齐

理解：vertical-align指定了inline元素/table-cell元素的垂直对齐方式，默认值是baseline对齐，要注意的是，该对齐是元素相对于相邻文字的基线对齐的，以图片为例，我们假设在图片相邻有一个字母x，事实上，字母x非常特殊，他恰好是处于同元素内的中线(middle)和基线(baseline)中间的位置，也就是说图片相对于基线对齐，而基线和底线也是有距离的，这段距离所呈现的空白，也就是莫名间隙出现的原因。

![a3c880eaefb45417f53f71f5308cf543.png][]

\* 那么在没有文字的情况下为什么也会出现间隙呢，，

在H5的文档声明下，块状元素内部的内联元素的行为表现看，就好像块元素的内部有一个(有可能是两个)没有实体，看不见的空白节点，所以内部的inline元素相对于这个节点基线对齐，就产生了元素与父级之间的间隙。由于文字x的高度与line-height相关，而font-size又影响line-height，所以这个间隙的大小可以通过line-height/font-size进行间接的控制。

解决方法：

给元素设置vertical-align:top/middle/bottom;

对图片设置display:block;

\*\*\* vertical-align对块元素不起作用

在不影响布局的情况下，设置浮动/绝对定位

设置块元素的行高足够小

设置font-size

由于font-size间接控制line-height，所以这种方法本质上还是改变的行高

\*\*一个inline-block元素，如果里面没有inline内联元素，或者他的overflow不是visible，则该元素的基线就是其margin底边缘，否则，他的基线就是元素中最后一行内联元素的基线。

[0cf6e69ca755ea8779903ba47a988710.png]: /images/20221005/09fcf9015e174473baac3cce22734343.png
[9ccd49dce97ed28c5201e3b76c47f1e5.png]: /images/20221005/6e02a3bec6e94fc3ab6693454200f6ac.png
[3.jpg]: 
[a3c880eaefb45417f53f71f5308cf543.png]: /images/20221005/b0a6538bb5c54243ba109cb57f424fd6.png