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

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

在 HTML 中，圖像由 <img> 標簽定義，請注意：從技術上講，<img>標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img>標簽創建的是被引用圖像的占位空間。

<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽

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

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

語法

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

URL 指存儲圖像的位置

瀏覽器將圖像顯示在文檔中圖像標簽出現的地方

如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段

屬性：

<img>標簽有兩個必需的屬性：src屬性（規定顯示圖像的URL）和alt屬性（規定圖像的替代文本）。

可選的屬性：

height:定義圖像的高度。

width:定義圖像的寬度。

ismap:將圖像定義為服務器端圖像映射。

longdesc：指向包含長的圖像描述文檔的URL。

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

HTML 圖像 - alt 屬性

alt 屬性用來為圖像定義一串預備的可替換的文本

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

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

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

此時，瀏覽器將顯示這個替代性的文本而不是圖像

為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的

HTML 圖像 - 設置圖像的高度與寬度

屬性 height 與 width 屬性用于設置圖像的高度與寬度

屬性值默認單位為像素

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

指定圖像的高度和寬度的一個很好的習慣

如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸

如果沒有指定圖片的大小，加載頁面時有可能會破壞 HTML 頁面的整體布局

有用的提示

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

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

加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片

<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；雖然能解決問題，但沒從結構上來考慮.可謂治標不治本。