HTML 中的檔案路徑

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

文法

了解網頁中要包含的文件的路徑非常重要。

因此，將這些檔案包含在網頁中的語法如下：

文法：

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

這用於將圖像插入我們的網頁。

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

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

每當需要新增一些外部檔案（如網頁、圖片、樣式檔案、腳本檔案等）時，程式碼中都會使用這些檔案路徑。

定義檔案路徑時，始終需要包含準確的 URL、正確的檔案名稱以及具有正確副檔名的準確圖片名稱。如果所有這些內容都正確包含，那麼包含的文件或圖像將正確顯示在網頁上。

上面的語法分為兩種。一種是絕對檔案路徑，它是基於 URL 位址。另一個是相對檔案路徑，我們可以透過給出簡單的名稱或資料夾路徑來定義檔案和映像的位址，以從中存取內容。

我們將在下一節中詳細了解檔案路徑的兩種類型，其中將示範它實際上是如何運作的。

HTML 中的檔案路徑如何運作？

檔案路徑有兩種類型：絕對檔案路徑和相對檔案路徑。

每當我們使用完整的 URL 位址來定義檔案路徑時，就會使用絕對檔案路徑。

語法：src=”url”;

範例：以下是定義絕對檔案路徑程式碼如何在網站結構中運作的實際程式碼：

<title>Absolute file path</title>


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

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

文法：

 or or../img_folder/img_name or

這裡我們將包含一個範例，該範例具有使用相對檔案路徑顯示檔案路徑的所有可能方法，如下所示：

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


<h4 id="Example-showing-file-in-same-folder">Example showing file in same folder </h4>
<img src="/static/imghwm/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/imghwm/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/imghwm/default1.png" data-src="https://cdn.educba.com/images/Candle.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Image demo
" style="width:80px; height:80px; ">

使用相對檔案路徑而不是絕對檔案路徑概念始終被認為是良好的做法。

HTML 中的檔案路徑範例

以下是下面提到的範例

範例#1

這個範例將展示絕對檔案路徑如何運作。其程式碼如下：

代碼：

<title>Absolute file path</title>

<h2 id="Absolute-File-Path">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/imghwm/default1.png" data-src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 中的檔案路徑">

輸出：

範例#2

代碼：

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


<h2 id="Relative-File-Path">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 id="Relative-File-path-with-image-in-same-folder">Relative File path with image in same folder </h4>
<img  src="/static/imghwm/default1.png" data-src="images/flag.png" class="lazy"   style="max-width:90%" alt="HTML 中的檔案路徑" >
<h4 id="Relative-File-path-with-image-present-in-a-folder-above-its-current-folder">Relative File path with image present in a folder above its current folder </h4>
<img src="/static/imghwm/default1.png" data-src="../images/flag.png" class="lazy" alt="Image demo "   style="max-width:90%">
<h4 id="Relative-File-path-with-image-available-in-a-folder-which-is-exactly-located-at-root-position-of-its-current-sub-folder">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/imghwm/default1.png" data-src="https://cdn.educba.com/images/flag.png?x-oss-process=image/resize,p_40" class="lazy" alt="Image demo "   style="max-width:90%">

輸出：

範例 #3

代碼：

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


<h2 id="Relative-File-Path">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 id="Relative-File-path-with-image-in-same-folder">Relative File path with image in same folder </h4>
<img  src="/static/imghwm/default1.png" data-src="images/EDUCBA.png" class="lazy"   style="max-width:90%" alt="HTML 中的檔案路徑" >
<h4 id="Relative-File-path-with-HTML-file-present-in-the-folder">Relative File path with HTML file present in the folder </h4>
<a href="index.html"> HTML file </a>
<h4 id="One-can-give-Style-path-through-Absolute-or-Relative-position-Here-we-are-using-relative-file-path">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>

輸出：

結論

從上述所有資訊中，我們意識到HTML檔案用於定義檔案或圖像在網站結構中實際儲存的位址或路徑。

該檔案路徑以兩種可能的方式顯示：絕對檔案路徑，另一種是相對檔案路徑，正如我們在上面的資訊中所看到的。

以上是HTML 中的檔案路徑的詳細內容。更多資訊請關注PHP中文網其他相關文章！