說到圖片，相信大家都不陌生，因為在我們的日常生活和使用上，總能看到圖片，而圖片在使用上，比文字更具表現(xiàn)力和感染力，當(dāng)我們恰當(dāng)?shù)厥褂脠D片可以讓網(wǎng)頁更加精美和直觀，尤其是網(wǎng)頁的第一觀看，非常重要。
一、src屬性
符號：img
特點：單標(biāo)簽
代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML插入圖片</title> </head> <body> <p>要展示的圖片：</p> <img src="fish.jpg"> </body> </html>
總結(jié)：在img標(biāo)簽中引入src屬性名即可完成對圖片的插入，其中src的屬性值為“文件名”或“路徑./文件名”，注：要插入的圖片必須與html項目在同一文件夾中！此部分會有重點說明。
二、其余屬性
| 屬性名 | 屬性功能 |
| alt | 替換文本，當(dāng)圖片無法成功顯示時顯示alt屬性對應(yīng)屬性值的內(nèi)容 |
| title | 當(dāng)鼠標(biāo)懸停與圖片上時，顯示title屬性對應(yīng)屬性值的內(nèi)容 |
| width | 寬度大小，若手動設(shè)置寬度則自動匹配合適的高度 |
| height | 高度大小，若手動設(shè)置高度則自動匹配合適的寬度 |
三、alt用法
說明：當(dāng)圖片因某些原因無法顯示時，顯示alt屬性對應(yīng)的屬性值。
代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML插入圖片</title> </head> <body> <p>要展示的圖片：</p> <img src="potato.jpg" width="500" alt="土豆"> </body> </html>
展示如下：
四、title用法
說明：若圖片正常顯示，則當(dāng)鼠標(biāo)懸停于圖片上時，顯示title屬性對應(yīng)屬性值的內(nèi)容
代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML插入圖片</title> </head> <body> <p>要展示的圖片：</p> <img src="fish.jpg" width="500" alt="魚" title="這是一條熟的魚"> </body> </html>
效果：若圖片可以正常顯示，將鼠標(biāo)停留在圖片上，會出現(xiàn)“這是一條熟的魚”字樣。
展示如圖：
五、屬性特點
圖片標(biāo)簽的屬性特點適用絕大多數(shù)的HTML標(biāo)簽：
1. 標(biāo)簽的屬性寫在開始標(biāo)簽內(nèi)部
2. 標(biāo)簽內(nèi)可同時存在多個屬性
3. 屬性間以空格隔開
4. 標(biāo)簽名與屬性之間必須以空格隔開
5. 屬性間沒有順序之分
六、路徑講解與跨級別插入圖片
（一）路徑介紹
1. 絕對路徑
目錄下的絕對位置，可直接到達(dá)目標(biāo)位置，通常指從盤符開始的路徑或完整的網(wǎng)址。在html圖片的插入中，一般不使用絕對路徑，較常用的是相對路徑。
2. 相對路徑
從當(dāng)前文件開始出發(fā)尋找目標(biāo)文件的過程，經(jīng)常使用。
（二）跨級別插入圖片
1. 同級
當(dāng)要插入的圖片與創(chuàng)建的html文件在同一級，則可直接插入，src的屬性值為“目標(biāo)文件名.后綴” 或 “./目標(biāo)文件名.后綴”。在使用編譯器進(jìn)行編碼時，若輸入同級文件名的首字母，編譯器往往會自動跳出其余內(nèi)容。
代碼展示：（假設(shè)圖片名為picture，jpg格式）
<img src="picture.jpg"> 或 <img src=./picture.jpg>
2. 下級
若html文件與file文件夾同級，要插入的圖片picture在file文件夾中，則要在html文件中插入picture圖片則屬于跨級別訪問圖片操作，代碼如下：
<img src="file/picture.jpg">
3. 上級
若在文件夾total中有一圖片picture和另一文件夾test，html文件在test文件夾中，則在html文件中插入picture圖片屬于訪問上一級文件夾，代碼如下：
<img src="../picture.jpg">
若需訪問上兩級文件夾中的picture圖片，則代碼為：
<img src="../../picture.jpg">
4. 綜合運用
若有file1和file2兩文件夾，file1中存放html文件，file2中存放要插入的圖片flag，格式為jpg，則在html文件中插入flag圖片的代碼如下：
<img src="../file2/flag.jpg">
（先退到上一級，再訪問下一級）
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點擊了解：
一點編程也不會寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼？手把手帶你寫100個編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程