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