4.2.2插入圖像 HTML

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

1.圖像資源—src屬性

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

基本語(yǔ)法如下：

<img src="url"/>

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

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

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

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

基本語(yǔ)法：

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

語(yǔ)法說(shuō)明如下：alt屬性的值就是要顯示的替代文本。

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

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

基本語(yǔ)法如下:

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

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