本文主要是介绍你看我像不像学HTML的人（四）——路径（相对路径和绝对路径），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. 目录文件夹和根目录
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关的素材，比如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:\
这篇关于你看我像不像学HTML的人（四）——路径（相对路径和绝对路径）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
