Chap 04 HTML使用圖像

4.1  圖像的格式 

       網頁中圖像的格式一般有3種，即GIF、JEPG和PNG。目前GIF和JPEG文件格式的支持狀況最好，大多數瀏覽器均可以查看它們。因爲PNG文件具備較大的靈活性而且文件較小，因此它對於幾乎任何類型的網頁圖形都是最適合的，可是Microsoft Internet Exporer 和Netscape Navigator只能部分支持PNG圖像的顯示。因此建議使用兼容性更好的GIF或JPEG格式。

1.  GIF格式

         GIF是英文單詞Graphic Interchange Format 的縮寫，即圖像交換格式，文件最多可以使用256種顏色，最適合顯示色調不連續或具備大面積單一顏色的圖像，例如導航條、按鈕、圖標、徽標或其餘具備統一色彩和色調的圖像。

 2.  JPEG格式

            JPEG是英文Joint Photographic Experts Group 的縮寫，它是一種圖像壓縮格式。此格式用於攝影或連續色調圖像的高級格式，由於JPEG文件能夠包含數百萬種顏色，文件品質較高。

 3.PNG格式

           PNG是英文Portable Network Graphics 的縮寫，PNG圖像格式是一種非破壞性的網頁圖像格式，它提供了將圖像文件以佔用內存空間最小的方式壓縮卻不形成圖像失真的技術。

4.2 插入圖像

4.2.1  插入圖像標題img

4.2.2  圖像源文件src

語法：

<img src="圖像文件的地址路徑">

 說明：

        路徑能夠是相對路徑，也能夠是絕對路徑。圖像的地址可使用文件和http:// 關鍵字做爲圖像的地址，而且可以用於在網頁上載入圖像。

 4.2.3  圖像的文字提示alt

         提示文字有兩個做用，當瀏覽該網頁時，若是圖像下載完成，將鼠標指針放在該圖像上，鼠標指針旁邊會出現提示文字。也就是說，當鼠標指針指向圖像上方的時候，稍等片刻，能夠出現圖像的提示性文字，用於說明或者描述圖像。第二個做用是，若是圖像沒有被下載，在圖像的位置上就會顯示提示文字。

 語法：

<img src="圖像文件的地址"  alt="提示文字的內容">

說明：

提示文字的內容中英文都可。

 

4.2.4  圖像的寬度和高度width、height

       width和height屬性用來定義圖片的高度和寬度，若是<img>元素不定義高度和寬度，圖片就會按照它的原始尺寸顯示。

 語法：

<img src="圖像文件的地址"  width="圖像的寬度值"  height="圖像的高度值">

說明：

圖像的寬度值和高度值單位均爲像素。

 

4.2.5  圖像的邊框border

      默認狀況，圖像是沒有邊框的，經過border屬相能夠爲圖像添加邊框線。能夠設置邊框的寬度，但邊框的顏色是不能夠設置的。當圖像上沒有添加連接的時候，邊框的顏色爲黑色；當圖像上添加了連接時，邊框的顏色和連接文字的顏色一致，默認爲深藍色。

 語法：

<img src="圖像文件的地址"  border="圖像邊框的高度">

 

 4.2.6    圖像的垂直邊距vspace

        垂直邊距vspace用來調整圖像與文字的垂直邊距。

  語法：

<img src="圖像文件的地址"  vspace="垂直邊距">

 

4.2.7  圖像的水平間距hspace

        圖像與文字之間的水平距離能夠經過hspace參數進行調整。

 語法：

<img src="圖像文件的地址"  hspace="水平邊距">

 

4.2.8  圖像的排列 

        圖像和文字之間的對齊方式是經過align屬性來設定的，align的對齊方式有兩種：絕對對齊和相對對齊。絕對對齊的效果和文字同樣，只有3種：居中middle、

居左left、居右right。  相對對齊是指圖像與一行文字的相對位置。

 語法：

<img src="圖像文件的地址"  align="文字的對齊方式">

 

4.3 圖像的超連接

      除了文字能夠添加超連接以外，圖像也能夠設置超連接屬性。同一個圖像的不一樣部分也能夠連接到不一樣的文檔，這就是熱區連接。

 

4.3.1  圖像的超連接

       圖像的連接和文字的連接方法是同樣的，都是用<a>標籤來完成，只要將<img>標籤放在<a>和</a>之間就能夠了。

 語法：

<a href ="連接地址"><img src="圖像文件的地址"></a>

 

4.3.2 圖像熱區連接

        在HTML中能夠把圖片劃分紅多個熱點區域，每個熱點區域連接到不一樣的網頁。這種效果的實質是把一幅圖片劃分爲不一樣的熱點區域，再讓不一樣的區域進行超連接，這就是映射地圖。

 語法：

        首先須要在圖像中設置映射圖像名，在圖像的屬性中使用<usemap> 標記標記添加圖像要引用的映射圖像的名稱，以下所示：

<img src="圖像地址"  usemap="映射圖像名稱">

 而後須要定義熱區圖像以及熱區的連接屬性以下：

<map name="映射圖像名稱">

<area shape="熱區形狀"  coords="熱區座標"  href="連接地址">

</map>