一、img的屬性：alt/title alt屬性是替換名字，是給搜索引擎抓取使用，當圖片顯示不出來時，就會顯示出alt的內容； title 屬性是提示文字，當滑鼠移到圖片上的時候會顯示出來，大部分的標簽都會有這個屬性 *******************************alt和title屬 ...
一、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:top/middle/bottom;
- 對圖片設置display:block;
*** vertical-align對塊元素不起作用
- 在不影響佈局的情況下，設置浮動/絕對定位
- 設置塊元素的行高足夠小
- 設置font-size
由於font-size間接控制line-height，所以這種方法本質上還是改變的行高
**一個inline-block元素，如果裡面沒有inline內聯元素，或者他的overflow不是visible，則該元素的基線就是其margin底邊緣，否則，他的基線就是元素中最後一行內聯元素的基線。
