在 html 中，圖像由 <img> 標(biāo)簽定義，<img> 是空標(biāo)簽，意思是說(shuō)，它只包含屬性，并且沒有閉合標(biāo)簽 。

html 圖像 - 圖像標(biāo)簽 ( <img> ) 和源屬性 ( src )

在 HTML 中，圖像由 <img> 標(biāo)簽定義，請(qǐng)注意：從技術(shù)上講，<img>標(biāo)簽并不會(huì)在網(wǎng)頁(yè)中插入圖像，而是從網(wǎng)頁(yè)上鏈接圖像。<img>標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。

<img> 是空標(biāo)簽，意思是說(shuō)，它只包含屬性，并且沒有閉合標(biāo)簽

要在頁(yè)面上顯示圖像，需要使用源屬性 ( src )

src 指 "source"，源屬性的值是圖像的 URL 地址

語(yǔ)法

<img src=" *url* " alt=" *some_text* ">

URL 指存儲(chǔ)圖像的位置

瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方

如果你將圖像標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會(huì)首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段

屬性：

<img>標(biāo)簽有兩個(gè)必需的屬性：src屬性（規(guī)定顯示圖像的URL）和alt屬性（規(guī)定圖像的替代文本）。

可選的屬性：

height:定義圖像的高度。

width:定義圖像的寬度。

ismap:將圖像定義為服務(wù)器端圖像映射。

longdesc：指向包含長(zhǎng)的圖像描述文檔的URL。

usemap:將圖像定義為客戶端的圖像映射。

HTML 圖像 - alt 屬性

alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本

替換文本屬性的值是用戶定義的

<img src="boat.gif" alt="Big Boat">

在瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息

此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像

為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的

HTML 圖像 - 設(shè)置圖像的高度與寬度

屬性 height 與 width 屬性用于設(shè)置圖像的高度與寬度

屬性值默認(rèn)單位為像素

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

指定圖像的高度和寬度的一個(gè)很好的習(xí)慣

如果圖像指定了高度寬度，頁(yè)面加載時(shí)就會(huì)保留指定的尺寸

如果沒有指定圖片的大小，加載頁(yè)面時(shí)有可能會(huì)破壞 HTML 頁(yè)面的整體布局

有用的提示

假如某個(gè) HTML 文件包含十個(gè)圖像，那么為了正確顯示這個(gè)頁(yè)面，需要加載 11 個(gè)文件

加載圖片是需要時(shí)間的，所以我們的建議是：慎用圖片

加載頁(yè)面時(shí)，要注意插入頁(yè)面圖像的路徑，如果不能正確設(shè)置圖像的位置，瀏覽器無(wú)法加載圖片，圖像標(biāo)簽就會(huì)顯示一個(gè)破碎的圖片

<li><img>標(biāo)簽之間有空隙 最終解決辦法 

一、將圖片轉(zhuǎn)換為塊級(jí)對(duì)象
即，設(shè)置img為“display:block;”。在本例中添加一組css代碼：“#sub img {display:block;}”。

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

三、設(shè)置父對(duì)象的文字大小為0px
即，在#sub中添加一行：“font-size:0;”可以解決問題。但這也引發(fā)了新的問題，在父對(duì)象中的文字都無(wú)法顯示。就算文字部分被子對(duì)象括起來(lái)，設(shè)置子對(duì)象文字大小依然可以顯示，但在CSS效驗(yàn)的時(shí)候會(huì)提示文字過小的錯(cuò)誤。

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

五、設(shè)置圖片的浮動(dòng)屬性
即在本例中增加一行CSS代碼：“#sub img {float:left;}”。如果要實(shí)現(xiàn)圖文混排，這種方法是很好的選擇。

六、取消圖片標(biāo)簽和其父對(duì)象的最后一個(gè)結(jié)束標(biāo)簽之間的空格。
這個(gè)方法要強(qiáng)調(diào)下，在實(shí)際開發(fā)中該方法可能會(huì)出亂子，因?yàn)樵趯懘�碼的時(shí)候?yàn)榱俗尨�碼更體現(xiàn)語(yǔ)義和層次清晰，難免要通過IDE提供代碼縮進(jìn)顯示，這必然會(huì)讓標(biāo)簽和其他標(biāo)簽換行顯示，比如說(shuō)DW的“套用源格式”命令。

原因分析

圖片文字等inline元素默認(rèn)是和父級(jí)元素的baseline對(duì)齊的，而baseline又和父級(jí)底邊有一定距離（這個(gè)距離和 font-size，font-family 相關(guān)，不一定是 5px），所以設(shè)置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現(xiàn)。而且不光li，其他的block元素中包含img也會(huì)有這個(gè)現(xiàn)象。

至于這里的HTML屬性align=”center”（對(duì)于圖片瀏覽器會(huì)處理成align=”middle”），就相當(dāng)于vertical-align:middle; 所以道理也是一樣的，只要vertical-align不取baseline，這個(gè)空隙就消失了。

相關(guān)信息

IE的顯示有幾種模式，在html文檔的開始部分聲明<!DOCTYPE ….> 如果聲明為strict模式，ie以w3c的方式顯示文檔，而w3c的標(biāo)準(zhǔn)里面<img />默認(rèn)是一個(gè)inline的標(biāo)簽，除非自己顯式的聲明為block。

那個(gè)空隙是ie針對(duì)盒模型默認(rèn)的line-height和font-size。給img desplay:block；雖然能解決問題，但沒從結(jié)構(gòu)上來(lái)考慮.可謂治標(biāo)不治本。