HTML <img> 標簽
定義和用法
img 元素向網(wǎng)頁中嵌入一幅圖像。
請注意，從技術(shù)上講，<img> 標簽并不會在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像。<img> 標簽創(chuàng)建的是被引用圖像的占位空間。
<img> 標簽有兩個必需的屬性：src 屬性 和 alt 屬性。
實例
在下面的例子中，我們在頁面中插入一幅 365jz 的工程師在上海鮮花港拍攝的郁金香照片：
<img src="/uploads/allimg/201101/20110108161532524.jpg" alt="上海鮮花港 - 郁金香" />
以上代碼的效果：
（您可以在頁面底部找到更多實例）
HTML 與 XHTML 之間的差異
在 HTML 中，<img> 標簽沒有結(jié)束標簽。
在 XHTML 中，<img> 標簽必須被正確地關(guān)閉。
在 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 |
|---|---|---|---|
| alt | text | 規(guī)定圖像的替代文本。 | STF |
| src | URL | 規(guī)定顯示圖像的 URL。 | STF |
可選的屬性
DTD 指示此屬性允許在哪種 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| align |
|
不推薦使用。規(guī)定如何根據(jù)周圍的文本來排列圖像。 | TF |
| border | pixels | 不推薦使用。定義圖像周圍的邊框。 | TF |
| height |
|
定義圖像的高度。 | STF |
| hspace | pixels | 不推薦使用。定義圖像左側(cè)和右側(cè)的空白。 | TF |
| ismap | URL | 將圖像定義為服務(wù)器端圖像映射。 | STF |
| longdesc | URL | 指向包含長的圖像描述文檔的 URL。 | STF |
| usemap | URL | 將圖像定義為客戶器端圖像映射。 | STF |
| vspace | pixels | 不推薦使用。定義圖像頂部和底部的空白。 | TF |
| width |
|
設(shè)置圖像的寬度。 | STF |
事件屬性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
如需完整的描述，請訪問事件屬性。
TIY 實例
- 插入圖像
- 本例演示如何在網(wǎng)頁中顯示圖像。
- 從不同的位置插入圖片
- 本例演示如何將其他文件夾或服務(wù)器的圖片顯示到網(wǎng)頁中。
- 背景圖片
- 本例演示如何添加背景圖片到HTML頁面。
- 排列圖片
- 本例演示如何在文字中排列圖像。
- 浮動圖像
- 本例演示如何使圖片浮動至段落的左邊或右邊。
- 調(diào)整圖像尺寸
- 本例演示如何將圖片調(diào)整到不同的尺寸。
- 為圖片顯示替換文本
- 本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。為頁面上的圖像都加上替換文本屬性是個好習慣。
- 制作圖像鏈接
- 本例演示如何將圖像作為一個鏈接使用。
- 創(chuàng)建圖像地圖
- 本例顯示如何創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。
延伸閱讀 - 如何正確地使用圖像
HTML 和 XHTML 最引人注目的特征之一，就是能夠在文檔的文本中包括圖像，既可以把圖像作為文檔的內(nèi)在對象（內(nèi)聯(lián)圖像），也可以將其作為一個可通過超鏈接下載的單獨文檔，或者作為文檔的背景。
合理地在文檔內(nèi)容中加入圖像（靜態(tài)的或者具有動畫效果的圖標、照片、說明、繪畫，等等）時，會使文檔變得更加生動活潑，更加引人入勝，而且看上去更加專業(yè)，更具信息性并易于瀏覽。還可以專門使一個圖像成為超鏈接的可視引導圖。
然而，如果過度使用圖像，文檔就會變得支離破碎，混亂不堪，而且無法閱讀，用戶在下載和查看該頁面時，更會增加很多不必要的等待時間。
如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答??！ 點擊進入論壇
您可能感興趣的文章:
- 上一篇：HTML <iframe> 標簽
- 下一篇：HTML <input> 標簽
