HTML 中的相对路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24028561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relative path in HTML
提问by Amir
I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).
我正在创建一个网站localhost。我想将我网站中的所有链接资源都设置为相对路径（我的意思是仅内部资源）。
website is located in
网站位于
http://localhost/mywebsite
I read this useful question Absolute vs relative URLs.
我阅读了这个有用的问题Absolute vs relative URLs。
I found differences between /images/example.pngand images/example.png
我发现了/images/example.png和之间的差异images/example.png
<a href="/images/example.png"> Link To Image</a>
<a href="/images/example.png"> Link To Image</a>
Above relative path should return ROOT_DOCUMENT/images/example.pngbecause of /at first of url. As ROOT_DOCUMENTis something like /wamp/www/mywebsite
上面的相对路径应该返回，ROOT_DOCUMENT/images/example.png因为/首先是 url。就像ROOT_DOCUMENT这样/wamp/www/mywebsite
But when I tested it, it only return /wamp/www/images/example.png
但是当我测试它时，它只会返回 /wamp/www/images/example.png
And I should add manually my website folder /mywebsite/images/example.pngto relative path.
我应该手动将我的网站文件夹添加/mywebsite/images/example.png到相对路径。
<a href="mywebsite/images/example.png"> Link To Image</a>
And it is not useful because of changing the name of mywebsite. So:
并且因为更改了 mywebsite 的名称而没有用。所以：
- Why does this problem occur?
- How can I resolve this problem?
- 为什么会出现这个问题？
- 我该如何解决这个问题？
回答by arielnmz
You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:
你说你的网站在http://localhost/mywebsite，假设你的图片在一个名为 的子文件夹中pictures/：
Absolute path
绝对路径
If you use an absolute path, /would point to the rootof the site, not the root of the document: localhostin your case. That's why you need to specify your document's folder in order to access the pictures folder:
如果使用绝对路径，/将指向根的的网站，而不是文档根：localhost你的情况。这就是为什么您需要指定文档的文件夹才能访问图片文件夹的原因：
"/mywebsite/pictures/picture.png"
And it would be the same as:
它与以下内容相同：
"http://localhost/mywebsite/pictures/picture.png"
Relative path
相对路径
A relative pathis always relativeto the rootof the document, so if your html is at the same levelof the directory, you'd need to start the path directly with your picture's directory name:
一个相对路径总是相对的根中的文件，所以如果你的HTML是在同级别的目录，你需要直接与您的图片的目录名开始的路径：
"pictures/picture.png"
But there are other perks with relative paths:
但是相对路径还有其他好处：
dot-slash (./)
点斜线 ( ./)
Dot(.) points to the same directory and the slash(/) gives accessto it:
点( .) 指向同一个目录，斜线( /)可以访问它：
So this:
所以这：
"pictures/picture.png"
Would be the same as this:
将与此相同：
"./pictures/picture.png"
Double-dot-slash (../)
双点斜线 ( ../)
In this case, a double dot (..) points to the upper directoryand likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:
在这种情况下，双点 ( ..) 指向上层目录，同样，斜线 ( /) 可让您访问它。因此，如果您想访问文档所在目录的上一级目录中的图片，您的 URL 将如下所示：
"../picture.png"
You can play around with them as much as you want, a little example would be this:
你可以随心所欲地玩它们，一个小例子是这样的：
Let's say you're on directory A, and you want to access directory X.
假设您在 directory 上A，并且想要访问 directory X。
- root
|- a
|- A
|- b
|- x
|- X
Your URL would look either:
您的 URL 将如下所示：
Absolute path
绝对路径
"/x/X/picture.png"
Or:
或者：
Relative path
相对路径
"./../x/X/picture.png"
回答by JakeGould
The easiest way to solve this in pure HTML is to use the <base href="…">element like so:
在纯 HTML 中解决这个问题的最简单方法是<base href="…">像这样使用元素：
<base href="http://localhost/mywebsite/" />
Then all of the URLs in your HTML can just be this:
那么 HTML 中的所有 URL 都可以是这样的：
<a href="images/example.png">Link To Image</a>
Just change the <base href="…">to match your server. The rest of the HTML paths will just fall in line and will be appended to that.
只需更改<base href="…">以匹配您的服务器。其余的 HTML 路径将对齐并附加到该路径。
回答by madamission
The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.
相对路径基于客户端的文档级别，即在浏览器中看到的文档的 URL 级别。
If the URL of your website is: http://www.example.com/mywebsite/then starting at the root level starts abovethe "mywebsite" folder path.
如果您网站的 URL 是：http://www.example.com/mywebsite/那么从根级别开始，从“mywebsite”文件夹路径上方开始。
