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

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

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

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

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

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

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

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

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

圖片描述

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

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

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

圖片描述

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

注意：

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

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

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

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

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

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

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

圖片描述

圖片的寬高為 100 * 100。

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

2. 注意事項(xiàng)

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

3. 真實(shí)案例分享

百度搜索（部分）

<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語(yǔ)音助手Celia ，支持“Hey Celia”語(yǔ)音喚醒。HMS服務(wù)，華為P40搭載華為HMS服務(wù)。</p>
   <p><span></span>0 人說(shuō)好</p>
</div>

4. 小結(jié)

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

圖片描述