HTML 影像

HTML?圖像

<img> ; ->image圖片

??【必須屬性】

?? ???? 【1】src:位址

???2】alt:圖像替代文本，供探索引擎抓取使用

????【可選屬性】

?? ???? 【1】height:影像高度

?? ???寬度

?? ???? 【3】ismap:為映像定義為伺服器端影像映射

<img> 是空標(biāo)籤，意思是說(shuō)，它只包含屬性，並且沒(méi)有閉合標(biāo)籤。

要在頁(yè)面上顯示圖像，你需要使用來(lái)源屬性（src）。 src 指 "source"。來(lái)源屬性的值是圖像的 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（寬度）屬性用來(lái)設(shè)定影像的高度與寬度。 ######屬性值預(yù)設(shè)單位為像素:#########<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width="300" height="200">#########提示:?指定影像的高度和寬度的一個(gè)很好的習(xí)慣。如果圖像指定了高度寬度，頁(yè)面載入時(shí)就會(huì)保留指定的尺寸。如果沒(méi)有指定圖片的大小，載入頁(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>

##########

繼續(xù)學(xué)習(xí)

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body > <p>創(chuàng)建圖片鏈接: <a href="http://ipnx.cn"> <img src="http://www.runoob.com/try/demo_source/smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p> </body> </html>

提交重置程式碼

自動(dòng)運(yùn)行