你看我像不像学HTML的人（四）——路径（相对路径和绝对路径）

最新推荐文章于 2025-02-10 17:22:39 发布

原创最新推荐文章于 2025-02-10 17:22:39 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了文件管理中的目录文件夹和根目录概念，以及在HTML中如何使用相对路径和绝对路径来引用图像资源。通过实例展示了同一级、上一级、下一级路径的使用，并提供了代码示例。同时，解释了相对路径与绝对路径的区别。

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关的素材，比如html文件、图片等。如web文件夹。

根目录：打开目录文件夹的第一层就是根目录。

2. 路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时在查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：

（1）相对路径：以引用文件所在位置为参考基础，而建立出得目录路径。

简单来说，为图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像位于HTML文件同一级如<img src="helloworld.png" />
下一级路径	/	图像位于HTML文件下一级如<img src="images/helloworld.png" />
上一级路径	../	图像位于HTML文件上一级如<img src="../helloworld.png" />

相对路径是从代码所在的文件出发，去寻找目标文件的，而我们这里说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

如图所示，分别是上一级路径，下一级路径，同一级路径的使用方法。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>图像标签的使用</title>
</head>

<body>
    <h4>图像标签的使用：</h4>
    <!--同一级路径-->
    <img src="helloworld2.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
    <!--上一级路径-->
    <img src="../helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
    <!--下一级路径-->
    <img src="image/helloworld1.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
</body>

</html>

执行效果如下（三张图片都能展示）：

（2）绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，"D:\web\images\helloworld.png" 或者完整的网络地址"https://baidu.com/images/helloworld.png"

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--绝对路径填写一个固定网站的图片，找到图片，右键复制图片地址-->
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3848402655,92542552&fm=26&gp=0.jpg">
    <!--绝对路径填写本地磁盘下固定的图片路径，换到别的电脑上可能会失效-->
    <img src="D:\webworkspace\html\image\helloworld1.img">
</body>

</html>

（3）相对路径和绝对路径：相对路径的符号一般是朝左侧倾斜如 / 和 ../，绝对路径的符号一般是朝右侧倾斜，如D:\