HTML <img> 標籤
實例
在下面的例子中，我們在頁面中插入一幅 W3School 的工程師在上海鮮花港拍攝的鬱金香照片：
<img src="/images/eg_tulip.jpg" alt="上海鮮花港 - 鬱金香" />
以上程式碼的效果：
（您可以在頁面底部找到更多實例）
瀏覽器支援
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有瀏覽器都支援 <img> 標籤。
定義和用法
img 元素向網頁中嵌入一幅影像。
請注意，從技術上講，<img> 標籤並不會在網頁中插入影像，而是從網頁上鍊接影像。<img> 標籤建立的是被引用影像的佔位空間。
<img> 標籤有兩個必需的屬性：src 屬性 和 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" 屬性。
可選的屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align |
|
不推薦使用。規定如何根據周圍的文字來排列影像。 |
| border | pixels | 不推薦使用。定義影像周圍的邊框。 |
| height |
|
定義影像的高度。 |
| hspace | pixels | 不推薦使用。定義影像左側和右側的空白。 |
| ismap | URL | 將影像定義為伺服器端影像對映。 |
| longdesc | URL | 指向包含長的影像描述文件的 URL。 |
| usemap | URL | 將影像定義為客戶器端影像對映。 |
| vspace | pixels | 不推薦使用。定義影像頂部和底部的空白。 |
| width |
|
設定影像的寬度。 |
全域性屬性
<img> 標籤支援 HTML 中的全域性屬性。
事件屬性
<img> 標籤支援 HTML 中的事件屬性。
TIY 實例
- 插入影像
- 本例演示如何在網頁中顯示影像。
- 從不同的位置插入圖片
- 本例演示如何將其他資料夾或伺服器的圖片顯示到網頁中。
- 背景圖片
- 本例演示如何新增背景圖片到HTML頁面。
- 排列圖片
- 本例演示如何在文字中排列影像。
- 浮動影像
- 本例演示如何使圖片浮動至段落的左邊或右邊。
- 調整影像尺寸
- 本例演示如何將圖片調整到不同的尺寸。
- 為圖片顯示替換文字
- 本例演示如何為圖片顯示替換文字。在瀏覽器無法載入影像時，替換文字屬性告訴讀者她們失去的資訊。為頁面上的影像都加上替換文字屬性是個好習慣。
- 製作影像鏈接
- 本例演示如何將影像作為一個鏈接使用。
- 建立影像地圖
- 本例顯示如何建立帶有可供點選區域的影像地圖。其中的每個區域都是一個超級鏈接。
延伸閱讀 - 如何正確地使用影像
HTML 和 XHTML 最引人注目的特徵之一，就是能夠在文件的文字中包括影像，既可以把影像作為文件的內在對像（內聯影像），也可以將其作為一個可通過超鏈接下載的單獨文件，或者作為文件的背景。
合理地在文件內容中加入影像（靜態的或者具有動畫效果的圖示、照片、說明、繪畫，等等）時，會使文件變得更加生動活潑，更加引人入勝，而且看上去更加專業，更具資訊性並易於瀏覽。還可以專門使一個影像成為超鏈接的可視引導圖。
然而，如果過度使用影像，文件就會變得支離破碎，混亂不堪，而且無法閱讀，會員在下載和檢視該頁面時，更會增加很多不必要的等待時間。
請閱讀下面的文章，學習 Web 上的兩種主要影像格式：GIF 和 JPEG，以及如何正確地使用影像：
相關頁面
HTML DOM 參考手冊：Image 對像