4.2.2插入圖像 HTML

使用<img>元素，就可以在Web頁面輕松地添加圖像。img是image的縮寫。<img>的常用屬性有src、alt、height、width等。

1.圖像資源—src屬性

可以在網(wǎng)頁中放置各種各樣的圖像，當(dāng)訪問者瀏覽網(wǎng)頁時，根據(jù)在HTML文檔中描述的圖像路徑，瀏覽器會自動加載，不過，圖像加載時間跟訪問者的網(wǎng)絡(luò)連接強(qiáng)度、圖像尺寸以及頁面中包含的圖像個數(shù)相關(guān)。在<img>元素中src屬性是不能缺省的。

基本語法如下：

<img src="url"/>

語法說明如下：src屬性的值是圖像的URL，指明網(wǎng)頁中所要引用圖像的位置，也就是指出引用圖像文件的相對路徑或絕對路徑。

一般來說，在網(wǎng)頁中資源的路徑使用文檔相對路徑，以在網(wǎng)頁中加入圖像為例，就是指圖像相對于網(wǎng)頁文件的路徑。

2.圖像替代文本—alt屬性

使用alt屬性，可以為圖像添加一段描述性文本，即當(dāng)圖像不能夠正常顯示或鼠標(biāo)指向圖片并暫停在圖片上時會顯示的替代文本。

基本語法：

<img src="url"alt="替代文本"/>

語法說明如下：alt屬性的值就是要顯示的替代文本。

3.圖像的寬高—width和height屬性

有時，加載網(wǎng)頁會先看到文本，等一小段時間以后圖像才開始加載，如果指定圖像的尺寸，瀏覽器就可以預(yù)留空間，在圖像加載的同時讓文本顯示在周圍，保持布局的穩(wěn)定。width屬性和height屬性分別規(guī)定圖像的寬度和高度。

基本語法如下:

<img src="url"width="象素|百分比"height="像素|百分比"/>

語法說明如下：width和height屬性的值可以是像素或百分比，像素的形式可以是100px或僅僅是100，百分比的形式為50%。