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

短命女 2021-07-04 23:54 457阅读 0赞

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

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

![在这里插入图片描述][20190907224608377.png]  
图一：项目结构  
![在这里插入图片描述][20190907224758497.png]图二：`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 文件路径 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">路径</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>&lt;img src="picture.jpg"&gt;</code></td> 
   <td align="left">picture.jpg 位于与当前网页相同的文件夹</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;img src="images/picture.jpg"&gt;</code></td> 
   <td align="left">picture.jpg 位于当前文件夹的 images 文件夹中</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;img src="/images/picture.jpg"&gt;</code></td> 
   <td align="left">picture.jpg 当前站点根目录的 images 文件夹中</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;img src="../picture.jpg"&gt;</code></td> 
   <td align="left">picture.jpg 位于当前文件夹的上一级文件夹中</td> 
  </tr> 
 </tbody> 
</table>

### `html`文件路径 ###

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

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

*  网页
 *  图像
 *  样式表
 *  JavaScript

### 绝对文件路径 ###

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

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

### 相对路径 ###

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

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

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

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

### 好习惯 ###

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

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

[20190907224608377.png]: /images/20210704/907d0eba291a41f19920482d74f4f1e0.png
[20190907224758497.png]: /images/20210704/c3b8640987364bae9fcb7fb6f7e757e6.png