HTML圖像

圖像標籤

在 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>

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章