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

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

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

（1）屬性：

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

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

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

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

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

?????????????寬度和高度如果只修改了一個(gè)，則另一個(gè)會(huì)等比例縮放。

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

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

（2）圖片的格式：

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

??????????????????一般用來(lái)顯示照片

? ? ? ? -gif：支持的顏色比較少，支持簡(jiǎn)單透明，支持動(dòng)圖

?????????????????適合顏色單一的圖片，動(dòng)圖

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

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

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

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

?????????????????缺點(diǎn)：兼容性不好

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

????????????????通過(guò)字符的形式來(lái)引入圖片

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

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

總結(jié)

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

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