html文件路径和目录语法知识

html文件路径如何正确引用，对于刚接触到html的初学者来说很重要。如果不能正确的引用路径，网页或图片链接地址就会出错，甚至打不开。为了避免这些错误而正确的使用路径，需要学习并掌握html路径的方法及目录语法。

HTML有2种路径方法：相对路径和绝对路径。

(1)绝对路径

假如我们在E盘/绝对路径/html/code建两个源文件index.html和link.html，在index.html里引用link.html文件作为超链接。

那么文件的绝对路径就是如下：

index.html路径就是：file:E:/绝对路径/html/code/index.html

link.html路径就是：file:E:/绝对路径/html/code/link.html

在index.html链接link.html的代码应该这样写：

<a href = “file://E:绝对路径/html/code/link.html”>link.html</a>

其实，我们先应该在link.html文件里写点东西的，比如：“我是绝对路径”几个字，然后在浏览器中打开，点击link.htm超链接就会打开“我是绝对路径”几个字了。

如果把code文件夹移动到D盘，再打开浏览器点击link.html超链接，我们发现找不到“我是绝对路径”这几个字了。因为这个时候会看到浏览器还是file://E:绝对路径/html/code/link.html这个路径，而我们已经把code文件夹移到D盘了，E盘里没有code文件了，所以“我是绝对径”这几个字找不到了。如果把code文件夹再移动到原来的地方，又能正常工作了。所以这种方法有一个问题，当整个文件目录移动到其他的磁盘符时，目录结构发生发生变化，链接就失效了。

(2)相对路径

我们还是利用E磁盘，把“绝对路径”文件夹改成“相对路径”并把index.html源文件里的“我是绝对路径”改成“我是相对路径”几个字，那么文件的路径是：

index.html路径就是：file:E:/相对路径/html/code/index.html

link.html路径就是：file:E:/相对路径/html/code/link.html

在index.html链接link.html的文件可以直接写：

<a href = “link.html”>link.html</a>

打开浏览器点击link.html超链接可以看到“我是相对路径”这几个字，并且浏览器的地址栏会显示file:E:/相对路径/html/code/link.html整个路径目录，也就是说它能识别当前的路径并转换为绝对路径。

假如我们把code文件夹移动到D盘，然后打开浏览器，点击link.html超链接会看到“我是相对路径”几个字，并且浏览器地址栏会显示当前file:D:/code/link.html路径。

因此我们可以看出相对路径的条件是文件包括里面的代码必须都在一个磁盘或者目录下，当在同一个目录下，那直接链接的就是link.html文件。当在同一个主目录下且有多个子目录时，就要使用目录结构法。

(3)目录语法

①同一个目录：link.html或者./link.html;

②在子目录：子文件夹/link.html

③在孙子目录：子文件夹/孙子文件夹/link.html

④在父目录：../link.html

⑤在爷爷目录：../../link.html

⑥在根目录：/link.html

在同一个目录中我们已经实现了，下面在子目录进行操作。当我们在code里新建个“子文件夹”并把link.html移动到里面去，打开浏览器点击超链接会找不到文件。然后代码写成<a href = “子文件/link.html”>link.html</a>这样又能打开了。同理在孙子目录也是这样，依次类推。

在父目录中，我们就是把link.html移动到code文件的上一层文件夹中去，然后把代码改成<a href = “../link.html”>link.html</a>就可以了。同理爷爷目录也是这样，依次类推。