文件资源路径（相对路径和绝对路径）

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

【./是当前，可以省略】

路径分类	符号	说明
同一级路径		只需输入图像文件的名称即可，如<img src="baidu.gif" />。
下一级路径	“/”	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如<img src="images/baidu.gif" />。
上一级路径	“../”	在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推， 如<img src="../baidu.gif" />。

2. 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

        一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

注意：它的写法 特别是符号 \ 并不是 相对路径的 /

3. 小结

• 相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。
• 相对路径是从当前操作的 html 文档所在目录算起的路径
• 绝对 路径是从根目录算起的路径