圖像標籤
在 HTML 中,圖像由<img>
標籤定義。
<img>
是空標籤,意思是說,它只包含屬性,並且沒有閉合標籤。
要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 “source”。源屬性的值是圖像的 URL 地址。
定義圖像的語法是:
<img src="*url*" alt="*some_text*">
url路徑可以是相對路徑,也可以是網絡路徑
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一個圖像:</p>
<img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">
HTML 圖像- Alt屬性
alt 屬性用來爲圖像定義一串預備的可替換的文本。
替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時,替換文本屬性告訴讀者她們失去的信息。此時,瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣,這樣有助於更好的顯示信息,並且對於那些使用純文本瀏覽器的人來說是非常有用的。
圖像的高度與寬度
height(高度) 與 width(寬度)屬性用於設置圖像的高度與寬度。
屬性值默認單位爲像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度,頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小,加載頁面時有可能會破壞HTML頁面的整體佈局。
有用的提示
注意: 假如某個 HTML 文件包含十個圖像,那麼爲了正確顯示這個頁面,需要加載 11 個文件。加載圖片是需要時間的,所以我們的建議是:慎用圖片。
注意: 加載頁面時,要注意插入頁面圖像的路徑,如果不能正確設置圖像的位置,瀏覽器無法加載圖片,圖像標籤就會顯示一個破碎的圖片。
HTML圖像標籤
標籤示例<map>
area
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點擊太陽或其他行星,注意變化:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>