一、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="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对块元素不起作用
在不影响布局的情况下，设置浮动/绝对定位
设置块元素的行高足够小
设置font-size
由于font-size间接控制line-height，所以这种方法本质上还是改变的行高
**一个inline-block元素，如果里面没有inline内联元素，或者他的overflow不是visible，则该元素的基线就是其margin底边缘，否则，他的基线就是元素中最后一行内联元素的基线。
经验首页