HTML基础课程登入/注册
在小屏设备上仅提供基本的浏览功能
请使用电脑打开此网页,体验更多强大功能

全路径

原创作品,未经许可不得转载
在前面的课程中,你已经学会了“绝对路径”和“相对路径”的用法。
“绝对路径”适合用于链接到外部的网页,“相对路径”适合用于在网站内部导航。
除了使用“相对路径”外,还有另外一种适合用于在网站内部导航的路径写法:全路径
先来看看使用“相对路径”可能存在的问题。
假设你的网站有以下目录结构:

你的网站
    |—— 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”。
“全路径”实际上是“绝对路径”的另一种书写方式,但是不用写上域名。
练习
20/22
http://localhost/