瀏覽器看到一個<img>元素時，相比其他標記，會做不同的處理：瀏覽器在頁面中顯示圖像之前，必須先獲或這個圖像。 下面通過一個例子來說明瀏覽器是如何處理圖像的。比如，服務器中的lounge文件夾中有這樣一個index.html文件：
當我們請求這個頁面時，瀏覽器是如何獲取和顯示這個頁面的呢？敬請期待：
首先，瀏覽器從服務器獲取文件“index.html”。接下來，瀏覽器讀取”index.html“文件，顯示這個文件，發現其中有4個圖像需要獲取。所以它需要從Web服務器逐個得到這些圖像，先從”green.jpg“開始。獲取到”green.jpg“之后，瀏覽器顯示這個圖像，然后轉向下一個圖像：“lightblue.jpg”?，F在瀏覽器已經獲取了“lightblue.jpg”，所以它會顯示這個圖像，然后轉向下一個圖像：“blue.jpg”。對頁面上的每一個圖像都會重復這個過程。所以瀏覽器需要向服務器發送5個請求。
Web上最常用的3種圖像格式：
JPEGPNGGIF那么，JPEG、PNG和GIF有什么不同呢？現在先初略了解一下。
JPEG 最適合連續色調圖像，如照片。可以表示包含多達1600萬種不同的顏色。這是一種“有損”格式，因為縮小文件大小時會丟掉圖像的一些信息。不支持透明度。文件比較小，以便Web頁面更高效地顯示。不支持動畫。PNG PNG最適合單色圖像和線條構成的圖像(如logo、剪貼畫和圖像中的小文本)。PNG可以表示包含上百萬種不同顏色的圖像。PNG有3種：PNG-8(支持256種顏色)、PNG-16(支持數千種顏色)和PNG-32(支持數百萬種顏色)，取決于你需要表示多少種顏色。PNG會壓縮文件來縮小文件大小，不過不會丟掉信息。所以這是一種“無損”格式。允許將顏色設置為“透明”，使圖像下面的東西可以顯示出來。與相應的JPEG文件相比，PNG文件更大一些，不過取決于使用的顏色數，可能比相應的GIF文件小，也可能更大。GIF 類似于PNG，GIF最適合單色圖像和線條構成的圖像(如logo、剪貼畫和圖像中的小文本)。GIF可以表示最多256種不同顏色的圖像。GIF也是一種“無損”格式。GIF也支持透明度，不過只允許一種顏色設置為“透明”。GIF文件往往比相應的JPEG文件大。支持動畫。總結：
照片和復雜圖像使用JPEG；單色圖像、logo和幾何圖像使用PNG或GIF。如果把一個透明的圖像放在Web頁面中，則要確保這個圖像的蒙版顏色與Web頁面的背景色一致。GIF和PNG圖像格式允許建立一個有透明背景的圖像。如果把一個有透明背景的圖像放在一個Web頁面中，圖像后面的東西(如頁面的背景色)就會透過圖像的透明部分顯示出來。<img>元素<img>元素示例如下：
<img>元素是一個內聯元素。它不會在前面或后面插入換行。因此如果HTML中有多個圖像，瀏覽器窗口足夠寬時，瀏覽器會把它們并排擺放。那些更大的照片之所以沒有并排擺放，是因為瀏覽器沒有足夠的空間來并排顯示它們。實際上，它只能從上到下顯示各個大圖像。瀏覽器總是在塊元素前后在垂直方向上顯示間距。src屬性指定了在Web頁面上顯示的圖像文件的位置。<img>元素是一個void元素。更確切地講，void元素是指HTML頁面中在開始標記和結束標記之間沒有任何內容的元素。沒錯，圖像也是內容，不過<img>元素只是指向圖像。圖像并不是HTML頁面本身的一部分。實際上，瀏覽器顯示頁面時，圖像會取代<img>元素。另外要記住，HTML頁面是純文本，所以圖像絕對無法直接作為頁面的一部分。它是單獨存在的。我們要記住src屬性不只是用于相對鏈接，還可以在src屬性中放入URL。圖像與HTML頁面一同存儲在Web服務器上，所以Web上的每一個圖像都有自己的URL，就像Web頁面一樣。 如果要指向另一個不同網站上的圖像，通常要使用這個圖像的URL(要記住，對于相同網站上的鏈接和圖像，最好使用相對路徑)。要使用URL鏈接一個圖像，如下所示：
<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg"><img>元素的alt屬性如果瀏覽器無法顯示頁面上的圖像，可以使用<img>元素的alt屬性為訪問者提供一些指示，告訴他們圖像里有什么信息?？梢赃@樣做：
<img>元素的width和height屬性可以使用width和height屬性提前告訴瀏覽器你的頁面中一個圖像的大小。可以這樣使用width和height屬性：
<img src="images/drinks.gif" width="48" height="100" />要記住，瀏覽器是在下載了HTML文件并開始顯示頁面之后才下載圖像。瀏覽器下載圖像之前，除非你告訴它，否則它無法知道圖像的大小。 我們在調整圖像大小時，寬度和高度一般都使用像素數指定，那什么是像素呢？現在我們初步了解一下：我們的計算機顯示屏就是由數百萬個稱為像素的點組成。
新聞熱點
疑難解答
