在的img標(biāo)簽有兩個(gè)屬性分別為alt和title，對(duì)于很多初學(xué)者而言對(duì)這兩個(gè)屬性的正確使用都還抱有迷惑，當(dāng)然這其中一部分原因也是ie瀏覽器所導(dǎo)致的。正確的使用這兩個(gè)屬性除了可以提高圖片的搜索能力外，在用戶(hù)體驗(yàn)上也是很有幫助。
img標(biāo)簽說(shuō)明
img -- 是圖像的標(biāo)簽
src -- 屬性告訴瀏覽器圖片的具體位置,就像連接的href標(biāo)簽一樣告訴瀏覽器要鏈接到的文件,可以用URI表示,URI表示法見(jiàn)相對(duì)路徑和絕對(duì)路徑
alt -- 圖片的替代文字.有些瀏覽者不想看到圖片(比如由于網(wǎng)速太慢),有些早期的瀏覽器也不支持圖片,還有一種可能'你把圖片的具體位置寫(xiě)錯(cuò)了',這些情況瀏覽者是看不到圖片的,這時(shí)alt可以在圖片的位置上顯示出代替的文字,這是非常有用的,記得一定要加上
title -- 圖片的提示文字,當(dāng)鼠標(biāo)停留到圖片上時(shí),會(huì)提示相關(guān)文字
上面的例子中并沒(méi)有指定圖像的寬度width與高度height,其實(shí)瀏覽器會(huì)自動(dòng)識(shí)別出圖像的高度與寬度,一般不用我們指定,除非有其它的目的,比如有意的增大或縮小圖片
示例
<img src="html_filex.png" alt="alttext" title="titletext" />
我們?cè)谑褂胔tml圖片顯示的img標(biāo)簽時(shí)會(huì)遇到一些問(wèn)題，在此長(zhǎng)沙做網(wǎng)站學(xué)做網(wǎng)站論壇整理了下如下問(wèn)題以供參考。
問(wèn)題1：如果在一個(gè)頁(yè)面上插入<img>標(biāo)簽，有哪些屬性是必需的？
答案是src和alt。
問(wèn)題2：在一個(gè)頁(yè)面上插入<img>標(biāo)簽，為什么說(shuō)最好要使用height和width屬性？
您在瀏覽網(wǎng)頁(yè)的時(shí)候，可能會(huì)遇到這種情況：隨著頁(yè)面中的圖像加載并成功顯示，頁(yè)面上的內(nèi)容會(huì)隨之發(fā)生不規(guī)律的移動(dòng)，影響您的閱讀。這種情況就是因?yàn)轫?yè)面上的圖像沒(méi)有定義height和width屬性而導(dǎo)致的。
如果沒(méi)有定義圖片的height和width屬性，那么瀏覽器為了能夠顯示每一個(gè)加載的圖像，它需要先下載圖像，然后解析出圖像的高度和寬度，并在顯示窗口留出相應(yīng)的屏幕空間，這樣就會(huì)導(dǎo)致瀏覽器不斷地重新計(jì)算/調(diào)整頁(yè)面的布局，這可能會(huì)延遲文檔的顯示，并導(dǎo)致頁(yè)面重繪。
因此，筆者建議使用<img>的 height 和 width 屬性來(lái)指定圖像的尺寸。這樣的話(huà)，瀏覽器在下載圖像之前就為其預(yù)留出了空間，從而可以加速文檔的顯示，還可以避免文檔內(nèi)容的移動(dòng)而引起頁(yè)面重繪。
但是，需要注意的是：不要通過(guò) height 和 width 屬性來(lái)縮放圖像。如果通過(guò) height 和 width 屬性來(lái)縮小圖像，那么用戶(hù)就必須下載大容量的圖像（即使圖像在頁(yè)面上看上去很小）。正確的做法是，在網(wǎng)頁(yè)上使用圖像之前，應(yīng)該通過(guò)軟件把圖像處理為合適的尺寸。當(dāng)然，這個(gè)準(zhǔn)則在實(shí)際應(yīng)用中也有例外，例如筆者就認(rèn)為，小比例的圖像縮放應(yīng)該是允許的，此外，如果頁(yè)面上需要加載同一張圖像的不同尺寸的顯示，因?yàn)闉g覽器對(duì)同一個(gè)圖像只會(huì)請(qǐng)求一次，因此此時(shí)就建議使用height 和 width 屬性來(lái)縮放圖像。
問(wèn)題4：<img>標(biāo)簽的onload/onerror/onabort事件，在什么情況下會(huì)被觸發(fā)？
onload: 事件會(huì)在圖像加載完成后立即發(fā)生。
onerror: 事件會(huì)在文檔或圖像加載過(guò)程中發(fā)生錯(cuò)誤時(shí)被觸發(fā)。
onabort: 事件會(huì)在圖像加載被中斷時(shí)發(fā)生。例如用戶(hù)單擊了瀏覽器的Stop按鈕，或者在圖像下載的過(guò)程中。