說到圖片，相信大家都不陌生，因為在我們的日常生活和使用上，總是能看到圖片，而圖片在使用上，比文字更具表現力和感染力，當我們恰當地使用圖片可以讓網頁更加精美直觀，尤其是網頁的第一個觀看，非常重要。
一、src屬性
符號：img
特色：單標籤
代碼：
<!doctypehtml><html><head><metacharset=utf-8><title>HTML插入圖片</title></head><body><p>要展示的圖片：</p><imgsrc=fish .jpg></body></html>
總結：在img標籤中引入src屬性名即可完成圖片的插入，其中src的屬性值為“文件名”或“路徑./文件名”，註：要插入的圖片必須與html項目在同一文件夾中！此部分會有重點說明。
二、其餘屬性
三、alt用法
說明：當圖片因某些原因無法顯示時，顯示alt屬性對應的屬性值。
代碼：
<!doctypehtml><html><head><metacharset=utf-8><title>HTML插入圖片</title></head><body><p>要展示的圖片：</p><imgsrc=potato .jpgwidth=500alt=馬鈴薯></body></html>
展示如下：
四、title用法
說明：若圖片正常顯示，則當滑鼠停留在圖片上時，顯示title屬性對應屬性值的內容
代碼：
<!doctypehtml><html><head><metacharset=utf-8><title>HTML插入圖片</title></head><body><p>要展示的圖片：</p><imgsrc=fish .jpgwidth=500alt=魚title=這是一條熟的魚></body></html>
效果：若圖片可以正常顯示，將滑鼠停留在圖片上，會出現「這是一條熟的魚」字樣。
展示如圖：
五、屬性特點
圖片標籤的屬性特性適用絕大多數的HTML標籤：
1. 標籤的屬性寫在開始標籤內部
2. 標籤內可同時存在多個屬性
3. 屬性間以空格隔開
4. 標籤名與屬性之間必須以空格隔開
5. 屬性間沒有順序之分
六、路徑講解與跨層級插入圖片
（一）路徑介紹
1. 絕對路徑
目錄下的絕對位置，可直接到達目標位置，通常指從磁碟機開始的路徑或完整的網址。在html圖片的插入中，一般不使用絕對路徑，較常用的是相對路徑。
2. 相對路徑
從目前文件開始出發尋找目標文件的過程，並經常使用。
（二）跨等級插入圖片
1. 同級
當要插入的圖片與建立的html檔案在同一級，則可直接插入，src的屬性值為「目標檔案名稱.後綴」 或「./目標檔案名稱.後綴」。使用編譯器進行編碼時，若輸入同級檔名的首字母，編譯器往往會自動跳出其餘內容。
程式碼展示：（假設圖片名為picture，jpg格式）
<imgsrc=picture.jpg>或<imgsrc=./picture.jpg>
2. 下級
若html檔案與file資料夾同級，要插入的圖片picture在file資料夾中，則要在html檔案中插入picture圖片則屬於跨層級存取圖片操作，程式碼如下：
<imgsrc=file/picture.jpg>
3. 上級
若在資料夾total中有一張圖片picture和另一個資料夾test，html檔案在test資料夾中，則在html檔案中插入picture圖片屬於存取上一層資料夾，程式碼如下：
<imgsrc=../picture.jpg>
若需存取上兩級資料夾中的picture圖片，則代碼為：
<imgsrc=../../picture.jpg>
4. 綜合運用
若有file1和file2兩個資料夾，file1中存放html文件，file2存放要插入的圖片flag，格式為jpg，則在html檔案中插入flag圖片的程式碼如下：
<imgsrc=../file2/flag.jpg>
（先退到上一級，再訪問下一級）