3.3　关于路径

路径属性在HTML的很多标签中都能见到，比如＜img＞元素的src属性是图片的存放路径，＜a＞元素的href属性的值是一个跳转到目标资源的路径。除此之外，还有音频和视频等标签也具有路径属性，如果路径错误，那么就会导致图片、视频等内容无法正常显示，可见路径的重要性。

3.3.1　路径大考验

路径一般分为绝对路径和相对路径，本地计算机中的绝对路径如下：D：\project1\imgs\logo.png，相对路径是指与当前操作文件的相对位置，以图3.5中的文件目录层级为例，所有文件存储在D盘，X是一个站点的根目录，请先花几分钟自行尝试填空，然后参考后面的答案。

特别说明：在HTML中，路径中不同层级的目录分割符是/，而不是系统默认的\，因此，为了适应HTML的用法，参考答案都采用/。关于文件目录的路径，D盘经常被称为盘符，X是D盘下的一级目录，而data文件夹和js文件夹则是二级目录，其余文件夹依次类推。

（1）请写出与index.html文件同级的两个绝对路径。

（2）如果你现在正在编辑index.html代码，需要引入index文件夹下的getFloor1.php文件，相对路径应该怎么写？

（3）如果你现在正在编辑login.js代码，需要引入data文件夹下的init.php，怎么写路径？请用/隔开。

（4）如果你正在编辑login.php，想要发送数据给login.html，请问你的路径要怎么写？请用/隔开。

参考答案

（1）答案是：D：/X/data、D：/X/js

解答：因为是index.html和data文件夹，js文件夹都属于根目录X文件夹的下一级，所以它们对应的路径为D:/X/index.html，D：/X/data和D：/X/js。

（2）答案是：data/index/getFloor1.php

解答：由于index.html和data属于根目录X文件夹下的同一级，即D：\X，因此相对路径只需沿着当前目录，就可以直接查找到data，进而向下查找到目标文件。

（3）答案是：../data/init.php

解答：这一题稍有难度，由于login.js文件和目标文件都处于三级目录，但是不在同一个二级目录下。前者在Windows系统中的绝对路径是D：\X\js，而后者是D：\X\data，不难看出它们的二级目录是不一致的，但是它们的一级目录都是根目录\X，因此，需要先返回到上一级X目录，然后再沿着二级data目录下寻找目标文件init.php。这里就需要用到“..”去返回上一级。

（4）答案是：../../login.html

解答：login.php在Windows系统中的目录是D：\X\data\users，而login.html所在目录是D：\X，可以知道login.php文件的目录层级比较深；因此，需要先返回到上一级data目录，然后再返回上一级到X目录，最后在X目录下找到login.html。

建议路径最多就用到三级深度，../返回上一级，../../../返回上三级，因为再多的话，自己都乱了。还有一种是网络路径，也就是网址，如果你想引用网络资源，也要用到它的地址。比如一张网络图片，你可以右击图片然后选择复制文件路径，得到它的网址，就可以在你的网页中正确显示。

3.3.2　相对路径法则

在实际应用中，相对路径使用得更多，因此你必须要掌握。这里我们来总结一下相对路径的用法，要点是找到与当前目标文件同级的目录。一般来说，当前文件和目标文件所在的目录关系存在以下三种情况：

（1）二者在同一级目录，则直接给出文件名就是相对路径；

（2）如果目标文件所在的目录在当前文件目录的上一级，则查看离二者最近的同一级差多少级，差多少级就添加多少个“../”，直到找到相同的父级，则停止添加，并在最后一个“../”后面列出目标文件名即可；

（3）如果目标文件在当前文件的下级，相对路径则为“子级目录/目标文件名”。