圖片標簽

　　圖片標簽 <img> 用于向當前頁面中引入一個外部圖片

　　使用 <img> 標簽來引入外部圖片，img標簽是一個自結束標簽

　　img 屬于替換元素（基于行內元素和塊元素之間）行內塊元素inline-block 圖片標簽。

屬性：

　　【src】：屬性指定的是外部圖片的路徑（路徑規則和超鏈接是一樣的）

　　【alt】: 圖片的描述，這個描述默認情況下不會顯示，有些瀏覽器會在圖片無法加載出來的時候顯示在頁面上。搜索引擎會根據alt中的內容來識別圖片（搜索松鼠會出現松鼠）

　　【width】：圖片的寬度

　　【height】：圖片的高度

如果寬度和高度只改變一個，圖片會等比例縮小或是放大

建議：在PC端不建議修改圖片的大小，大圖縮小浪費內存，小圖放大圖片失真，最好是切圖。但是在移動端，經常需要對圖片進行縮放（大圖縮小）

 img{
       width:200px;
       height:auto;
        }

圖片引入

可以用相對路徑引入一個外部圖片

<img src='./img/1.gif' alt=’松鼠‘>

也可以使用絕對路徑引入外部圖片

<img src='https://www.baidu.com/s?wd=%E9%9B%AA%E5%9C%B0%E6%9D%BE%E9%BC%A0&tn=monline_3_dg&usm=5&ie=utf-8&rsv_cq=%E6%9D%BE%E9%BC%A0&rsv_dl=0_left_pet_multi_6829'>

圖片的格式

jpeg（jpg）：
支持顏色比較豐富，不支持透明效果，不支持動畫
一般用來顯示照片

gif：
支持的顏色比較少，支持簡單透明，支持動畫
顏色單一圖片，動圖

png：
支持顏色豐富，支持透明復雜，不支持動畫
顏色豐富，復雜透明圖片（專為網頁而生）

webp：
這種圖片格式是谷歌新推出的專門用來表示網頁中的圖片的一種格式
它具備其他圖片格式的所有優點，而且圖片還特別的小，顯示效果好，透明度也好，還支持動圖
缺點：兼容性不好，尤其是在IE瀏覽器中

選用規則： 效果一樣用文件小的，效果不一樣用效果好的
Base64：
base64編碼，還可以將圖片使用base64進行編碼，將圖片轉換為字符，通過字符的形式來引入圖片
一般都是一些需要和網頁一起加載的圖片才會使用base64

base64在線編碼解碼工具 https://base64.us/

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。