定義和用法

img 元素向網頁中嵌入一幅圖像。

請注意，從技術上講，<img> 標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。

<img> 標簽有兩個必需的屬性：src 屬性 和 alt 屬性。

延伸閱讀：如何正確地使用圖像

實例

在下面的例子中，我們在頁面中插入一幅 W3School 的工程師在上海鮮花港拍攝的郁金香照片：

<img src=/uploadfile/2012/0412/20120412113518385.jpg"alt="上海鮮花港 - 郁金香" />

以上代碼的效果：

（您可以在頁面底部找到更多實例）

HTML 與 XHTML 之間的差異

在 HTML 中，<img> 標簽沒有結束標簽。

在 XHTML 中，<img> 標簽必須被正確地關閉。

在 HTML 4.01 中，不推薦使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。

在 XHTML 1.0 Strict DTD 中，不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。

瀏覽器支持

所有瀏覽器都支持 <img> 標簽。

必需的屬性

DTD 指示此屬性允許在哪種 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

可選的屬性

DTD 指示此屬性允許在哪種 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

標準屬性

id, class, title, style, lang, xml:lang

如需完整的描述，請訪問標準屬性。

事件屬性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 

如需完整的描述，請訪問事件屬性。

TIY 實例

插入圖像

本例演示如何在網頁中顯示圖像。

從不同的位置插入圖片

本例演示如何將其他文件夾或服務器的圖片顯示到網頁中。

背景圖片

本例演示如何添加背景圖片到HTML頁面。

排列圖片

本例演示如何在文字中排列圖像。

浮動圖像

本例演示如何使圖片浮動至段落的左邊或右邊。

調整圖像尺寸

本例演示如何將圖片調整到不同的尺寸。

為圖片顯示替換文本

本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。為頁面上的圖像都加上替換文本屬性是個好習慣。

制作圖像鏈接

本例演示如何將圖像作為一個鏈接使用。

創建圖像地圖

本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。

延伸閱讀 - 如何正確地使用圖像

HTML 和 XHTML 最引人注目的特征之一，就是能夠在文檔的文本中包括圖像，既可以把圖像作為文檔的內在對象（內聯圖像），也可以將其作為一個可通過超鏈接下載的單獨文檔，或者作為文檔的背景。

合理地在文檔內容中加入圖像（靜態的或者具有動畫效果的圖標、照片、說明、繪畫，等等）時，會使文檔變得更加生動活潑，更加引人入勝，而且看上去更加專業，更具信息性并易于瀏覽。還可以專門使一個圖像成為超鏈接的可視引導圖。

然而，如果過度使用圖像，文檔就會變得支離破碎，混亂不堪，而且無法閱讀，用戶在下載和查看該頁面時，更會增加很多不必要的等待時間。

請閱讀下面的文章，學習 Web 上的兩種主要圖像格式：GIF 和 JPEG，以及如何正確地使用圖像：

• GIF 圖像
• JPEG 圖像
• 在 Web 上使用圖像

參閱

• 教程：HTML 圖像
• 參考手冊：HTML 5 <img> 標簽