02HTML-<img>

一、img的属性：alt/title

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

　　　　

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

　　　　

*******************************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地址，这样可改善网络差或者图片丢失时的用户体验：
　　　　

<img src="img/3.jpg" onload="this.src='default.jpg'" onerror="this.src='error.jpg'"/>

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

　　　　

onerror=javascript:this.src="data:images/icon2.png"

　　

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

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

　　* 那么在没有文字的情况下为什么也会出现间隙呢，，
　　　　在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底边缘，否则，他的基线就是元素中最后一行内联元素的基线。