教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

HTML中img圖片標(biāo)簽的用法？【案例講解】

更新時(shí)間:2020年07月08日18時(shí)17分 來(lái)源:傳智播客 瀏覽次數(shù):

前言：

在網(wǎng)頁(yè)我們除了能看到大量的文字之外，我們還能開到非常多的圖片，而且圖片是網(wǎng)頁(yè)組成的非常重要的一部分，我們必須要知道如何在網(wǎng)頁(yè)顯示圖片。

下面我們重點(diǎn)講解圖片標(biāo)簽的使用。在卡其漫畫的頁(yè)面也是非常的圖片的的。

1594203177072_web前端01.jpg


從上圖中我們可以看到頁(yè)面上有非常多的圖片。

那我們要怎么做才能將圖片放到頁(yè)面上顯示呢？ 圖片標(biāo)簽這個(gè)就非常重要了。

語(yǔ)法：
<img src="圖片的地址">

如果我們要在頁(yè)面放一張圖片就需要通過(guò)img標(biāo)簽來(lái)處理。在img標(biāo)簽中有幾個(gè)屬性

src： 將要顯示的圖片的地址放在這個(gè)屬性中
alt： 當(dāng)圖片地址錯(cuò)誤或者圖片丟失的時(shí)候，文字提示用戶

下面看案例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
  <img src="桌面文件/案例/images/01.jpg" alt="">
</body>
</html>

在瀏覽器顯示：

1594203210215_web前端02.jpg

如果圖片的地址不對(duì)或者圖片丟失了，我們需要在alt中寫文字提示。如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
  <img src="桌面文件/案例/images/011.jpg" alt="這是一個(gè)大美女哦">
</body>
</html>

此時(shí)img標(biāo)簽中的src屬性中的圖片的地址下是沒有這張圖片的。

在瀏覽器顯示效果如下：

1594203221056_web前端03.jpg

從上面我們就知道了如何在頁(yè)面顯示一張圖片了。我們要使用img標(biāo)簽。而且大家注意。img標(biāo)簽中的src屬性和alt屬性必須要寫哦。

猜你喜歡：
前端與移動(dòng)開發(fā)課程

0 分享到：
和我們?cè)诰€交談！