HTML 圖像


定義和用法:

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>標簽之間有空隙 最終解決辦法

解決方法

一、將圖片轉換為塊級對象
即,設置img為“display:block;”。在本例中添加一組CSS代碼:“#sub img {display:block;}”。

二、設置圖片的垂直對齊方式
即設置圖片的vertical-align屬性為“top,text-top,bottom,text-bottom”也可以解決。如本例中增加一組CSS代碼:“#sub img {vertical-align:top;}”。

三、設置父對象的文字大小為0px
即,在#sub中添加一行:“font-size:0;”可以解決問題。但這也引發了新的問題,在父對象中的文字都無法顯示。就算文字部分被子對象括起來,設置子對象文字大小依然可以顯示,但在CSS效驗的時候會提示文字過小的錯誤。

四、改變父對象的屬性
如果父對象的寬、高固定,圖片大小隨父對象而定,那么可以設置“overflow:hidden;”來解決。如本例中可以向#sub中添加以下代碼:“width:88px;height:31px;overflow:hidden;”。

五、設置圖片的浮動屬性
即在本例中增加一行CSS代碼:“#sub img {float:left;}”。如果要實現圖文混排,這種方法是很好的選擇。

六、取消圖片標簽和其父對象的最后一個結束標簽之間的空格。
這個方法要強調下,在實際開發中該方法可能會出亂子,因為在寫代碼的時候為了讓代碼更體現語義和層次清晰,難免要通過IDE提供代碼縮進顯示,這必然會讓標簽和其他標簽換行顯示,比如說DW的“套用源格式”命令。

原因分析

圖片文字等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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM