原创作品,未经许可不得转载
在前面的课程中,你已经学会了“绝对路径”和“相对路径”的用法。
“绝对路径”适合用于链接到外部的网页,“相对路径”适合用于在网站内部导航。
除了使用“相对路径”外,还有另外一种适合用于在网站内部导航的路径写法:全路径。
先来看看使用“相对路径”可能存在的问题。
假设你的网站有以下目录结构:
你的网站
|—— index.html
|—— courses
|—— html5.html
若要从html5.html
导航到index.html
,若使用相对路径的写法,则需像下面这样写链接:
<a href="../index.html">导航到index.html</a>
若将来某一天,你改变了html5.html
的位置,比如将它移动到了与index.html
同一个目录下,现在的目录结构是这样的:
你的网站
|—— index.html
|—— html5.html
|—— courses
这时,若在html5.html
中仍然使用之前的那个链接,则无法导航到index.html
,因为此时index.html
已不是html5.html
的上一级目录下的文件了,而是在同一个目录下。
因此,你需要将html5.html
中的那个链接修改为下面这样:
<a href="./index.html">导航到index.html</a>
接下来介绍一下使用“全路径”的书写方式,可避免这样的问题。
所谓“全路径”,是一种从网站的根目录开始一直写到最终文件名的书写方式。假设仍然有下面这样的目录结构:
你的网站
|—— index.html
|—— courses
|—— html5.html
若要从html5.html
导航到index.html
,若使用“全路径”的书写方式,则应该像下面这样写链接:
<a href="/index.html">导航到index.html</a>
注意,href
属性的值的最前面没有.
,也没有..
。而是以/
开始的,表示从网站的根目录开始。
/index.html
的意思是:根目录下的index.html
。
如果这样写的话,就算将来某一天你将html5.html
移动到了别的位置,比如移动到了与index.html
同级别的目录下:
你的网站
|—— index.html
|—— html5.html
|—— courses
此时你就不用修改html5.html
中的链接了,因为index.html
仍然是“网站根目录下的index.html”。
“全路径”实际上是“绝对路径”的另一种书写方式,但是不用写上域名。