圖片標(biāo)簽：用于向當(dāng)前頁面中引入一個外部圖片

????????使用img標(biāo)簽來引入外部圖片，img標(biāo)簽是一個自結(jié)束標(biāo)簽

????????img屬于替換元素（介于塊元素和行內(nèi)元素之間,具有兩種元素的特點）

（1）屬性：

? ? ? ? -src?指定的是外部圖片的路徑（路徑規(guī)則與超鏈接一致）

? ? ? ? ?-alt?對圖片的描述，這個描述默認(rèn)情況下不顯示，有些瀏覽器會在圖片無法加載時顯示

?????????????搜索引擎會根據(jù)alt中的內(nèi)容來識別圖片，若不寫alt屬性則圖片不會被搜索引擎所收錄

? ? ? ? -width?圖片的寬度?（單位是像素）

? ? ? ? -height?圖片的高度

?????????????寬度和高度如果只修改了一個，則另一個會等比例縮放。

【注】一般情況下，在pc端，不建議修改圖片的大小。

???????????但在移動端，經(jīng)常需要對圖片進行縮放（主要是大圖縮小）。

（2）圖片的格式：

? ? ? ? -jpeg（jpg）：支持的顏色比較豐富，不支持透明效果，不支持動圖

??????????????????一般用來顯示照片

? ? ? ? -gif：支持的顏色比較少，支持簡單透明，支持動圖

?????????????????適合顏色單一的圖片，動圖

? ? ? ? -png：支持的顏色豐富，支持復(fù)雜透明，不支持動圖

?????????????????顏色豐富，復(fù)雜透明的圖（專為網(wǎng)頁而生）

? ? ? ? -webp：谷歌新推出的，專門用來表示網(wǎng)頁中的圖片的一種格式

?????????????????具備了其他圖片格式的所有優(yōu)點，而且文件還特別小

?????????????????缺點：兼容性不好

? ? ? ? -base64：將圖片使用base64編碼，這樣可以將圖片轉(zhuǎn)換為字符

????????????????通過字符的形式來引入圖片

?????????????????一般是需要和網(wǎng)頁一起加載的圖片才會使用base64

? ? ? ? 【注】效果一樣用占內(nèi)存小的，效果不一樣用效果好的

總結(jié)

以上是生活随笔為你收集整理的HTML5之图片标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。