?
This document uses PHP Chinese website manual Release
HTML 圖像
通過(guò)使用 HTML，可以在文檔中顯示圖像。
實(shí)例
插入圖像
<!DOCTYPE HTML> <html> <body> <p> 一幅圖像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> </p> <p> 一幅動(dòng)畫(huà)圖像： <img src="/i/eg_cute.gif" width="50" height="50" /> </p> <p>請(qǐng)注意，插入動(dòng)畫(huà)圖像的語(yǔ)法與插入普通圖像的語(yǔ)法沒(méi)有區(qū)別。</p> </body> </html>
從不同的位置插入圖片
<html> <body> <p> 來(lái)自另一個(gè)文件夾的圖像： <img src="/i/ct_netscape.jpg" /> </p> <p> 來(lái)自 W3School.com.cn 的圖像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /> </p> </body> </html>
（可以在本頁(yè)底端找到更多實(shí)例。）
圖像標(biāo)簽（<img>）和源屬性（Src）
在 HTML 中，圖像由 <img> 標(biāo)簽定義。
<img> 是空標(biāo)簽，意思是說(shuō)，它只包含屬性，并且沒(méi)有閉合標(biāo)簽。
要在頁(yè)面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語(yǔ)法是：
<img src="url" />
URL 指存儲(chǔ)圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。
瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會(huì)首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段。
替換文本屬性（Alt）
alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶(hù)定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的。
基本的注意事項(xiàng) - 有用的提示：
假如某個(gè) HTML 文件包含十個(gè)圖像，那么為了正確顯示這個(gè)頁(yè)面，需要加載 11 個(gè)文件。加載圖片是需要時(shí)間的，所以我們的建議是：慎用圖片。
<a id="more_examples">更多實(shí)例</a>
背景圖片
<html> <body background="/i/eg_background.jpg"> <h3>圖像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果圖像小于頁(yè)面，圖像會(huì)進(jìn)行重復(fù)。</p> </body> </html>
排列圖片
<html> <body> <h2>未設(shè)置對(duì)齊方式的圖像：</h2> <p>圖像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已設(shè)置對(duì)齊方式的圖像：</h2> <p>圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>圖像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>圖像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>請(qǐng)注意，bottom 對(duì)齊方式是默認(rèn)的對(duì)齊方式。</p> </body> </html>
浮動(dòng)圖像
<html> <body> <p> <img src ="/i/eg_cute.gif" align ="left"> 帶有圖像的一個(gè)段落。圖像的 align 屬性設(shè)置為 "left"。圖像將浮動(dòng)到文本的左側(cè)。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 帶有圖像的一個(gè)段落。圖像的 align 屬性設(shè)置為 "right"。圖像將浮動(dòng)到文本的右側(cè)。 </p> </body> </html>
調(diào)整圖像尺寸
<html> <body> <img src="/i/eg_mouse.jpg" width="50" height="50"> <br /> <img src="/i/eg_mouse.jpg" width="100" height="100"> <br /> <img src="/i/eg_mouse.jpg" width="200" height="200"> <p>通過(guò)改變 img 標(biāo)簽的 "height" 和 "width" 屬性的值，您可以放大或縮小圖像。</p> </body> </html>
為圖片顯示替換文本
<html> <body> <p>僅支持文本的瀏覽器無(wú)法顯示圖像，僅僅能夠顯示在圖像的 "alt" 屬性中指定的文本。在這里，"alt" 的文本是“向左轉(zhuǎn)”。</p> <p>請(qǐng)注意，如果您把鼠標(biāo)指針移動(dòng)到圖像上，大多數(shù)瀏覽器會(huì)顯示 "alt" 文本。</p> <img src="/i/eg_goleft.gif" alt="向左轉(zhuǎn)" /> <p>如果無(wú)法顯示圖像，將顯示 "alt" 屬性中的文本：</p> <img src="/i/eg_goleft123.gif" alt="向左轉(zhuǎn)" /> </body> </html>
制作圖像鏈接
<html> <body> <p> 您也可以把圖像作為鏈接來(lái)使用： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> </body> </html>
創(chuàng)建圖像映射
<html> <body> <p>請(qǐng)點(diǎn)擊圖像上的星球，把它們放大。</p> <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> <p><b>注釋?zhuān)?lt;/b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據(jù)瀏覽器），所以我們同時(shí)向 map 元素添加了 "id" 和 "name" 屬性。</p> </body> </html>
把圖像轉(zhuǎn)換為圖像映射
<!DOCTYPE html> <html> <body> <p>請(qǐng)把鼠標(biāo)移動(dòng)到圖像上，看一下?tīng)顟B(tài)欄的坐標(biāo)如何變化。</p> <a href="/example/html/html_ismap.html"> <img src="/i/eg_planets.jpg" ismap /> </a> </body> </html>
圖像標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
<img> | 定義圖像。 |
<map> | 定義圖像地圖。 |
<area> | 定義圖像地圖中的可點(diǎn)擊區(qū)域。 |