任何一張網頁都少不了圖片，一個圖文並茂的網頁，會使得用戶體驗性更好。網站要獲得更多的流量，也需要從“圖文並茂”這個角度挖掘一下。
在HTML中，圖像使用<img/>標簽。對於“圖像標簽”這一章，我們僅僅掌握一個<img/>標簽和它的3個屬性src、alt和title就可以了。
src和alt這兩個屬性是img標簽必不可少的屬性。title屬性的值往往都是跟alt屬性的值相同。
src，即“source（源文件）”。img標簽的src屬性用於指定圖像源文件所在的路徑，它是圖像必不可少的屬性。
語法：
<img src="圖像源文件的路徑"/>
說明：
img，即“image（圖像）”。理解標簽語義更有利於你記憶，而記憶HTML標簽的語義是HTML的基礎。更多標簽語義請查看HTML標簽的含義。
img標簽是一個自閉合標簽，沒有結束標簽。src屬性用於設置圖像文件所在的路徑，這一路徑可以是相對路徑，也可以是絕對路徑。（在下一節我們會詳細講解相對路徑和絕對路徑）
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖像標簽img</title>
</head>
<body>
<img src="../App_images/lesson/hj/7-1-1.jpg">
</body>
</html>
在浏覽器預覽效果如下：
我們現在可能會對圖片的路徑src比較疑惑，不知道怎麼寫，沒關系，請閱讀下一節“相對路徑和絕對路徑”。
alt屬性用於設置圖片的描述信息，這些信息是給搜索引擎看的。在搜索引擎優化SEO中，alt屬性也是一個非常重要的屬性。在SEO入門教程中，大家將會學習到。這裡大家無需深入了解alt屬性。
title屬性用於設置鼠標移到圖片上的提示文字，這些提示文字是給用戶看的。
語法：
<img src="圖片地址" alt="圖片描述(給搜索引擎看)" title="圖片描述(給用戶看)">
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖像標簽img</title>
</head>
<body>
<img src="../App_images/lesson/hj/7-1-1.jpg" alt="海賊王路飛" title="海賊王路飛"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
title屬性的值往往都是跟alt屬性的值相同，一個是給讀者用戶看，一個是給搜索引擎看。
總結在HTML中，圖像標簽為<img/>。<img/>是一個自閉合標簽。<img/>標簽只需要掌握3個屬性就可以了：src、alt、title。
語法：
<img src="圖片地址" alt="圖片描述（給搜索引擎看）" title="圖片描述（給用戶看）">
src和alt這兩個屬性是img標簽必不可少的屬性。title屬性的值往往都是跟alt屬性的值相同。