详解HTML的相对路径写法,详解URL相对路径的写法

虽然现在搭网站都会用各种框架，路径方面使用相对路径可能已经比较少了，不过还是总结一下吧。

假设D盘这个路径下有一些文件：

D:\例子\html\images\

D:\例子\html\style\

D:\例子\html\example.html

D:\例子\html\tupian.gif

1.若引用的资源和本身在同一路径下(既在同一目录下)

在example.html中引用tupian.gif

相对路径：

绝对路径：

绝对路径没啥可说的，都差不多，下面只说相对路径。

2 要引用的文件在下一级文件夹下，文件名前加子文件夹名称

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超链接的href应该这样写：

3 要引用的文件在上一级文件夹下，文件名前加../

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

举一反三： ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推

4 更复杂的情况：

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\html\index.html

在info.html加入index.html超链接的代码应该这样写：index.html

5.最后一个例子

假设路径：D:\例子\html\style\view\pop.css

D:\例子\html\images\view\tupian.gif

在css中引用这个图片：

以上关于url相对路径的文字来自https://blog.csdn.net/lanzhiqi/article/details/49979629，略有整理。