第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

五月的夏天 · 更新于 2021-08-06

認(rèn)識 img 圖片標(biāo)簽

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

圖片描述
圖文并茂的網(wǎng)站。

1. IMG 標(biāo)簽的使用

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

<img src="http://idcbgp.cn/static/img/index/logo-recommended.png" alt="慕課網(wǎng)logo">

會呈現(xiàn)以下效果：

圖片描述

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

<img src="http://idcbgp.cn/static/img/index/logo-recommended123.png" alt="慕課網(wǎng)logo">

則會在頁面上呈現(xiàn)以下效果：

圖片描述

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

注意：

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

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

其重要性主要有： 網(wǎng)頁內(nèi)容相關(guān)性是關(guān)鍵詞優(yōu)化的前提，搜索引擎認(rèn)為，網(wǎng)頁上的圖片應(yīng)該與網(wǎng)頁主題相關(guān)。

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

img 標(biāo)簽還可以設(shè)置 width 和 height 屬性來改變圖片的寬高，例如：

<img src="http://idcbgp.cn/static/img/index/logo-recommended.png" alt="慕課網(wǎng)logo" width="100" height="100">

則會呈現(xiàn)以下效果：

圖片描述

圖片的寬高為 100 * 100。

Tips：IMG 標(biāo)簽的 width 和 height 屬性的值為數(shù)字，一般情況下為正整數(shù)。

2. 注意事項

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

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>

淘寶網(wǎng)（部分）

<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系統(tǒng)，內(nèi)置華為AI語音助手Celia ，支持“Hey Celia”語音喚醒。HMS服務(wù)，華為P40搭載華為HMS服務(wù)。</p>
   <p><span></span>0 人說好</p>
</div>

4. 小結(jié)

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

圖片描述