181

有没有办法让页面上的所有链接都相对于根目录？

例如，www.example.com/fruits/apples/apple.html我可以有一个链接说：

<a href="fruits/index.html">Back to Fruits List</a>

这个链接会指向www.example.com/fruits/apples/fruits/index.html或www.example.com/fruits/index.html吗？如果是第一个，有没有办法让它指向第二个？

4

7 回答 7

326

相对于根的 URL 以/字符开头，看起来像<a href="/directoryInRoot/fileName.html">link text</a>.

您发布的链接：<a href="fruits/index.html">Back to Fruits List</a>链接到位于名为fruits的目录中的 html 文件，该目录与出现此链接的 html 页面位于同一目录中。

要使其成为根相对 URL，请将其更改为：

<a href="/fruits/index.html">Back to Fruits List</a>

针对来自 OP 的评论中的问题进行编辑：

这样做 / 会使它相对于 www.example.com，有没有办法指定根是什么，例如，如果我希望根在 www.example.com/fruits/ 中是 www.example.com/fruits 怎么办苹果/apple.html？

是的，在href或src属性中的 URL 前面加上 a/将使路径相对于根目录。例如，给定 html 页面www.example.com/fruits/apples.html，a的href="/vegetables/carrots.html"将链接到该页面www.example.com/vegetables/carrots.html。

basetag元素允许您为该页面指定 base-uri（尽管必须将标签base添加到需要使用特定基础的每个页面，为此我将简单地引用 W3 的示例：

例如，给定以下 BASE 声明和 A 声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Our Products</TITLE>
   <BASE href="http://www.aviary.com/products/intro.html">
 </HEAD>

 <BODY>
   <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
 </BODY>
</HTML>

相对 URI "../cages/birds.gif" 将解析为：

http://www.aviary.com/cages/birds.gif

引用自：http://www.w3.org/TR/html401/struct/links.html#h-12.4 的示例。

推荐阅读：

于 2011-04-05T23:04:10.243 回答
21

利用

<a href="/fruits/index.html">Back to Fruits List</a>

或者

<a href="../index.html">Back to Fruits List</a>
于 2011-04-05T23:04:07.783 回答
5

如果您从ASP.NET 应用程序的服务器端创建URL ，并将您的网站部署到您网站中的虚拟目录（例如 app2），即 http://www.yourwebsite.com/app2/

然后只需插入

<base href="~/" />

就在标题标签之后。

所以每当你使用root relative，例如

<a href="/Accounts/Login"/>

将解析为“ http://www.yourwebsite.com/app2/Accounts/Login ”

这样，您始终可以相对绝对地指向您的文件；）

对我来说，这是最灵活的解决方案。

于 2014-10-10T07:05:00.787 回答
3 
<a href="/fruits/index.html">Back to Fruits List</a>
于 2011-04-05T23:04:30.543 回答
1

为图像标签提供 URL，该标签位于images/根目录中，例如

`logo.png`

您应该提供以下src开头的 URL /：

<img src="/images/logo.png"/>

此代码在任何目录中都可以正常工作，即使您branches/europe/about.php仍然可以在那里看到徽标。

于 2017-01-12T11:13:07.227 回答
0

相对路径汇总（适用于href、src等）：

/file_Or_FolderName          Root directory
./file_Or_FolderName         Current directory
../file_Or_FolderName        Previous directory (One level up)
../../file_Or_FolderName     Previous of previous directory (Two levels up)
../../../file_Or_FolderName  Just like above - Three levels up

例子：

www.example.com
    ├── apple.html
    └── FolderA
        ├── fileA.html
        └── FolderB
            ├── fileB.html
            └── FolderC
                ├── fileC.html
                └── FolderD       <------ Suppose you're here (current directory)
                    ├── fileD.html
                    └── FolderE
                        └── fileE.html

下面展示如何使用相对路径（适用于 href、src 等）访问不同级别的文件

fileD.html                 - same level access(or)
./fileD.html               - same level
./FolderE/fileE.html       - 1 level Down
../fileC.html              - 1 level Up
../../fileB.html           - 2 levels Up
../../../fileA.html        - 3 levels Up
../../../../apple.html     - 4 levels Up (or)
/apple.html                - 4 levels Up but direcly using root /
于 2021-07-29T16:05:54.103 回答
-2

将此代码“./”用作服务器上的根，因为它适用于我

<a href="./fruits/index.html">Back to Fruits List</a>

但是当您在本地计算机上时，请使用以下代码“../”作为根相对路径

<a href="../fruits/index.html">Back to Fruits List</a>
于 2017-08-29T19:24:23.670 回答