HTML頁面插入圖片,使用background還是img標簽
很多新手在剛開始學習HTML標簽的時候,老師一定會教你
<img src="xxx.png"/>
這種引入圖片格式,第二天學習css的時候,老師又會教你給div等元素添加背景圖片,
div {
background-image: url(xxx.png);
}
那麽這兩種方式究竟孰優孰劣,分別應該在什麽情況下使用呢?今天我在這裏就給大家詳細講解一下:
關於img標簽,我們要知道,它除了src路徑以外,還有兩個屬性,一個是alt,一個是title
<img src="xxx.png" alt="" title=""/>
首先我們講一下title,它的作用是什麽呢?我們來看一下,當我們在body中寫入以下代碼的時候,
<img src="img/柯基.jpg" alt="" title="Hello,World!"/>
打開瀏覽器,會顯示對應的那張圖片,title裏面寫的"Hello,World!"是不顯示的,只有當我們的鼠標放到圖片上暫留的時候,鼠標上才會出現提示性文字如下圖:
title屬性是對元素的註釋說明和額外補充,當鼠標放到文字或圖片上時候,會顯示title對應的文字。要註意的一點是,title這個屬性並不是img標簽特有的,加給button、div等其他標簽都是可以的,我曾經看過一些文章,作者提議給網頁中所有的標簽都加上title屬性,這樣將來用戶把鼠標放到每個按鈕、圖片、文字上,都有title提示,但是我看響應附和者寥寥,為什麽呢,太麻煩了唄,你作為一個程序員你願意多此一舉嗎,況且此舉還會增加代碼體積。
搜索引擎真的會分辨你網頁當中的圖片是不是柯基犬嗎?人工智能有這麽強大?可以智能識圖?並不是的,搜索引擎是通過識別你網頁當中的alt屬性,來辨別本圖片是不是它所要抓取的。我們的網站肯定是希望搜索引擎抓取到我們,這樣我們的瀏覽量就會加大,我們的流量就會更多,我們就能賺取更多的廣告費,我們就會更有銀子。
其次,還有一個原因,img加載更快對於我們一篇HTML文檔來說,瀏覽器對文檔的加載是從上往下的,我們的css樣式是在style標簽內,當我們的瀏覽器加載到style標簽的時候,它就會停下,跳過去,繼續加載HTML,HTML加載完成後,才會繼續加載css樣式表,否則的話,假如我們在style標簽內寫了.div1{width:100px;}這時候瀏覽器並沒有加載到body,因為我們的style標簽是在head內,是在body上面的,這時候瀏覽器就無法找到div1並給其設置寬度。所以,如果論加載速度,還是body中的img標簽加載更快。
最後呢,還有一個原因,是從用戶體驗角度來講的。如果你在body 中通過img標簽引入一張圖片,那麽用戶在瀏覽網頁的時候,是可以直接在圖片上右鍵,然後另存為,把圖片保存下來,但是background是不可以的;
還有一種情況比較少見:針對盲人用戶,盲人用戶眼睛無法直接看到網頁,但是又有上網的需求,這時候,患者就可以借助一些讀屏軟件來瀏覽我們的網頁,這時候問題來了,讀屏軟件可以閱讀文字,可是它怎樣閱讀我們的圖片給患者聽呢?這是一個問題,所以這時候我們之前提到的alt屬性的作用就來了,讀屏軟件可以直接閱讀圖片的alt屬性值,從而使盲人用戶看不到圖片,也可以知道這裏顯示的是什麽。
所以,綜上所述,一般情況下,在我們網頁中主體用到的圖片,盡量用img標簽引入是最好的,但是這也並不是絕對,在網頁中用到的logo等圖標,我們一般用background來顯示,或者該圖片本就是背景圖,我們就一定使用background。
HTML頁面插入圖片,使用background還是img標簽