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