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。