首頁技術文章正文

web前端入門之圖片標簽的使用【卡其漫畫5】

更新時間:2020-07-08 來源:黑馬程序員 瀏覽量:

前言:

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

下面我們重點講解圖片標簽的使用。在卡其漫畫的頁面也是非常的圖片的的。

1594203177072_web前端01.jpg


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

那我們要怎么做才能將圖片放到頁面上顯示呢? 圖片標簽這個就非常重要了。

語法:
<img src="圖片的地址">


如果我們要在頁面放一張圖片就需要通過img標簽來處理。在img標簽中有幾個屬性

src: 將要顯示的圖片的地址放在這個屬性中
alt: 當圖片地址錯誤或者圖片丟失的時候,文字提示用戶

下面看案例:

<!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

如果圖片的地址不對或者圖片丟失了,我們需要在alt中寫文字提示。如下:

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


此時img標簽中的src屬性中的圖片的地址下是沒有這張圖片的。

在瀏覽器顯示效果如下:


1594203221056_web前端03.jpg

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

猜你喜歡:
前端與移動開發(fā)課程

分享到:
在線咨詢 我要報名
和我們在線交談!