02HTML-

1、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外的全部元素
　　主要用途：
　　　　爲連接添加描述性文字
　　　　爲圖像提供額外的說明信息

 

2、設置圖片加載錯誤時的顯示默認圖

　　在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"

　　

 

3、圖片下莫名的間隙問題

　　原理：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底邊緣，不然，他的基線就是元素中最後一行內聯元素的基線。