# HTML 圖像 **通過使用 HTML，可以在文檔中顯示圖像。** ## 實例 [插入圖像](/tiy/t.asp?f=html_image) ``` &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;body&gt; &lt;p&gt; 一幅圖像： &lt;img src="/i/eg_mouse.jpg" width="128" height="128" /&gt; &lt;/p&gt; &lt;p&gt; 一幅動畫圖像： &lt;img src="/i/eg_cute.gif" width="50" height="50" /&gt; &lt;/p&gt; &lt;p&gt;請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` [從不同的位置插入圖片](/tiy/t.asp?f=html_image2) ``` &lt;html&gt; &lt;body&gt; &lt;p&gt; 來自另一個文件夾的圖像： &lt;img src="/i/ct_netscape.jpg" /&gt; &lt;/p&gt; &lt;p&gt; 來自 W3School.com.cn 的圖像： &lt;img src="img/w3school_logo_white.gif" /&gt; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` （[可以在本頁底端找到更多實例](#more_examples)。） ## 圖像標簽（&lt;img&gt;）和源屬性（Src） 在 HTML 中，圖像由 &lt;img&gt; 標簽定義。 &lt;img&gt; 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。 要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。 定義圖像的語法是： ``` <img src="url" /> ``` URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。 瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。 ## 替換文本屬性（Alt） alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。 ``` <img src="boat.gif" alt="Big Boat"> ``` 在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。 ## 基本的注意事項 - 有用的提示： 假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。 ## &lt;a id="more_examples"&gt;更多實例&lt;/a&gt; [背景圖片](/tiy/t.asp?f=html_backgroundimage) ``` &lt;html&gt; &lt;body background="/i/eg_background.jpg"&gt; &lt;h3&gt;圖像背景&lt;/h3&gt; &lt;p&gt;gif 和 jpg 文件均可用作 HTML 背景。&lt;/p&gt; &lt;p&gt;如果圖像小于頁面，圖像會進行重復。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` [排列圖片](/tiy/t.asp?f=html_image_align) ``` &lt;html&gt; &lt;body&gt; &lt;h2&gt;未設置對齊方式的圖像：&lt;/h2&gt; &lt;p&gt;圖像 &lt;img src ="/i/eg_cute.gif"&gt; 在文本中&lt;/p&gt; &lt;h2&gt;已設置對齊方式的圖像：&lt;/h2&gt; &lt;p&gt;圖像 &lt;img src="/i/eg_cute.gif" align="bottom"&gt; 在文本中&lt;/p&gt; &lt;p&gt;圖像 &lt;img src ="/i/eg_cute.gif" align="middle"&gt; 在文本中&lt;/p&gt; &lt;p&gt;圖像 &lt;img src ="/i/eg_cute.gif" align="top"&gt; 在文本中&lt;/p&gt; &lt;p&gt;請注意，bottom 對齊方式是默認的對齊方式。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` [浮動圖像](/tiy/t.asp?f=html_image_float) ``` &lt;html&gt; &lt;body&gt; &lt;p&gt; &lt;img src ="/i/eg_cute.gif" align ="left"&gt; 帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。 &lt;/p&gt; &lt;p&gt; &lt;img src ="/i/eg_cute.gif" align ="right"&gt; 帶有圖像的一個段落。圖像的 align 屬性設置為 "right"。圖像將浮動到文本的右側。 &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` [調整圖像尺寸](/tiy/t.asp?f=html_image_size) ``` &lt;html&gt; &lt;body&gt; &lt;img src="/i/eg_mouse.jpg" width="50" height="50"&gt; &lt;br /&gt; &lt;img src="/i/eg_mouse.jpg" width="100" height="100"&gt; &lt;br /&gt; &lt;img src="/i/eg_mouse.jpg" width="200" height="200"&gt; &lt;p&gt;通過改變 img 標簽的 "height" 和 "width" 屬性的值，您可以放大或縮小圖像。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` [為圖片顯示替換文本](/tiy/t.asp?f=html_image_alt) ``` &lt;html&gt; &lt;body&gt; &lt;p&gt;僅支持文本的瀏覽器無法顯示圖像，僅僅能夠顯示在圖像的 "alt" 屬性中指定的文本。在這里，"alt" 的文本是“向左轉”。&lt;/p&gt; &lt;p&gt;請注意，如果您把鼠標指針移動到圖像上，大多數瀏覽器會顯示 "alt" 文本。&lt;/p&gt; &lt;img src="/i/eg_goleft.gif" alt="向左轉" /&gt; &lt;p&gt;如果無法顯示圖像，將顯示 "alt" 屬性中的文本：&lt;/p&gt; &lt;img src="/i/eg_goleft123.gif" alt="向左轉" /&gt; &lt;/body&gt; &lt;/html&gt; ``` [制作圖像鏈接](/tiy/t.asp?f=html_image_link) ``` &lt;html&gt; &lt;body&gt; &lt;p&gt; 您也可以把圖像作為鏈接來使用： &lt;a href="/example/html/lastpage.html"&gt; &lt;img border="0" src="/i/eg_buttonnext.gif" /&gt; &lt;/a&gt; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` [創建圖像映射](/tiy/t.asp?f=html_areamap) ``` &lt;html&gt; &lt;body&gt; &lt;p&gt;請點擊圖像上的星球，把它們放大。&lt;/p&gt; &lt;img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /&gt; &lt;map name="planetmap" id="planetmap"&gt; &lt;area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /&gt; &lt;area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /&gt; &lt;area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /&gt; &lt;/map&gt; &lt;p&gt;&lt;b&gt;注釋：&lt;/b&gt;img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據瀏覽器），所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ``` [把圖像轉換為圖像映射](/tiy/t.asp?f=html_ismap) ``` &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;p&gt;請把鼠標移動到圖像上，看一下狀態欄的坐標如何變化。&lt;/p&gt; &lt;a href="/example/html/html_ismap.html"&gt; &lt;img src="/i/eg_planets.jpg" ismap /&gt; &lt;/a&gt; &lt;/body&gt; &lt;/html&gt; ``` ## 圖像標簽 | 標簽 | 描述 | | --- | --- | | [`<img>`](/tags/tag_img.asp) | 定義圖像。 | | [`<map>`](/tags/tag_map.asp) | 定義圖像地圖。 | | [`<area>`](/tags/tag_area.asp) | 定義圖像地圖中的可點擊區域。 | </table>