圖像標(biāo)簽(<img>
)和源屬性(Src)
- 在 HTML 中,圖像由
<img>
標(biāo)簽定義伦腐。 -
<img>
是空標(biāo)簽,意思是說失都,它只包含屬性蔗牡,并且沒有閉合標(biāo)簽。 - 要在頁面上顯示圖像嗅剖,你需要使用源屬性(src)辩越。src 指 "source"。源屬性的值是圖像的 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 屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的觉阅。

在瀏覽器無法載入圖像時(shí)崖疤,替換文本屬性告訴讀者她們失去的信息。此時(shí)典勇,瀏覽器將顯示這個(gè)替代性的文本而不是圖像劫哼。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣,這樣有助于更好的顯示信息割笙,并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的
基本的注意事項(xiàng) - 有用的提示:
假如某個(gè) HTML 文件包含十個(gè)圖像权烧,那么為了正確顯示這個(gè)頁面,需要加載 11 個(gè)文件伤溉。加載圖片是需要時(shí)間的般码,所以我們的建議是:慎用圖片。
HTML 與 XHTML 之間的差異
- 在 HTML 中乱顾,<img> 標(biāo)簽沒有結(jié)束標(biāo)簽侈询。
- 在 XHTML 中,<img> 標(biāo)簽必須被正確地關(guān)閉糯耍。
- 在 HTML 4.01中扔字,不推薦使用 image 元素的 "align"、"border"温技、"hspace" 以及 "vspace" 屬性革为。
- 在 XHTML1.0 Strict DTD 中,不支持 image 元素的 "align"舵鳞、"border"震檩、"hspace" 以及 "vspace" 屬性。
基本代碼如下
<html>
<!--設(shè)置網(wǎng)頁背景圖片-->
<body style="background:url('background.jpg') no-repeat;background-size: 100%;">
<!--圖片與html在同一級(jí)目錄則只需要寫圖片名稱蜓堕,如果在更深層目錄這要寫到同一級(jí)目錄-->
<p>圖片的排列 設(shè)置了對(duì)齊方式 </p>
<!--帶有圖像的一個(gè)段落抛虏。圖像的 align 屬性設(shè)置為 "right"。圖像將浮動(dòng)到文本的右側(cè)套才。-->
<p>圖片的排列  align圖片位置 </p>
<p>如果無法顯示圖像迂猴,將顯示 "alt" 屬性中的文本:</p>
<!--您也可以把圖像作為鏈接來使用-->
<a href="http://www.reibang.com/u/3f6026e916d5">

</a>
<p>請(qǐng)點(diǎn)擊圖像上的星球,把它們放大背伴。</p>
<img
src="one.png"
border="0" usemap="#planetmap"
alt="Planets" height="260" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="http://www.reibang.com/u/3f6026e916d5"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="http://www.reibang.com/u/3f6026e916d5"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
target ="_blank"
alt="Sun" />
</map>
<p><b>注釋:</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性(根據(jù)瀏覽器)沸毁,所以我們同時(shí)向 map 元素添加了 "id" 和 "name" 屬性峰髓。</p>
</body>
</html>