很多新手在剛開始學習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！"是不顯示的，只有當我們的鼠標放到圖片上暫留的時候，鼠標上才會出現提示性文字如下圖：

　　搜索引擎真的會分辨你網頁當中的圖片是不是柯基犬嗎？人工智能有這麽強大？可以智能識圖？並不是的，搜索引擎是通過識別你網頁當中的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屬性值，從而使盲人用戶看不到圖片，也可以知道這裏顯示的是什麽。

HTML頁面插入圖片，使用background還是img標簽