html路径小结

html路径小结

1.1概述
        HTML中的路径写法有两种分别是相对路径(Relative Path)和绝对路径(Absolute Path)。
1.2相对路径
定义：
        以当前文件所在位置为参考点，而建立出的目录路径。
实例：
        文件结构如下图：见图片附件图1-1
        eg1：使用相对路径在notice.html中加入info.html超链接。

<a href = "info.html" target="_blank">这是超连接</a>

        eg2：使用相对路径在info.html中加入index.html的超链接。

<a href = "../index.html" target="_blank">这是超连接</a>

        注意：“../”表示源文件所在目录的上一级目录；“../../”表示当前文件所在目录的上上级目录；“../../../”可以依次类推。
        eg3：使用相对路径在info.html中加入header.html的超链接。

<a href = "../html/header/header.html" target="_blank">这是超链接</a>

        eg4：使用相对路径在index.html中加入info.html的超链接。

<a href = "html/info.html" target="_blank">这是超连接1</a>
<a href = "./html/info.html" target="_blank">这是超连接2</a>
<a href = "/site/html/info.html" target="_blank">这是超连接3</a>

        注意：上述三种路径的引用效果是完全相同的，其中“./”表示当前目录，HTML中可以省略，“/” 代表根目录。
                引用下级目录中的文件，直接写下级目录文件的路径即可。
                使用根目录虽然便利，当然也有弊端，如果把网站移动到另一个目录中去就
        可能会导致错误，所以尽可能的少使用根目录。
1.3绝对路径
        以Web站点根目录为参考点的目录路径。绝对路径一般来说主要有两种形式：
1、完整的磁盘路径
        D:\mytest\web\images\pic.jpg是一个绝对路径，看到它就能够明确的找到图片所在磁盘的位置，不过在web中很少使用此种形式的绝对路径。
2、完整的url路径
        http://www.softwhy.com/images/pic.jpg也是一个绝对路径。其中域名会指向磁盘的一个目录，在本例中就是指向D:\mytest\web，那么一个带有域名的url地址也是一个绝对路径。
1.4总结
        对于一个网站而言，外部文件或图片的引用都是使用相对路径，几乎不用绝对路径。