定義和用法:
img元素向網頁中嵌入一副圖像。
請注意:從技術上講,<img>標簽並不會在網頁中插入圖像,而是從網頁上鏈接圖像。<img>標簽創建的是被引用圖像的占位空間。
屬性:
<img>標簽有兩個必需的屬性:src屬性(規定顯示圖像的URL)和alt屬性(規定圖像的替代文本)。
可選的屬性:
height:定義圖像的高度。
width:定義圖像的寬度。
ismap:將圖像定義為服務器端圖像映射。
longdesc:指向包含長的圖像描述文檔的URL。
usemap:將圖像定義為客戶端的圖像映射。
圖片鏈接樣式
IE默認為紫色2px的邊框線
FF默認為藍色2px的邊框線
要清除圖片鏈接樣式,一般可以設置
img {
border:0;
}
text–align是針對塊級元素的,讓塊級元素里面的內容居中。<img>是行內元素,text-align也不能夠讓他本身居中。text-align應該放在你想要居中的元素的父元素下才有作用。
<img>標簽居中:要在<img>標簽外面加一個<div>標簽。
<div style="text-align:center;>
<img src="#" alt="xc"/>
</div>
<li><img>標簽之間有空隙 最終解決辦法
解決方法 一、將圖片轉換為塊級對象 二、設置圖片的垂直對齊方式 三、設置父對象的文字大小為0px 四、改變父對象的屬性 五、設置圖片的浮動屬性 六、取消圖片標簽和其父對象的最后一個結束標簽之間的空格。 原因分析 圖片文字等inline元素默認是和父級元素的baseline對齊的,而baseline又和父級底邊有一定距離(這個距離和 font-size,font-family 相關,不一定是 5px),所以設置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li,其他的block元素中包含img也會有這個現象。 至於這里的HTML屬性align=”center”(對於圖片瀏覽器會處理成align=”middle”),就相當於vertical-align:middle; 所以道理也是一樣的,只要vertical-align不取baseline,這個空隙就消失了。 相關信息 IE的顯示有幾種模式,在html文檔的開始部分聲明<!DOCTYPE ….> 如果聲明為strict模式,ie以w3c的方式顯示文檔,而w3c的標准里面<img />默認是一個inline的標簽,除非自己顯式的聲明為block。 那個空隙是ie針對盒模型默認的line-height和font-size。給img desplay:block;雖然能解決問題,但沒從結構上來考慮.可謂治標不治本。 |
HTML 與 XHTML 之間的差異
在 HTML 中,<img> 標簽沒有結束標簽。
在 XHTML 中,<img> 標簽必須被正確地關閉。
在 HTML 4.01 中,不推薦使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。
在 XHTML 1.0 Strict DTD 中,不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。
例子:
1.制作圖像鏈接:
<html> <body> <p> 您也可以把圖像作為鏈接來使用: <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> </body> </html>
2.創建圖像地圖:
<html> <body> <p>請點擊圖像上的星球,把它們放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注釋:</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性(根據瀏覽器),所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p> </body> </html>