html中怎麼加img路徑

2021-02-26 13:01:18

在html中的img標籤中,可以利用「src」屬性來新增img圖片路徑,它用於指定影象的URL,語法「<img src="URL">」。URL可以是相對路徑,例「../image/*jpg/」;也可是絕對路徑,即指向圖片檔案的完整URL。

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

HTML <img>標籤

<img> 標籤定義 HTML 頁面中的影象。

註釋:從技術上講,影象並不會插入 HTML 頁面中,而是連結到 HTML 頁面上。<img> 標籤的作用是為被參照的影象建立預留位置。

HTML <img> src 屬性

img 標籤的 src 屬性是必需的。它規定影象的 URL。

語法

<img src="URL">

注意:當一個網頁載入時,瀏覽器從 Web 伺服器上獲取影象,並把它插入到頁面中。因此,確保影象與相關的網頁在同一點,否則存取者可能會得到一個損壞的連結圖示。如果瀏覽器找不到影象時,會顯示損壞的連結圖示。

【推薦教學:《html視訊教學》】

HTML中<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、如果圖片來源於網路,那麼寫絕對路徑:

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

擴充套件資料:

絕對路徑是指目錄下的絕對位置,直接到達目標位置,通常是從碟符(根目錄)開始的路徑。

完整的描述檔案位置的路徑就是絕對路徑,以web站點根目錄為參考基礎的目錄路徑。絕對路徑名的指定是從樹型目錄結構頂部的根目錄開始到某個目錄或檔案的路徑,由一系列連續的目錄組成,中間用斜線分隔,直到要指定的目錄或檔案,路徑中的最後一個名稱即為要指向的目錄或檔案。之所以稱為絕對,意指當所有網頁參照同一個檔案時,所使用的路徑都是一樣的。

//絕對路徑,指向一個因特網檔案的完整 URL
<img src="https://img.php.cn/upload/article/202102/26/2021022610342015759.jpg" alt="flower">

相對路徑就是指由這個檔案所在的路徑引起的跟其它檔案(或資料夾)的路徑關係。使用相對路徑可以為我們帶來非常多的便利。HTML絕對路徑(absolute path)指帶域名的檔案的完整路徑。

//檔案路徑指向了位於當前網站根目錄中 images 資料夾裡的一個檔案:
<img src="/images/picture.jpg" alt="flower">

更多程式設計相關知識,請存取:!!

以上就是html中怎麼加img路徑的詳細內容,更多請關注TW511.COM其它相關文章!