2.7　圖像標簽和超鏈接標簽

2.7.1　網頁中的圖像

一圖抵千言，圖片是網頁中不可缺少的元素，會使網頁更加生動，可以描述更復雜的問題。在網頁中巧妙地使用圖片，可以使網頁圖文并茂，為網頁增色不少。網頁支持多種圖片格式，并且可以對插入的圖片設置寬度和高度。

網頁中使用的圖片格式可是GIF、JPEG、BMP、TIFF、PNG等，其中使用最廣泛的是JPEG、GIF和PNG這3種格式。它們的相同點是都經過了壓縮，壓縮比越高，圖像品質越差。

2.7.2　圖像標簽的基本語法

圖像標簽的基本語法如下：

其中，src屬性用于指定圖片源文件的路徑，是<img>標簽必不可少的屬性。alt屬性指定的替代文字，表示圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代顯示的文本，這樣，即使當圖片無法顯示時，用戶還是可以看到網頁丟失的信息內容，如圖2.11所示。

title屬性可以提供額外的提示或幫助信息，當鼠標移至圖片上時顯示該提示信息，方便用戶使用。代碼如示例2.9所示。

示例2.9：

在瀏覽器中的效果如圖2.12所示。

2.7.3　設置圖片的寬度和高度

在HTML文檔中，還可以設置插入圖片的顯示大小，一般是按原尺寸來顯示，但也可以任意設置顯示尺寸。設置圖片尺寸時，分別用屬性width（寬度）和height（高度）。代碼如示例2.10所示。

示例2.10：

在瀏覽器中的效果如圖2.13所示。

如圖2.13所示，左圖是圖片的原始尺寸，中圖是改變寬度的尺寸，右圖是改變寬度和高度的尺寸。

可以看出圖片的顯示尺寸是由width（寬度）和height（高度）控制的。當只為圖片設置一個尺寸屬性時，另外一個尺寸就以圖片原始的長寬比例來顯示。圖片的尺寸單位可以選擇百分比或數值。百分比為相對尺寸，數值是絕對尺寸。

2.7.4　排列圖片

在網頁的文字中，如果插入圖片，就可以對圖片進行排列。常用的排列方式為居中、底部對齊和頂部對齊。代碼如示例2.11所示。

示例2.11：

在瀏覽器中的效果如圖2.14所示。

示例2.12：

在瀏覽器中的效果如圖2.15所示。