文件路徑是 HTML 中使用的一個(gè)概念，用于將文件的路徑定義到相應(yīng)網(wǎng)站的文件夾結(jié)構(gòu)中。這專門用于從所需文件夾中查找文件的確切位置，這意味著它完全可以作為網(wǎng)絡(luò)瀏覽器要調(diào)用的特定文件的指南或地址。 HTML 中的這一概念主要用于檢測(cè)圖像、網(wǎng)頁(yè)以及文件、CSS 文件、腳本文件、視頻等媒體文件等的文件路徑?？梢允褂?src 或 href 兩個(gè)屬性來查找文件的路徑。這些屬性幫助我們將外部文件或源代碼附加到 HTML 文檔中。

語(yǔ)法

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

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

語(yǔ)法：

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

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

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

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

每當(dāng)需要添加一些外部文件（如網(wǎng)頁(yè)、圖像、樣式文件、腳本文件等）時(shí)，代碼中都會(huì)使用這些文件路徑。

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

上面的語(yǔ)法分為兩種。一種是絕對(duì)文件路徑，它基于 URL 地址。另一個(gè)是相對(duì)文件路徑，我們可以通過給出簡(jiǎn)單的名稱或文件夾路徑來定義文件和圖像的地址，以從中訪問內(nèi)容。

我們將在下一節(jié)中詳細(xì)了解文件路徑的兩種類型，其中將演示它實(shí)際上是如何工作的。

HTML 中的文件路徑如何工作？

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

每當(dāng)我們使用完整的 URL 地址來定義文件路徑時(shí)，都會(huì)使用絕對(duì)文件路徑。

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

示例：以下是定義絕對(duì)文件路徑代碼如何在網(wǎng)站結(jié)構(gòu)中工作的實(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ì)于當(dāng)前文件夾的位置。

語(yǔ)法：

 or or../img_folder/img_name or

這里我們將包含一個(gè)示例，該示例具有使用相對(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 中的文件路徑示例

以下是下面提到的示例

示例#1

這個(gè)示例將展示絕對(duì)文件路徑如何工作。其代碼如下：

代碼：

<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 中的文件路徑">

輸出：

示例#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%">

輸出：

示例 #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 文件用于定義文件或圖像實(shí)際存儲(chǔ)在網(wǎng)站結(jié)構(gòu)中的地址或路徑。

該文件路徑以兩種可能的方式顯示：絕對(duì)文件路徑，另一種是相對(duì)文件路徑，正如我們?cè)谏厦娴男畔⒅锌吹降摹?/p>

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