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中文网其他相关文章！