檔案路徑是 HTML 中使用的概念，用於將檔案的路徑定義到對(duì)應(yīng)網(wǎng)站的資料夾結(jié)構(gòu)中。這專門用於從所需資料夾中查找檔案的確切位置，這意味著它完全可以作為網(wǎng)頁(yè)瀏覽器要呼叫的特定檔案的指南或位址。 HTML 中的這個(gè)概念主要用於偵測(cè)圖片、網(wǎng)頁(yè)以及檔案、CSS 檔案、腳本檔案、影片等媒體檔案等的檔案路徑?？梢允褂?src 或 href 兩個(gè)屬性來(lái)尋找檔案的路徑。這些屬性幫助我們將外部文件或原始程式碼附加到 HTML 文件中。

文法

了解網(wǎng)頁(yè)中要包含的文件的路徑非常重要。

因此，將這些檔案包含在網(wǎng)頁(yè)中的語(yǔ)法如下：

文法：

<img src="/static/imghw/default1.png" data-src="img_folder/img_name" class="lazy" alt="">

這用於將圖像插入我們的網(wǎng)頁(yè)。

這是一些路徑的列表，其描述如下：

• : 當(dāng)我們要使用同一資料夾中的圖片作為目前頁(yè)面時(shí)使用。
• : 用於指示給定的圖像儲(chǔ)存在同一網(wǎng)站資料夾中的映像資料夾中。
• : 用於定義各自儲(chǔ)存到目前 Web 資料夾所在根目錄的映像資料夾中。
• : 此類型告訴用戶，給定的圖片儲(chǔ)存在網(wǎng)站目前資料夾的向上一層。

每當(dāng)需要新增一些外部檔案（如網(wǎng)頁(yè)、圖片、樣式檔案、腳本檔案等）時(shí)，程式碼中都會(huì)使用這些檔案路徑。

定義檔案路徑時(shí)，始終需要包含準(zhǔn)確的 URL、正確的檔案名稱以及具有正確副檔名的準(zhǔn)確圖片名稱。如果所有這些內(nèi)容都正確包含，那麼包含的文件或圖像將正確顯示在網(wǎng)頁(yè)上。

上面的語(yǔ)法分為兩種。一種是絕對(duì)檔案路徑，它是基於 URL 位址。另一個(gè)是相對(duì)檔案路徑，我們可以透過(guò)給出簡(jiǎn)單的名稱或資料夾路徑來(lái)定義檔案和映像的位址，以從中存取內(nèi)容。

我們將在下一節(jié)中詳細(xì)了解檔案路徑的兩種類型，其中將示範(fàn)它實(shí)際上是如何運(yùn)作的。

HTML 中的檔案路徑如何運(yùn)作？

檔案路徑有兩種類型：絕對(duì)檔案路徑和相對(duì)檔案路徑。

每當(dāng)我們使用完整的 URL 位址來(lái)定義檔案路徑時(shí)，就會(huì)使用絕對(duì)檔案路徑。

語(yǔ)法：src=”url”;

範(fàn)例：以下是定義絕對(duì)檔案路徑程式碼如何在網(wǎng)站結(jié)構(gòu)中運(yùn)作的實(shí)際程式碼：

<title>Absolute file path</title>


<img src="/static/imghw/default1.png" data-src="img_folder/img_name" class="lazy" alt="My Image"   style="max-width:90%">

相對(duì)檔案路徑用於定義檔案的特定路徑，實(shí)際上所有影像都位於相對(duì)於目前資料夾的位置。

文法：

 or or../img_folder/img_name or

這裡我們將包含一個(gè)範(fàn)例，該範(fàn)例具有使用相對(duì)檔案路徑顯示檔案路徑的所有可能方法，如下所示：

<title>Relative file path Demo Example</title>


<h4>Example showing file in same folder </h4>
<img src="/static/imghw/default1.png" data-src="images/Candle.jpg" class="lazy" alt="Image demo
" style="width:80px; height:80px; ">
<h4>Example showing file present in a folder above its
current?? folder </h4>
<img src="/static/imghw/default1.png" data-src="../images/Candle.jpg" class="lazy" alt="Image demo
" style="width:80px; height:80px; ">
<h4>Example showing file available in a folder, which is exactly located at? root ??position of its current sub folder
</h4>
<img src="/static/imghw/default1.png" data-src="https://cdn.educba.com/images/Candle.jpg" class="lazy" alt="Image demo
" style="width:80px; height:80px; ">

使用相對(duì)檔案路徑而不是絕對(duì)檔案路徑概念始終被認(rèn)為是良好的做法。

HTML 中的檔案路徑範(fàn)例

以下是下面提到的範(fàn)例

範(fàn)例#1

這個(gè)範(fàn)例將展示絕對(duì)檔案路徑如何運(yùn)作。其程式碼如下：

代碼：

<title>Absolute file path</title>

<h2>Absolute File Path</h2>
<p> This is example of Absolute file path. In this concept we are going to use Specific "URL" address of file. So we can easily add this file or image on their website.</p>

<img src="/static/imghw/default1.png" data-src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" class="lazy" alt="HTML 中的檔案路徑">

輸出：

範(fàn)例#2

代碼：

<title>Relative file path Demo Example</title>


<h2>Relative File Path</h2>
<p>In This Example we are going to see how Relative File Path going to work on same image.<br> So we are taking one image here stored at one specific website folder , so it will display same thing using different path</p>
<h4>Relative File path with image in same folder </h4>
<img  src="/static/imghw/default1.png" data-src="images/flag.png" class="lazy"   style="max-width:90%" alt="HTML 中的檔案路徑" >
<h4>Relative File path with image present in a folder above its current folder </h4>
<img src="/static/imghw/default1.png" data-src="../images/flag.png" class="lazy" alt="Image demo "   style="max-width:90%">
<h4>Relative File path with image available in a folder, which is exactly located at? root?? position of its current sub folder</h4>
<img src="/static/imghw/default1.png" data-src="https://cdn.educba.com/images/flag.png" class="lazy" alt="Image demo "   style="max-width:90%">

輸出：

範(fàn)例 #3

代碼：

<title>Relative file path Demo Example</title>


<h2>Relative File Path</h2>
<p>In This Example we are going to see how Relative File Path going to work on Image as well as on files also<br> So we are adding HTML File, CSS File and image also to see the actual result</p>
<h4>Relative File path with image in same folder </h4>
<img  src="/static/imghw/default1.png" data-src="images/EDUCBA.png" class="lazy"   style="max-width:90%" alt="HTML 中的檔案路徑" >
<h4>Relative File path with HTML file present in the folder </h4>
<a href="index.html"> HTML file </a>
<h4>One can give Style path through Absolute or Relative position. Here we are using relative file path</h4>
<a href="main.css"> CSS file </a>

輸出：

結(jié)論

從上述所有資訊中，我們意識(shí)到HTML檔案用於定義檔案或圖像在網(wǎng)站結(jié)構(gòu)中實(shí)際儲(chǔ)存的位址或路徑。

該檔案路徑以兩種可能的方式顯示：絕對(duì)檔案路徑，另一種是相對(duì)檔案路徑，正如我們?cè)谏厦娴馁Y訊中所看到的。

以上是HTML 中的檔案路徑的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！