HTML5之图片标签
圖片標(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 配电网可靠性评估程序 matlab代码
- 下一篇: 2017年html5行业报告,云适配发布