有相对于​​根的链接吗?


161

有没有一种方法可以使页面上的所有链接都相对于根目录?

例如,在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?如果是第一个,有没有办法让它指向第二个呢?

Answers:


293

根目录相对的URL以/字符开头,看起来像<a href="https://stackoverflow.com/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,该怎么办? apples / apple.html?

是的,在hrefsrc属性中以开头的URL /将构成相对于根目录的路径。例如,给定html页面www.example.com/fruits/apples.htmlaof href="https://stackoverflow.com/vegetables/carrots.html"将会链接到page www.example.com/vegetables/carrots.html

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

建议阅读:


1
这样做/会使它相对于www.example.com,是否有一种方法可以指定根是什么,例如,如果我希望根www.example.com/fruits在其中www.example.com/fruits/apples/apple.html呢?
点击Upvote

1
有没有办法动态找到它?在.NET中类似〜的东西?如果在每个环境中您使用不同的文件夹名称,将会发生什么?
Kremena Lalova

21

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

要么

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

1
../path 有效,但是/ path在Expression Web中不适用于我,它在CSS文件中使用它。(文件位于/ Directory 和引用 / DifferentDirectory
Clay Nichols

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

3

如果要创建从该URL 服务器端的的ASP.NET应用程序,并部署你的网站,一个虚拟目录在您的网站(如应用2)即 http://www.yourwebsite.com/app2/

然后插入

<base href="~/" />

在标题标签之后。

所以每当你使用root相对

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

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

这样,您始终可以相对绝对地指向您的文件;)

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


2
您的答案根本行不通。“波浪号斜杠”在ASP.NET解决方案的服务器端起作用。这个问题与服务器端ASP.NET解决方案无关。
2014年

1
我看到了您的理论,但它确实起作用了(无论是在实践上还是在理论上),在生成HTML时,服务器都会用应用程序的根目录替换“波浪号斜杠”。你先试过了吗?
A-Majeed 2014年

我当然试过了。Web服务器不能用应用程序的根目录代替代字号斜杠。只有ASP.NET应用程序才能执行此操作。在其他环境中,没有诸如“应用程序”的概念。
Anders Tornblad 2014年

不,我不必说我不使用ASP.NET。您做出了该假设,但未在答案中提及该假设。另外,该问题未提及任何有关服务器运行时环境的内容,因此您不应假定该问题与ASP.NET有关。如果您对StackOverflow给出了答案,请确保您回答的是问题-而非其他问题。另外,我直接说这个问题与服务器端ASP.NET解决方案无关。
2014年

当我从javascript呈现链接时为我工作
Balaji Birajdar

0

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

`logo.png`

您应提供以以下内容src开头的网址/

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

该代码可以在任何目录中正常工作,即使您branches/europe/about.php仍然在其中也可以看到徽标,也不会遇到任何麻烦。


0

使用此代码“ ./”作为服务器上的根,因为它对我有用

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

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

<a href="../fruits/index.html">Back to Fruits List</a>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.