3.2 圖像元素img

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

img元素向網(wǎng)頁中嵌入一幅圖像。從技術(shù)上講，﹤img﹥標(biāo)簽并不會在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像。﹤img﹥標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。img元素的格式為：

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

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

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

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

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

4）height：設(shè)置圖像的高度（像素數(shù)或百分?jǐn)?shù)）。

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

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

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