html 页面资源路径,html中url路径请求的六种方式

html中url路径请求的六种方式：

无斜杠、

单斜杠(/)、

点+单斜杠(./)、

点点+单斜杠(../)、

多个点点+单斜杠(../../)、

全路径

图一：项目结构

图二：rootPath.html内容

我在做项目过程中路径写错，跳转不到目标页面，花了好长时间才发现原因，鉴于自己的惨痛经历，就把这几种url路径总结了一下，配上了我的具体项目结构图和详细源码。对于该问题，网上虽也有类似解答，但不是太全和说明不是太清楚。希望对大家有用，也欢迎大牛补充和批评和指正。

方式一：

没有斜杠，跳转到和自己(rootPath.html)同目录下的layout页面

方式二：

单斜杠加前有一点，跳转到和自己(rootPath.html)同目录下的layout页面

总结：方式一和方式二效果是相同的。

方式三：

单斜杠，跳转到整个网站根目录下的(如果是在本机测试，也就是

http://localhost:8080/，注意此路径不包括项目名，只到项目名的上一级，易错认为是到webapp目录，我是在这个地方出错了，花了好长时间才发现问题所在)

方式四：

两点加单斜杠，跳转到上一级目录

方式五：

多个两点加单斜杠连续用，每一次“../”往上跳转一级,有几个“

../”，就向上跳几级(ps:我以前错以为只能写一个“../”)

方式六：

全路径方法：路径+项目名+文件在wbapp下的位置，例如我的是：

http://localhost:8080/bos_management_web/demo/layout.html，

其中:bos_management_web为项目名，demo/layout.html为webapp下的位置

说明：

应该还有一种获得路径方式：var rootUrl="@Url.Content('~')";网上说是直接获得根路径，我暂时没研究透是什么意思，如果各位大牛有懂的，欢迎欢迎不吝赐教！

html中路径问题 ../ 和 ./ 和 /

./ 表示当前目录

../ 表示父级目录

/ 表示根目录

HTML 文件路径

路径

描述

picture.jpg 位于与当前网页相同的文件夹

picture.jpg 位于当前文件夹的 images 文件夹中

picture.jpg 当前站点根目录的 images 文件夹中

picture.jpg 位于当前文件夹的上一级文件夹中

html文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到：

网页

图像

样式表

JavaScript

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL：

实例

标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。

相对路径

相对路径指向了相对于当前页面的文件。

在本例中，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：

实例

在本例中，文件路径指向了位于当前文件夹中 images 文件夹里的一个文件：

实例

在本例中，文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件：

实例

好习惯

使用相对路径是个好习惯(如果可能)。

如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。