网页中的路径问题(转载加个人理解)

总有人搞不清楚网页中路径到底是怎么写的，现在总结一下：

网页中设置路径有两种，一种是绝对路径，一种是相对路径。

一. 绝对路径

1. 写成＂http://images.cnblogs.com/aaa.jpg＂, 类似这样比较容易理解，直接到相应的地址去找这个文件就行。

2. 还有一种就是直接写成＂/images/aaa.jpg＂, 这表示基于根目录去找这个文件。这个只能放到web服务器上时用。

也就是说，如果是在本地文件夹中，直接打开相应的网页文件时，是找不到这个图像文件的。

如果在Web服务器上时，使用相应的URL访问时，实际上是表示http://www.cnblogs.com/下面的images目录下的文件。

使用根目录来表示路径时，好处是当网页文件在好几层子目录中时，直接用＂/＂来表示根目录要简单一些，比写成“../../../../images/aaa.jpg”这样的路径要好多了。但是不好的地方，就是如果不放到服务器上，是找不到文件的。

二. 相对路径

相对路径总是基于当前文件所在路径为基点开始算起的。这与放不放到Web服务器上没有关系。

比方说：有以下路径文件，当然，这里只链接图像文件，对于链接css文件，js文件都是一样的。

--works

  ----Images

        ----aaa.jpg

  ----Pages

        ----bbb.html

  ----ccc.jpg

  ----ddd.html

works中有两个目录，两个文件，两个目录中各有一处文件。

1. 同级目录。直接写就行，不需要写目录信息。

    如 ddd.html 文件中有一个 img 标签，直接写成 <img src=”ccc.jpg” /> 就可以了。

2. 下级目录。直接写目录名加文件名就行。

    如 ddd.html 文件中，要访问 Images 目录下的aaa.jpg文件。写成 <img src=”Images/aaa.jpg” />。

    如果还有下下下下层目录，那就 <img src=”Images/xxx/xxx/xxx/xxx/aaa.jpg” />.

3. 父级目录。在目录名前加”..”就行。

    如 bbb.html 文件中，要访问 Works 目录下的ccc.jpg文件。写成 <img src=”../ccc.jpg” />。

    如果要访问Images目录下的aaa.jpg文件，写成 <img src=”../Images/aaa.jpg” />。

    如果要访问上上上上层目录时，写成 <img src=”../../../../../aaa.jpg” />。

三. css中的路径问题

现在做网页时，很多情况下，都是通过css文件中设置元素的背景图等。这时，在css中指定背景图像文件的时候，

也需要指定路径，这个路径其实与上面是一样的。只是基于css文件所在的路径。如以下目录结构：

--works

  ----Images

        ----aaa.jpg

  ----css

        ----bbb.css

  ----ccc.html

比方说，ccc.html文件中要链接bbb.css文件, 而bbb.css文件中需要指定相应元素的背景图在Images目录中的aaa.jpg。

这样写：

ccc.html中：<link href=”../css/bbb.css” type=”text/css” ref=”stylesheet” />

bbb.css中：.title { background: transparent url(../Images/aaa.jpg) no-repeat; }

明白了吗，这个路径是基于css文件所在目录来查找的。所以需要路径前加上”../”, 而不能直接写 “Images/aaa.jpg”.

以上内容转载自：http://www.cnblogs.com/chukaren/archive/2010/01/18/1651034.html

个人见解：以“/”开头的路径（相对路径）是服务器的根路径,例如tomcat的http://localhost:8080，而如果你自己创建的项目里面有语句是<img alt="" src="/image/tomcat.gif"/>在你的html代码里面显示图片的话，而且图片还可以正常显示的话，那么就需要检查一下是不是在tomcat里面的webapps文件夹下的root文件下有image文件夹，且里面有tomcat.gif文件。

而<img alt="" src="image/tomcat.gif"/>是与Html文件同级的image文件夹下的tomcat.gif图片文件。

如果想以“/”开头，不加载root文件夹而是自己项目的资源的话，可以这么用：<img alt="路径下的图片显示" src="/../Test/image/tomcat.gif"/>