您現(xiàn)在的位置： 365建站網(wǎng) > 建站教程 > html5教程 > HTML <img> 標(biāo)簽

HTML <img> 標(biāo)簽

此節(jié)有 357 人學(xué)習(xí)過參與評(píng)論

實(shí)例

在下面的例子中，我們?cè)陧撁嬷胁迦胍环?365jz 的工程師在上海鮮花港拍攝的郁金香照片：

<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 郁金香" />

以上代碼的效果：

親自試一試

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

瀏覽器支持

IE	Firefox	Chrome	Safari	Opera

所有瀏覽器都支持 <img> 標(biāo)簽。

定義和用法

img 元素向網(wǎng)頁中嵌入一幅圖像。

請(qǐng)注意，從技術(shù)上講，<img> 標(biāo)簽并不會(huì)在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像。<img> 標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。

<img> 標(biāo)簽有兩個(gè)必需的屬性：src 屬性和 alt 屬性。

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

HTML 與 XHTML 之間的差異

在 HTML 中，<img> 標(biāo)簽沒有結(jié)束標(biāo)簽。

在 XHTML 中，<img> 標(biāo)簽必須被正確地關(guān)閉。

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

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

必需的屬性

屬性	值	描述
alt	text	規(guī)定圖像的替代文本。
src	URL	規(guī)定顯示圖像的 URL。

可選的屬性

屬性	值	描述
align	top bottom middle left right	不推薦使用。規(guī)定如何根據(jù)周圍的文本來排列圖像。
border	pixels	不推薦使用。定義圖像周圍的邊框。
height	pixels %	定義圖像的高度。
hspace	pixels	不推薦使用。定義圖像左側(cè)和右側(cè)的空白。
ismap	URL	將圖像定義為服務(wù)器端圖像映射。
longdesc	URL	指向包含長(zhǎng)的圖像描述文檔的 URL。
usemap	URL	將圖像定義為客戶器端圖像映射。
vspace	pixels	不推薦使用。定義圖像頂部和底部的空白。
width	pixels %	設(shè)置圖像的寬度。

全局屬性

<img> 標(biāo)簽支持 HTML 中的全局屬性。

事件屬性

<img> 標(biāo)簽支持 HTML 中的事件屬性。

TIY 實(shí)例

插入圖像: 本例演示如何在網(wǎng)頁中顯示圖像。
從不同的位置插入圖片: 本例演示如何將其他文件夾或服務(wù)器的圖片顯示到網(wǎng)頁中。
背景圖片: 本例演示如何添加背景圖片到HTML頁面。
排列圖片: 本例演示如何在文字中排列圖像。
浮動(dòng)圖像: 本例演示如何使圖片浮動(dòng)至段落的左邊或右邊。
調(diào)整圖像尺寸: 本例演示如何將圖片調(diào)整到不同的尺寸。
為圖片顯示替換文本: 本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣。
制作圖像鏈接: 本例演示如何將圖像作為一個(gè)鏈接使用。
創(chuàng)建圖像地圖: 本例顯示如何創(chuàng)建帶有可供點(diǎn)擊區(qū)域的圖像地圖。其中的每個(gè)區(qū)域都是一個(gè)超級(jí)鏈接。

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

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

合理地在文檔內(nèi)容中加入圖像（靜態(tài)的或者具有動(dòng)畫效果的圖標(biāo)、照片、說明、繪畫，等等）時(shí)，會(huì)使文檔變得更加生動(dòng)活潑，更加引人入勝，而且看上去更加專業(yè)，更具信息性并易于瀏覽。還可以專門使一個(gè)圖像成為超鏈接的可視引導(dǎo)圖。

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

請(qǐng)閱讀下面的文章，學(xué)習(xí) Web 上的兩種主要圖像格式：GIF 和 JPEG，以及如何正確地使用圖像：

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

HTML <img> 標(biāo)簽

實(shí)例

瀏覽器支持

定義和用法

HTML 與 XHTML 之間的差異

必需的屬性

可選的屬性

全局屬性

事件屬性

TIY 實(shí)例

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

參閱

相關(guān)頁面

您可能感興趣的文章:

公司信息

快速入口

其它欄目

業(yè)務(wù)咨詢