HTML 文件路径

IT 文章1周前更新小编

0 0 0

HTML 文件路径用于描述网站文件夹中文件的位置。文件路径就像是网页浏览器的文件地址。我们可以使用文件路径来链接任何外部资源，例如图片、文件、CSS 文件、JS 文件、视频等，以添加到我们的 HTML 文件中。

src 或 href 属性需要一个属性来将任何外部资源链接到 HTML 文件中。

以下是不同类型的指定文件路径的方法：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

<img src=”picture.jpg”> 这指定了 picture.jpg 位于与当前页面相同的文件夹中。
<img src=”images/picture.jpg”> 这指定了 picture.jpg 位于当前文件夹中的 images 文件夹中。
<img src=”/images/picture.jpg”> 这指定了 picture.jpg 位于当前网站的根目录中的 images 文件夹中。
<img src=”../picture.jpg”> 这指定了 picture.jpg 位于当前文件夹的上一级文件夹中。

文件路径用于在网页上链接外部文件，例如：

网页
图片
样式表
JavaScript

有两种文件路径：

绝对文件路径
相对文件路径

绝对文件路径

绝对文件路径指定完整的 URL 地址。

示例：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Full URL File Path</h2>  
<img src="https://www.javatpoint.com/images/nature-1.jpg" alt="image" style="width:300px">  
</body>  
</html>

相对文件路径

相对文件路径指定与当前页面位置相关的文件。

示例1：

让我们举一个例子，看看文件路径如何指向位于当前网站根目录中的 images 文件夹中的文件。

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Relative File Path</h2>  
<img src="/images/nature-2.jpg" alt="Mountain" style="width:300px">  
</body>  
</html>

示例2：

这是文件路径指向位于当前文件夹中的 images 文件夹中的文件的方式。

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Relative File Path</h2>  
<img src="images/nature-3.jpg" alt="Mountain" style="width:300px">  
</body>  
</html>

示例3：

当 images 文件夹位于当前文件夹的上一级文件夹中时。

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Relative File Path</h2>  
<img src="../images/nature4.jpg" alt="Mountain" style="width:300px">  
</body>  
</html>