3.2 圖像元素img

圖像也稱圖片，是網頁中不可缺少的元素，它可以美化網頁，使網頁看起來更加美觀大方。雖然有很多種計算機圖像格式，但由于受網絡帶寬和瀏覽器的限制，在Web上常用的圖像格式有3種：GIF、JPEG和PNG。

img元素向網頁中嵌入一幅圖像。從技術上講，﹤img﹥標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像。﹤img﹥標簽創建的是被引用圖像的占位空間。img元素的格式為：

﹤img src="圖片的URL"alt="替代文字"width="圖像寬度"height="圖像高度"/﹥

img元素中的屬性說明如下。

1）src：指出要加入圖片的位置，即“圖像文件的URL/圖像文件名”，其中URL可以是相對路徑，也可以是絕對路徑。本屬性是必需的屬性。

2）alt：在瀏覽器尚未完全讀入圖像或顯示的圖像不存在時，在圖像位置顯示的文字。本屬性是必需的屬性。

3）width：設置圖像的寬度（像素數或百分數）。如果不設置圖像的大小，圖像將按照其本身的大小顯示。屬性值可取像素數，也可取百分數。百分數是指相對于當前瀏覽器窗口的百分比。

4）height：設置圖像的高度（像素數或百分數）。

5）title：為瀏覽者提供額外的提示或幫助信息。

【例3-3】 圖像元素示例。本例文件3-3.html在瀏覽器中正常顯示的效果如圖3-3所示。當顯示的圖像路徑錯誤時，顯示效果如圖3-4所示。

當顯示的圖像不存在時，頁面中圖像的位置將顯示網頁圖片丟失的信息，但由于設置了alt屬性，因此在或的右邊顯示替代文字；同時，由于設置了title屬性，因此在替代文字附近還顯示提示信息。因此，在使用﹤img﹥標簽時，最好同時使用alt屬性和title屬性，避免圖片路徑錯誤帶來的錯誤信息，同時，增加了提示信息也方便瀏覽者閱讀。