＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
實(shí)例小菜： 1、演示如何在網(wǎng)頁(yè)中插入一張圖片 代碼如下： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
插入一張網(wǎng)絡(luò)圖片<img src="http://pic.to8to.com/attch/day_160218/20160218_6410eaeeba9bc1b3e944xD5gKKhPEuEv.png" alt="image" width="100" height="50" align="middle">
</body>
</html> 效果如下圖： 2、演示不同來源的圖片(其他文件夾或服務(wù)器的圖片)如何插入網(wǎng)頁(yè) 代碼如下： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
網(wǎng)絡(luò)圖片<img src="http://pic.to8to.com/attch/day_160218/20160218_6410eaeeba9bc1b3e944xD5gKKhPEuEv.png" alt="image" width="100" height="50" align="middle"><br/>
src文件夾下的圖片<img src="src/woman@2x.png" alt="img" width="20" height="30" align="middle">
</body>
</html> 效果如下圖： ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
一、HTML圖像－圖像標(biāo)簽（<img>）和源屬性（src） 在HTML中，圖像由<img> 標(biāo)簽定義。<img>是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。要在頁(yè)面上顯示圖像，你需要使用源屬性(src) 。src指“source”。源屬性的值是圖像的url地址。 定義圖像的語法是： <img src="url" alt="some_text"> URL指存儲(chǔ)圖像的位置。如果名為"boat.gif"的圖像位于http://pic.to8to.com 的attch目錄中，那么其URL為http://pic.to8to.com/attch/boat.gif。 瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖片標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會(huì)首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段。 二、HTML圖像－Alt屬性 alt屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。 <img src="boat.gif" alt="Big Boat"> 在瀏覽器無法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的。 三、HTML圖像－設(shè)置圖像的高度與寬度 height （高度）與width（寬度）屬性用于設(shè)置圖像的高度與寬度。 屬性值默認(rèn)單位為像素： <img src="src/flower.png" alt="flower img" width="100" height="100"> 提示: 指定圖像的高度和寬度的一個(gè)很好的習(xí)慣。如果圖像指定了高度寬度，頁(yè)面加載時(shí)就會(huì)保留指定的尺寸。如果沒有指定圖片的大小，加載頁(yè)面時(shí)有可能會(huì)破壞HTML頁(yè)面的整體布局。
四、基本的注意事項(xiàng) 注意: 假如某個(gè) HTML 文件包含十個(gè)圖像，那么為了正確顯示這個(gè)頁(yè)面，需要加載 11 個(gè)文件。加載圖片是需要時(shí)間的，所以我們的建議是：慎用圖片。 注意: 加載頁(yè)面時(shí)，要注意插入頁(yè)面圖像的路徑，如果不能正確設(shè)置圖像的位置，瀏覽器無法加載圖片，圖像標(biāo)簽就會(huì)顯示一個(gè)破碎的圖片
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
五、其他實(shí)例 1、如何在文字中排列圖像 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background-color: navajowhite
}
</style>
</head>
<body>
0<img src="src/Akali_0.jpg" alt="Akali0" width="154" height="280">
2<img src="src/Akali_2.jpg" alt="Akali2" align="middle"width="154" height="280">
1<img src="src/Akali_1.jpg" alt="Akali1" align="top" width="154" height="280" >
3<img src="src/Akali_3.jpg" alt="Akali3" align="bottom" width="154" height="280">
</body>
</html> 注：<!--align屬性在HTML4中已廢棄了,也不支持HTML5,用CSS代替--> 2、如何使圖片浮動(dòng)至段落的左邊或右邊 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background-color: navajowhite
}
</style>
</head>
<body>
<p><img src="src/woman@2x.png" alt="genter" style="float:left" width="24" height="30">浮動(dòng)到右邊</p>
<p><img src="src/woman@2x.png" alt="genter" style="float: right" width="24" height="30">浮動(dòng)到左邊</p>
<!--align屬性在HTML4中已廢棄了,也不支持HTML5,用CSS中的float屬性來校準(zhǔn)圖片-->
</body>
</html> 3、如何將圖片作為一個(gè)鏈接使用。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background-color: navajowhite
}
</style>
</head>
<body>
<p>創(chuàng)建圖片鏈接:<a href="http://www.baidu.com"><img src="src/Akali_0.jpg" alt="imghref" width="50" height="70" border="5"></a></p>
<p>無邊框的圖片鏈接:<a href="http://www.baidu.com"><img src="src/Akali_1.jpg" alt="imghref" width="50" height="70" border="0"></a></p>
</body>
</html> 4、如何創(chuàng)建帶有可供點(diǎn)擊區(qū)域的圖像地圖。其中的每個(gè)區(qū)域都是一個(gè)超級(jí)鏈接。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background-color: navajowhite
}
</style>
</head>
<body>
<p>點(diǎn)擊花的不同位置注意變化</p>
<img src="src/flower.png" width="100" height="100" alt="flower" usemap="#flowermap">
<map name="flowermap">
<area shape="rect" coords="0,0,30,30" alt="One" href="http://www.baidu.com">
<area shape="circle" coords="70,0,30,30" alt="Two" href="h2.html">
</map>
</body>
</html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝六、總結(jié)HTML圖像標(biāo)簽 | 標(biāo)簽 | 描述 |
|---|
| <img> | 定義圖像 | | <map> | 定義圖像地圖 | | <area> | 定義圖像地圖中的可點(diǎn)擊區(qū)域 |
|
