HTML <img> 標簽 · W3School HTML 參考手冊

# HTML <img> 標簽 ## 實例在下面的例子中，我們在頁面中插入一幅 W3School 的工程師在上海鮮花港拍攝的郁金香照片： ``` <img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" /> ``` 以上代碼的效果： ![上海鮮花港 - 郁金香](https://box.kancloud.cn/2015-12-18_56736d6802aa4.jpg) （您可以在頁面底部找到更多實例） ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 <img> 標簽。 ## 定義和用法 img 元素向網頁中嵌入一幅圖像。請注意，從技術上講，<img> 標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。 <img> 標簽有兩個必需的屬性：[src 屬性](/tags/att_img_src.asp) 和 [alt 屬性](/tags/att_img_alt.asp)。延伸閱讀：[如何正確地使用圖像](#how-to-use-image) ## HTML 與 XHTML 之間的差異在 HTML 中，<img> 標簽沒有結束標簽。在 XHTML 中，<img> 標簽必須被正確地關閉。在 HTML 4.01 中，不推薦使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。在 XHTML 1.0 Strict DTD 中，不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。 ## 必需的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | [alt](/tags/att_img_alt.asp "HTML <img> 標簽的 alt 屬性") | _text_ | 規定圖像的替代文本。 | | [src](/tags/att_img_src.asp "HTML <img> 標簽的 src 屬性") | _URL_ | 規定顯示圖像的 URL。 | ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | [align](/tags/att_img_align.asp "HTML <img> 標簽的 align 屬性") | `top` `bottom` `middle` `left` `right` | 不推薦使用。規定如何根據周圍的文本來排列圖像。 | | [border](/tags/att_img_border.asp "HTML <img> 標簽的 border 屬性") | _pixels_ | 不推薦使用。定義圖像周圍的邊框。 | | [height](/tags/att_img_height-width.asp "HTML <img> 標簽的 height 和 width 屬性") | _pixels_ _%_ | 定義圖像的高度。 | | [hspace](/tags/att_img_hspace_vspace.asp "HTML <img> 標簽的 hspace 和 vspace 屬性") | _pixels_ | 不推薦使用。定義圖像左側和右側的空白。 | | [ismap](/tags/att_img_ismap.asp "HTML <img> 標簽的 ismap 屬性") | _URL_ | 將圖像定義為服務器端圖像映射。 | | [longdesc](/tags/att_img_longdesc.asp "HTML <img> 標簽的 longdesc 屬性") | _URL_ | 指向包含長的圖像描述文檔的 URL。 | | [usemap](/tags/att_img_usemap.asp "HTML <img> 標簽的 usemap 屬性") | _URL_ | 將圖像定義為客戶器端圖像映射。 | | [vspace](/tags/att_img_hspace_vspace.asp "HTML <img> 標簽的 hspace 和 vspace 屬性") | _pixels_ | 不推薦使用。定義圖像頂部和底部的空白。 | | [width](/tags/att_img_height-width.asp "HTML <img> 標簽的 height 和 width 屬性") | _pixels_ _%_ | 設置圖像的寬度。 | ## 全局屬性 <img> 標簽支持 [HTML 中的全局屬性](/tags/html_ref_standardattributes.asp)。 ## 事件屬性 <img> 標簽支持 [HTML 中的事件屬性](/tags/html_ref_eventattributes.asp)。 ## TIY 實例 [插入圖像](/tiy/t.asp?f=html_image) 本例演示如何在網頁中顯示圖像。 ``` <!DOCTYPE HTML> <html> <body> 一幅圖像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> 一幅動畫圖像： <img src="/i/eg_cute.gif" width="50" height="50" /> 請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。 </body> </html> ``` [從不同的位置插入圖片](/tiy/t.asp?f=html_image2) 本例演示如何將其他文件夾或服務器的圖片顯示到網頁中。 ``` <html> <body> 來自另一個文件夾的圖像： <img src="/i/ct_netscape.jpg" /> 來自 W3School.com.cn 的圖像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /> </body> </html> ``` [背景圖片](/tiy/t.asp?f=html_backgroundimage) 本例演示如何添加背景圖片到HTML頁面。 ``` <html> <body background="/i/eg_background.jpg"> <h3>圖像背景</h3> gif 和 jpg 文件均可用作 HTML 背景。 如果圖像小于頁面，圖像會進行重復。 </body> </html> ``` [排列圖片](/tiy/t.asp?f=html_image_align) 本例演示如何在文字中排列圖像。 ``` <html> <body> <h2>未設置對齊方式的圖像：</h2> 圖像 <img src ="/i/eg_cute.gif"> 在文本中 <h2>已設置對齊方式的圖像：</h2> 圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中 圖像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中 圖像 <img src ="/i/eg_cute.gif" align="top"> 在文本中 請注意，bottom 對齊方式是默認的對齊方式。 </body> </html> ``` [浮動圖像](/tiy/t.asp?f=html_image_float) 本例演示如何使圖片浮動至段落的左邊或右邊。 ``` <html> <body> <img src ="/i/eg_cute.gif" align ="left"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。 <img src ="/i/eg_cute.gif" align ="right"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "right"。圖像將浮動到文本的右側。 </body> </html> ``` [調整圖像尺寸](/tiy/t.asp?f=html_image_size) 本例演示如何將圖片調整到不同的尺寸。 ``` <html> <body> <img src="/i/eg_mouse.jpg" width="50" height="50"> <img src="/i/eg_mouse.jpg" width="100" height="100"> <img src="/i/eg_mouse.jpg" width="200" height="200"> 通過改變 img 標簽的 "height" 和 "width" 屬性的值，您可以放大或縮小圖像。 </body> </html> ``` [為圖片顯示替換文本](/tiy/t.asp?f=html_image_alt) 本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。為頁面上的圖像都加上替換文本屬性是個好習慣。 ``` <html> <body> 僅支持文本的瀏覽器無法顯示圖像，僅僅能夠顯示在圖像的 "alt" 屬性中指定的文本。在這里，"alt" 的文本是“向左轉”。 請注意，如果您把鼠標指針移動到圖像上，大多數瀏覽器會顯示 "alt" 文本。 <img src="/i/eg_goleft.gif" alt="向左轉" /> 如果無法顯示圖像，將顯示 "alt" 屬性中的文本： <img src="/i/eg_goleft123.gif" alt="向左轉" /> </body> </html> ``` [制作圖像鏈接](/tiy/t.asp?f=html_image_link) 本例演示如何將圖像作為一個鏈接使用。 ``` <html> <body> 您也可以把圖像作為鏈接來使用： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </body> </html> ``` [創建圖像地圖](/tiy/t.asp?f=html_areamap) 本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。 ``` <html> <body> 請點擊圖像上的星球，把它們放大。 <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> 注釋：img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據瀏覽器），所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。 </body> </html> ``` ## 延伸閱讀 - 如何正確地使用圖像 HTML 和 XHTML 最引人注目的特征之一，就是能夠在文檔的文本中包括圖像，既可以把圖像作為文檔的內在對象（內聯圖像），也可以將其作為一個可通過超鏈接下載的單獨文檔，或者作為文檔的背景。合理地在文檔內容中加入圖像（靜態的或者具有動畫效果的圖標、照片、說明、繪畫，等等）時，會使文檔變得更加生動活潑，更加引人入勝，而且看上去更加專業，更具信息性并易于瀏覽。還可以專門使一個圖像成為超鏈接的可視引導圖。然而，如果過度使用圖像，文檔就會變得支離破碎，混亂不堪，而且無法閱讀，用戶在下載和查看該頁面時，更會增加很多不必要的等待時間。請閱讀下面的文章，學習 Web 上的兩種主要圖像格式：GIF 和 JPEG，以及如何正確地使用圖像： * [GIF 圖像](/media/media_gif.asp "多媒體教程 - GIF 圖像") * [JPEG 圖像](/media/media_jpeg.asp "多媒體教程 - JPEG 圖像") * [在 Web 上使用圖像](/media/media_browserimages.asp "多媒體教程 - 在 Web 上使用圖像") ## 參閱 * [教程：HTML 圖像](/html/html_images.asp "HTML 圖像") * [參考手冊：HTML 5 <img> 標簽](/tags/tag_img.asp "HTML 5 <img> 標簽") ## 相關頁面 HTML DOM 參考手冊：[Image 對象](/jsref/dom_obj_image.asp "HTML DOM Image 對象")