经常在页面中引用图片,html页面等,自己常常弄错相对路径和绝对路径,今天写下此文总结一下。
直接举例说明吧。
在 D:例子html下有这么几个文件和文件夹
1.若引用的资源和本身在同一路径下(既在同一目录下)
在example.html中引用tupian.gif
相对路径:<img src="tupian.gif" border="0"/>
绝对路径:<img src="d:/例子/html/tupian.gif" border="0"/>
绝对的都差不多,只说相对路径。
2 要引用的文件在下一级文件夹下,文件名前加子文件夹名称
假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsiteslablahtml utorialsindex.html
在info.html加入index.html超链接的href应该这样写:html/tutorials/index.html
3 要引用的文件在上一级文件夹下,文件名前加../
假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsitesindex.html
在info.html加入index.html超链接的代码应该这样写:
<a href="../index.html">index.html</a>
举一反三: ../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推
4 更复杂的情况:
假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html
假设index.html路径是:c:Inetpubwwwrootsiteshtmlindex.html
在info.html加入index.html超链接的代码应该这样写:<a href="../html/index.html">index.html</a>
5.最后一个例子
假设路径:D:例子htmlstyleviewpop.css
D:例子htmlimagesview upian.gif
在css中引用这个图片:<img src="../../images/view/tupian.gif" border="0"/>
URL中/开头的含义:
<a href="/error/error.jsp">跳转</a>
?之前对这个问题也有疑惑,没有深究,今天看到自然另外记录下来。
由"/"开头的是环境相对地址,也就是程序会从环境(服务器)根目录开始查找。
而没有"/"开头的则是请求相对地址,也就是程序会从发起请求的路径开始查找。
最常见的例子就是WebContent下的页面跳转
假设项目test目录如下
WebContent????????? //根目录
----jsp????????????????????//一级子目录
--------index.jsp
--------error??????????? //二级子目录
-------------error.jsp
----error???????????????? //一级子目录
--------error.jsp
?
此时如果在index.jsp中跳转
<a href="error/error.jsp">跳转</a>
?则会跳到二级子目录error中的error.jsp中,实际访问路径如下
????http://localhost:8080/test/jsp/error/error.jsp
?
如果跳转url如下
<a href="/error/error.jsp">跳转</a>
?则会提示无法找到对应文件,实际访问路径如下
??? http://localhost:8080/error/error.jsp
可以看出环境相对地址指的是服务器下的环境并不是同一Web应用环境,具体会不会有编程平台的差异或者不同方式的跳转会有不同不知道,实验环境是:eclipse Java ee +tomcat7.0
?
所以如果想要访问一级目录下的error文件夹中的error.jsp正确的url跳转应该如下
<a href="/test/error/error.jsp">跳转</a>
?实际访问路径如下
??? http://localhost:8080/test/error/error.jsp
此时正确访问。
也就是说有“/”:环境(服务器)根目录开始查找
没有时:程序会从发起请求的路径(Web应用目录)开始查找。