認識 img 圖片標簽

在我們的網頁當中，圖片肯定是必不可少的元素，有了圖片之后，我們的網頁網站就會變得更加的豐富起來。那么我們要在 HTML 當中插入圖片的話，就會用到我們的 img 圖片標簽了。例如：

圖文并茂的網站。

1. IMG 標簽的使用

img 標簽為單標簽，所以沒有尾標簽。而 img 標簽有一個 必填的屬性： src 屬性，代表圖片的路徑。圖片的路徑可以為圖片的相對路徑，絕對路徑和網絡路徑。這里我們以網絡路徑示范：

<img src="http://www.xianlaiwan.cn/static/img/index/logo-recommended.png" alt="慕課網logo">

會呈現以下效果：

img 標簽還有一個屬性為 alt 屬性，alt 屬性表示錯誤提示，如果圖片的路徑既 src 屬性的地址出錯時，會顯示 alt 屬性的內容，我們把上面例子稍微修改一下，把路徑寫錯，既：

<img src="http://www.xianlaiwan.cn/static/img/index/logo-recommended123.png" alt="慕課網logo">

則會在頁面上呈現以下效果：

如果圖片路徑出錯，那么就不會顯示對應的圖片，而會顯示一個圖片加載失敗的樣式。這時候我們編寫的 ALT 屬性里面的內容也會呈現在頁面上，就表示我們當前這張加載失敗的圖片的錯誤提示。

注意：

alt 屬性的內容只會在圖片加載失敗時顯示，既圖片路徑出錯時，如果圖片加載成功，則 alt 屬性的內容會自動隱藏。 alt 屬性起到一個提示作用，如果我們在編寫代碼時，不小心把圖片路徑寫錯，則會提示我們該張圖片為哪一張，具體內容是什么。而 alt 屬性還有一個重要的作用就是網站的 SEO 作用 （搜索引擎爬取網頁的內容），假設由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：

1. 網速太慢；
2. src 屬性中的錯誤；
3. 瀏覽器禁用圖像；
4. 用戶使用的是屏幕閱讀器。

其重要性主要有： 網頁內容相關性是關鍵詞優化的前提，搜索引擎認為，網頁上的圖片應該與網頁主題相關。

反過來講，當搜索引擎要判斷網頁的關鍵詞時，圖片的 alt - 代替屬性是一個可信任的參考點。所以， 別忘了在圖片的 alt - 代替屬性。

img 標簽還可以設置 width 和 height 屬性來改變圖片的寬高，例如：

<img src="http://www.xianlaiwan.cn/static/img/index/logo-recommended.png" alt="慕課網logo" width="100" height="100">

則會呈現以下效果：

圖片的寬高為 100 * 100。

Tips：IMG 標簽的 width 和 height 屬性的值為數字，一般情況下為正整數。

2. 注意事項

1. img 標簽為單標簽，沒有尾標簽；
2. img 標簽的 width 和 height 都不要寫單位，直接寫數字即可；
3. src 是 img 標簽的必填屬性。

3. 真實案例分享

百度搜索（部分）

<ul>
    <li>
      <a>
        <img
          src="https://pics0.baidu.com/feed/bd3eb13533fa828b324d63ea7f258e32970a5a0a.jpeg">
      </a>
    </li>
    <li>
      <a>
        <img
          src="https://pics4.baidu.com/feed/30adcbef76094b36eaacf1e422f6b3df8d109dba.jpeg">
      </a>
    </li>
    <li>
      <a>
        <img
          src="https://pics5.baidu.com/feed/730e0cf3d7ca7bcb8af180f33f33a465f724a821.jpeg">
      </a>
    </li>
  </ul>

淘寶網（部分）

<div>
   <img src="//img.alicdn.com/imgextra/i3/180185321/O1CN01agBO561pB43nm30sJ_!!180185321-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp">
</div>
<div>
   <h4>Huawei/華為 p40 pro</h4>
   <p>MUI 10.1系統，內置華為AI語音助手Celia ，支持“Hey Celia”語音喚醒。HMS服務，華為P40搭載華為HMS服務。</p>
   <p><span></span>0 人說好</p>
</div>

4. 小結

1. img 標簽為單標簽，沒有尾標簽。
2. img 標簽的 src 屬性為必選項，其余屬性為可選項。
3. img 標簽可以嵌套在任意標簽里。
4. img 標簽圖片路徑可以為圖片的相對路徑，絕對路徑和網絡路徑，通常情況下我們采用相對路徑。