Latest web development tutorials

HTML <img> 標籤

實例

如何插入圖像:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

嘗試一下»
(更多實例見頁面底部)

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器都支持<img> 標籤。


標籤定義及使用說明

<img> 標籤定義HTML 頁面中的圖像。

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

註釋:從技術上講,圖像並不會插入HTML頁面中,而是鏈接到HTML頁面上。<img> 標籤的作用是為被引用的圖像創建佔位符。

提示:通過在<a>標籤中嵌套<img>標籤,給圖像添加到另一個文檔的鏈接。


HTML 4.01 與HTML5之間的差異

HTML5 中不支持以下屬性:align、border、hspace、longdesc、vspace。

在HTML 4.01中,以下屬性:align、border、hspace、vspace 已廢棄


HTML 與XHTML 之間的差異

在HTML 中,<img> 標籤沒有結束標籤。

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


屬性

New :HTML5中的新屬性。

属性 描述
align top
bottom
middle
left
right
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt text 规定图像的替代文本。
border pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossorigin New anonymous
use-credentials
设置图像的跨域属性
height pixels 规定图像的高度。
hspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap ismap 将图像规定为服务器端图像映射。
longdesc URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src URL 规定显示图像的 URL。
usemap #mapname 将图像定义为客户器端图像映射。
vspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width pixels 规定图像的宽度。


全局屬性

<img>標籤支持HTML的全局屬性


事件屬性

<img>標籤支持HTML的事件屬性


Examples

嘗試一下- 實例

從不同的位置插入圖片
本例演示如何將其他文件夾或服務器的圖片顯示到網頁中。

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

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


相關文章

HTML教程: HTML圖像

HTML DOM參考手冊: Image對象