HTML img標(biāo)簽的src屬性的用法是什么？具體使用方法解析（內(nèi)附案例）

首先我們來看看img標(biāo)簽的定義：

圖片也是網(wǎng)頁中最常見的html元素，而且是相當(dāng)重要的一部分。在html網(wǎng)頁中，圖像由<img>標(biāo)簽定義，<img>是空html標(biāo)簽或說是單標(biāo)簽，它只包含屬性，沒有閉合標(biāo)簽。

img標(biāo)簽的src屬性的定義：

<img> 標(biāo)簽的 src 屬性是必需的。它的值是圖像文件的 URL，也就是引用該圖像的文件的的絕對路徑或相對路徑。

提示：為了整理文檔的存儲，創(chuàng)作者通常會把圖像文件存放在一個(gè)單獨(dú)的文件夾中，而且通常會將這些目錄命名為 "pics" 或者 "images" 之類的名稱。在 W3School 在線教程中，我們的工程師把大部分常用的圖像都存放到一個(gè)名為 "i" 的文件夾中，"i"是 "images" 的縮寫，這樣做的好處是可以最大程度地簡化路徑。

src屬性是引入圖片的地址，沒有它<img>標(biāo)簽就沒意義了。

HTML img標(biāo)簽的src屬性的格式：

<img src="圖片地址" alt="圖片描述">

說明：圖片地址：儲圖像的位置；圖片描述：對圖片意思的說明，如果圖片不能顯示，則顯示該說明。

HTML img標(biāo)簽的src屬性的使用說明：

直接給src屬性一個(gè)服務(wù)器端資源的地址，img控件會自動獲取并解析資源。

圖片和HTML文本在同一目錄下：例如index.html和img.jpg

寫法：<img src="img.jpg">

圖片和HTML不在同一目錄下：有分兩種情況：

1.圖片img.jpg在文件夾images中，index.html和images文件夾在同一個(gè)目錄下

寫法：<img src="images/img.jpg">

2.圖片img.jpg在文件夾images中，index.html在controller文件夾中，images和controller文件夾在同一個(gè)目錄下

寫法：<img src="../images/img.jpg">

如果源是來自網(wǎng)上的 那就必須要用絕對路徑

寫法：<img src="http://www.php.cn/pic/img.jpg">

如果沒有圖片時(shí)，瀏覽器將顯示alt中的文字代替。

<img src="lib/img/imgDef.png" alt="暫無圖片" />

img中的src屬性的圖片路徑的使用方式:

1.html文件跟*.jpg文件(f盤)在不同目錄下：

<img src="file:///f:/*jpg" width="300" height="120"/>

2.html文件跟*.jpg圖片在相同目錄下：

<img src=".jpg" width="300" height="120"/>;

3.html文件跟*.jpg圖片在不同目錄下：

a.圖片*.jpg在image文件夾中，*html跟image在同一目錄下：

<img src="image/*jpg/"width="300" height="120"/>

b.圖片*jpg在image文件夾中，*html在connage文件夾中，image跟connage在同一目錄下：

<img src="../image/*jpg/"width="300" height="120"/>

4.如果圖片來源于網(wǎng)絡(luò)，那么寫絕對路徑：

<img src="http://image.php.cn/pcindexhot"/width="300" height="120"/>

HTML img標(biāo)簽的src屬性的屬性：

【小編推薦】

html表格中的th表頭內(nèi)容怎么居中？th表頭標(biāo)簽align屬性的具體介紹

html P標(biāo)簽為什么不能嵌套div？還有關(guān)于html P標(biāo)簽的css樣式的實(shí)例介紹

以上就是HTML img標(biāo)簽的src屬性的用法是什么？具體使用方法解析（內(nèi)附實(shí)例）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！