从上一节学习中我们得知，如果想要显示一张图片，就必须设置该图片的路径（即图片地址）。也就是说，我们必须要设置img标签的src属性。道理很简单，就像你找一个文件，也得知道它在哪里才能找得着，对吧？
路径，往往也是初学者最困惑的知识之一。在HTML中，路径分为两种：绝对路径和相对路径。
首先我们使用HBuilder在D盘目录下建立一个网站，网站名为“website”，其目录结构如下图所示。如果小伙伴们还不会用HBuilder，在网上搜索一下使用教程即可，很简单。
图1 网站目录
接下来，我们用page1.html和page2.html这两个页面分别去引用img文件夹中图片haizei.png，从而多方面地来认识相对路径和绝对路径的区别。
一、page1.html引用图片
1．绝对路径
<img src="D:/website/img/haizei.png" />
绝对路径，指的是图片在你的电脑中的完整路径。平常我们用电脑都知道，文件夹上方会有一个路径，其实这个就是绝对路径，如下图所示。
图2 电脑中的绝对路径
2．相对路径
<img src="img/haizei.png" />
所谓的相对路径，指的是图片相对当前页面的位置（好好琢磨这句话）。
从图1中可以看出，page1.html与img文件夹位于同一层目录中，两者是兄弟关系。然后haizei.png位于img文件夹目录下，这两个是父子关系。因此，正确的相对路径应该是”img/haizei.png”。
有些小伙伴就会问了，在下图3中，如果page1.html想要引用haizei.png这张图片，那么相对路径该怎么写呢？
图3 网站目录
由于此时page1.html与haizei.png位于同一级目录中，也就是兄弟关系。正确的写法如下所示。
<img src="haizei.png" />
二、page2.html引用图片
1．绝对路径
<img src="D:/website/img/haizei.png" />
回到图7-6中，“page1.html引用haizei.png”跟“page2.html引用haizei.png”，两者的绝对路径写法是一样的。实际上，只要你的图片没有移动到其他地方，所有页面引用该图片的绝对路径都是一样的。这个道理很简单，小伙伴们稍微想一下就懂了。
2．相对路径
<img src="../img/haizei.png" />
从图1可以知道，page2.html位于test文件夹下，haizei.png位于img文件夹下，而test文件夹与img文件夹处于同一层目录（兄弟关系）。也就是说haizei.png位于page2.html的上一级目录中的img文件夹下，因此src为“../img/haizei.png”。其中“../”表示上一级目录，我们要记住这种写法。
那么在图4中，如果page2.html想要引用haizei.png这张图片，那相对路径应该怎么写呢？
图4 网站目录
由于此时haizei.png与test文件夹位于同一级目录中，我们只需要找到page2.html的上一级，就可以找到haizei.png了。正确的写法如下所示。
<img src="../haizei.png" />
至此，两种路径方式差不多介绍完了。最后还有最重要的一点要跟大家说明一下的：在实际开发中，站内文件不管是图片还是超链接等，我们都是使用相对路径，几乎不会使用绝对路径。
这是因为如果采用绝对路径，你网站文件一旦移动，则所有的路径都可能会失效。因此，小伙伴们只需要掌握相对路径，而绝对路径了解一下就行。
常见问题：
1、这是因为如果采用绝对路径，你网站文件一旦移动，则所有的路径都可能会失效。因此，小伙伴们只需要掌握相对路径，而绝对路径了解一下就行。
当我们使用绝对路径时，很多编辑器往往都不能把图片的路径解析出来，因此图片无法在网页中显示出来。在真正的网站开发中，对于图片或者引用文件的路径，我们100%都是使用相对路径的。因此，大家不必纠结绝对路径问题，只需要掌握相对路径的写法即可。
2、对于图片或文件，可以使用中文名吗？
不建议使用中文，因为很多服务器是英文操作系统，不能对中文文件名提供很好的支持。所以不管是图片还是文件夹，都建议使用英文名字。
3、作为初学者，我老是忘记路径怎么写，该怎么办呢？
HBuilder会自动提示，然后选中想要的图片，就会自动帮我们填上正确的路径，如下图所示。初学时可以使用HBuilder自动提示，但是后面我们一定要慢慢熟悉这些路径是怎么写的。
图5 HBuilder自动补全
