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屬性，alt其實就是你windows通用鍵盤空格左右的那個鍵，也是你吃雞（PC端）的時候，可以自由轉頭的那個鍵，它的本意是替換的意思，alt屬性在img標簽里面是一個必須屬性，其作用是當我們的圖片，在用戶的網絡條件差、路徑錯誤或者瀏覽器禁用圖像等情況下，用戶看不到這張圖片，alt內的解釋性文字會顯示出來，使得用戶即使看不到圖片，也不會影響到對整個頁面的瀏覽，如下圖：

　　而且alt屬性里的值還會被搜索引擎抓取到，比如你現在在百度搜索柯基，那么我們網頁當中的這張圖片就可能會被百度圖片給抓取到，如下：

　　搜索引擎真的會分辨你網頁當中的圖片是不是柯基犬嗎？人工智能有這么強大？可以智能識圖？並不是的，搜索引擎是通過識別你網頁當中的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。