HTML 圖像
HTML?圖像
<img> ->image圖像
??【必須屬性】
?? ???? 【1】src:地址
?? ???? 【2】alt:圖像替代文本,供探索引擎抓取使用
????【可選屬性】
?? ???? 【1】height:圖像高度
?? ???? 【2】width:圖像寬度
?? ???? 【3】ismap:為圖像定義為服務(wù)器端圖像映射
<img> 是空標(biāo)簽,意思是說,它只包含屬性,并且沒有閉合標(biāo)簽。
要在頁(yè)面上顯示圖像,你需要使用源屬性(src)。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語(yǔ)法是:
<img src="url" alt="some_text">
alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本。
替換文本屬性的值是用戶定義的。
<img src="../style/images/boat.gif" alt="Big Boat">
在瀏覽器無(wú)法載入圖像時(shí),替換文本屬性告訴讀者她們失去的信息。此時(shí),瀏覽器將顯示這個(gè)替代性的文本而不是圖像。
height(高度) 與 width(寬度)屬性用于設(shè)置圖像的高度與寬度。
屬性值默認(rèn)單位為像素:
<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width="300" height="200">
提示:?指定圖像的高度和寬度的一個(gè)很好的習(xí)慣。如果圖像指定了高度寬度,頁(yè)面加載時(shí)就會(huì)保留指定的尺寸。如果沒有指定圖片的大小,加載頁(yè)面時(shí)有可能會(huì)破壞HTML頁(yè)面的整體布局。
實(shí)例
加一個(gè)背景圖片:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body background="http://pic.58pic.com/58pic/15/97/99/27W58PICZS7_1024.jpg"> <h3>圖像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果圖像小于頁(yè)面,圖像會(huì)進(jìn)行重復(fù)。</p> </body> </html>
設(shè)置圖片的高度和寬度:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body > <img src="http://www.w3school.com.cn/i/eg_cute.gif" width="50" height="50"> <br /> <img src="http://www.w3school.com.cn/i/eg_cute.gif" width="100" height="100"> <br /> <img src="http://www.w3school.com.cn/i/eg_cute.gif" width="150" height="150"> </body> </html>