相信上一节说到img图片标签你已经懂了，但是对于引入图片还是有些懵懵懂懂，那么对于图片在不同的位置怎么引入才对呢？

这里就涉及到两个概念，叫做相对路径和绝对路径。

我相信你一听到这两个词一定会懵！！

没关系，快来看看本章的内容。

绝对路径

绝对路径：固定的路径，死的路径

<img src="C:\Users\acer\Desktop\index\images\img\1.png" alt="图片路径移动">

首先，我们来看一下下面这个图片路径：这个路径会发现很完整，就像我们的家庭住址一样详细。这种就叫做绝对路径。

相对路径

相对路径：以自己为中心找东西的路径（自己 相对 物体）

    <img src=".\images\img\1.png" alt="图片路径移动">

用 “./” 代表 当前所在的位置
用 “../” 代表上一级路径（退出当前位置上去）

其实下面的这个是相对路径：（./给忽略）

<img src="3.png" />  等价于： <img src="./3.png" />
<img src="../frame/1.jpg" alt=""> 等价于 <img src="./../frame/1.jpg" alt="">

会发现相对路径就写得很简单，主要参考的是当前自己的位置去找图片！！

绝对路径和相对路径的对比（优缺点）：

绝对路径的优点：

直接明了，可以直接获取到图片

绝对路径缺点：

（1）图片移动，就会发现路径不对。
（2）如果文件打包发给别人，别人把源码放的位置不对可能获取不到图片

相对路径的优点：

以自己为中心，直接把文件和图片打包发给别人，图片不会找不到的问题

相对路径的缺点：

图片移动，就会发现路径不对。

需要注意的是： 要么是相对路径 要么是绝对路径

相对路径：`./`和`../`

下面是错的：

`./C:\Users\acer\Desktop\312\video\中国工商银行防电信诈骗 宣传视频  MG动画_超清.mp4`

代码示例：

<!-- 
    绝对路径:固定的路径
    不需要知道文件在哪个位置，直接拿路径过来用就行
    就像地址 是死，是固定 
-->
<img src="C:\Users\acer\Desktop\312\images\1.jpg" alt="图片加载失败">
<!-- 
    相对路径：需要确定自己（当前编辑的网页、文件）的位置
    从我们当前的位置开始找文件（想要的东西）
    记得两个符号：表示当前位置 ./    返回上一级目录 ../
    注意：不存在绝对路径 和 相对路径 一起使用的情况，只能二选一
 -->
 <!-- 可以这么写： -->
 <img src="images/1.jpg">
 <!-- 也可以这么写： -->
 <img src="./images/1.jpg" alt="">

视频源码参考：

    <!-- 绝对路径找图片的方法：它很像我们的家庭住址 （写死的路径） -->
    <!-- 还能找到这个图片吗？ -->
    <img src="C:\Users\琉忆\Desktop\img\1.png" alt="">
    <!-- 相对路径：（它需要找参考系来确定自己的位置） 你只要知道自己当前在哪就可以了 -->
    <!-- 表示从当前位置找图片，是可以直接用 文件夹名/图片找  或者 ./表示当前位置 -->
    <!-- 问题：返回上一个文件夹找图片，怎么办呢？ 返回上一级用的是 ../  -->
    <!-- 我们一般会用相对路径比较多，原因是因为我们一般打包发代码过去给用户时，图片也是放在一起的，这时候我们不知道用户会解压图片到哪个文件夹里面，
    如果说放的文件夹跟图片的绝对路径一样，图片可以正常显示，但是如果不对，肯定不会显示！！！ -->
    <img src="../img/1.png" alt="">

不知道看完你是否已经清晰明了了两者的区别。快去试试吧！
如果还是不懂没关系，可以看视频讲解。如果视频讲解还是不懂就去提问吧！
这节内容真的很重要。

实践题：请分别使用绝对路径和相对路径的显示方法，对图片进行显示：
效果图如下：

参考代码：

    <h4>
        <a href="">71慕课网-一个为新手学编程准备的网站</a>
    </h4>
    <!-- 下面的这个路径 是绝对路径 还是 相对路径呢？？？ -->
    <!-- 它叫做相对路径 -->
    <img src="./12.jfif" alt="图片不显示时，我出来">
    <img src="C:\Users\琉忆\Desktop\test\12.jfif" alt="图片不显示时，我出来">
    帮助每个新人从零开始学习编程。提供了编程学习课程,编程教程,编程博客和相关练习题。如果你是第一次学习编程或者正在学习编程的时间,那么这个网站会很适合你。你可以在这里获取全部跟编程相关的...