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

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

1. 无斜杠、
2. 单斜杠（/）、
3. 点+单斜杠（./）、
4. 点点+单斜杠（../）、
5. 多个点点+单斜杠（../../）、
6. 全路径

图一：项目结构
图二：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：
实例

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

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

相对路径

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

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

<img src="/images/picture.jpg" alt="flower">

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

<img src="images/picture.jpg" alt="flower">

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

<img src="../images/picture.jpg" alt="flower">

好习惯

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

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