Html 绝对与相对 URL

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2005079/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:46:18  来源:igfitidea点击:

Absolute vs relative URLs

htmlurl

提问by Haim Evgi

I would like to know the differences between these two types of URLs: relative URLs (for pictures, CSS files, JS files, etc.) and absolute URLs.

我想知道这两种URL的区别:相对URL(用于图片、CSS文件、JS文件等)和绝对URL。

In addition, which one is better to use?

另外,用哪一种比较好?

采纳答案by Daniel Vassallo

In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.

通常,使用相对 URL 被认为是最佳实践,这样您的网站就不会绑定到当前部署位置的基本 URL。例如,它将能够在 localhost 以及您的公共域上工作,而无需修改。

回答by PeeHaa

Should I use absolute or relative URLs?

我应该使用绝对 URL 还是相对 URL?

If by absolute URLs you mean URLs including scheme (e.g. http / https) and the hostname (e.g. yourdomain.com) don't ever do that (for local resources) because it will be terrible to maintain and debug.

如果绝对 URL 是指包含方案(例如 http / https)和主机名(例如 yourdomain.com)的 URL,则永远不要这样做(对于本地资源),因为维护和调试会很糟糕。

Let's say you have used absolute URL everywhere in your code like <img src="http://yourdomain.com/images/example.png">. Now what will happen when you are going to:

假设您在代码中的任何地方都使用了绝对 URL,例如<img src="http://yourdomain.com/images/example.png">. 现在,当您要执行以下操作时会发生什么:

  • switch to another scheme (e.g. http -> https)
  • switch domain names (test.yourdomain.com -> yourdomain.com)
  • 切换到另一个方案(例如 http -> https)
  • 切换域名(test.yourdomain.com -> yourdomain.com)

In the first example what will happen is that you will get warnings about unsafe content being requested on the page. Because all your URLs are hardcoded to use http(://yourdomain.com/images/example.png). And when running your pages over http the browser expects all resources to be loaded over https to prevent leaking of information.

在第一个示例中,您将收到有关页面上请求的不安全内容的警告。因为您的所有 URL 都经过硬编码以使用 http(://yourdomain.com/images/example.png)。当通过 http 运行页面时,浏览器希望所有资源都通过 https 加载,以防止信息泄露。

In the second example when putting your site live from the test environment it would mean all resources are still pointing to your test domain instead of your live domain.

在第二个示例中,当将您的站点从测试环境中上线时,这意味着所有资源仍指向您的测试域而不是您的实时域。

So to answer your question about whether to use absolute or relative URLs: always use relative URLs (for local resources).

因此,要回答关于使用绝对 URL 还是相对 URL 的问题:始终使用相对 URL(对于本地资源)。

What are the difference between the different URLs?

不同的 URL 之间有什么区别?

First lets have a look at what the difference URLs are we can use:

首先让我们看看我们可以使用哪些不同的 URL:

  • http://yourdomain.com/images/example.png
  • //yourdomain.com/images/example.png
  • /images/example.png
  • images/example.png
  • http://yourdomain.com/images/example.png
  • //yourdomain.com/images/example.png
  • /images/example.png
  • images/example.png

What resources do these URLs try to access on the server?

这些 URL 尝试访问服务器上的哪些资源?

In the examples below I assume the website is running from the following location on the server /var/www/mywebsite.

在下面的示例中,我假设网站从服务器上的以下位置运行/var/www/mywebsite

http://yourdomain.com/images/example.png

http://yourdomain.com/images/example.png

The above (absolute) URL tries to access the resource /var/www/website/images/example.png. This type of URL is something you would alwayswant to avoid for requesting resources from your own website for reason outlined above. However it does have its place. For example if you have a website http://yourdomain.comand you want to request a resource from an external domain over http you should use this. E.g. https://externalsite.com/path/to/image.png.

上述(绝对)URL 尝试访问资源/var/www/website/images/example.png。出于上述原因,您总是希望避免使用这种类型的 URL从您自己的网站请求资源。然而,它确实有它的位置。例如,如果您有一个网站,http://yourdomain.com并且想通过 http 从外部域请求资源,则应该使用它。例如https://externalsite.com/path/to/image.png

//yourdomain.com/images/example.png

//yourdomain.com/images/example.png

This URL is relative based on the current scheme used and should almost always be used when including external resources (images, javascripts etc).

此 URL 是基于当前使用的方案的相对 URL,并且在包含外部资源(图像、javascripts 等)时几乎应始终使用。

What this type of URL does is use the current scheme of the page it is on. This means that you are on the page http://yourdomain.comand on that page is an image tag <img src="//yourdomain.com/images/example.png">the URL of the image would resolve in http://yourdomain.com/images/example.png.
When you would have been on the page http**s**://yourdomain.comand on that page is an image tag <img src="//yourdomain.com/images/example.png">the URL of the image would resolve in https://yourdomain.com/images/example.png.

这种类型的 URL 的作用是使用它所在页面的当前方案。这意味着您在该页面上http://yourdomain.com,并且该页面上有一个图像标记<img src="//yourdomain.com/images/example.png">,该图像的 URL 将在http://yourdomain.com/images/example.png.
当您访问该页面http**s**://yourdomain.com并且该页面上有一个图像标记时<img src="//yourdomain.com/images/example.png">,图像的 URL 将解析为https://yourdomain.com/images/example.png.

This prevent loading resources over https when it is not needed and automatically makes sure the resource is requested over https when it isneeded.

这防止加载资源通过HTTPS是不需要的时候,当它自动确保被请求的资源通过HTTPS必要的。

The above URL resolves in the same manner on the server side as the previous URL:

上述 URL 在服务器端的解析方式与之前的 URL 相同:

The above (absolute) URL tries to access the resource /var/www/website/images/example.png.

上述(绝对)URL 尝试访问资源/var/www/website/images/example.png

/images/example.png

/images/example.png

For local resources this is the prefered way of referencing them. This is a relative URL based on the document root (/var/www/mywebsite) of your website. This means when you have <img src="/images/example.png">it will alwaysresolve to /var/www/mywebsite/images/example.png.

对于本地资源,这是引用它们的首选方式。这是基于/var/www/mywebsite您网站的文档根目录 ( ) 的相对 URL 。这意味着当您拥有<img src="/images/example.png">它时,它将始终解析为/var/www/mywebsite/images/example.png.

If at some point you decide to switch domain it will still work because it is relative.

如果在某个时候您决定切换域,它仍然可以工作,因为它是相对的。

images/example.png

images/example.png

This is also a relative URL although a bit different than the previous one. This URL is relative to the current path. What this means is that it will resolve to different paths depending on where you are in the site.

这也是一个相对 URL,尽管与前一个略有不同。这个 URL 是相对于当前路径的。这意味着它将根据您在站点中的位置解析为不同的路径。

For example when you are on the page http://yourdomain.comand you use <img src="images/example.png">it would resolve on the server to /var/www/mywebsite/images/example.pngas expected, however when your are on the page http://yourdomain.com/some/pathand you use the exact same image tag it suddenly will resolve to /var/www/mywebsite/some/path/images/example.png.

例如,当您在页面上http://yourdomain.com并使用<img src="images/example.png">它时,它会在服务器上/var/www/mywebsite/images/example.png按预期解析,但是当您在页面上http://yourdomain.com/some/path并且您使用完全相同的图像标签时,它会突然解析为/var/www/mywebsite/some/path/images/example.png.

When to use what?

什么时候用什么?

When requesting external resources you most likely want to use an URL relative to the scheme (unless you want to force a different scheme) and when dealing with local resources you want to use relative URLs based on the document root.

请求外部资源时,您很可能希望使用与方案相关的 URL(除非您想强制使用不同的方案),而在处理本地资源时,您希望使用基于文档根目录的相对 URL。

An example document:

示例文档:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <link href='//fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700' rel='stylesheet' type='text/css'>
        <link href="/style/style.css" rel="stylesheet" type="text/css" media="screen"></style>
    </head>
    <body>
        <img src="/images/some/localimage.png" alt="">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    </body>
</html>

Some (kinda) duplicates

一些(有点)重复

回答by Roland Bouman

See this: http://en.wikipedia.org/wiki/URI_scheme#Generic_syntax

请参阅:http: //en.wikipedia.org/wiki/URI_scheme#Generic_syntax

foo://username:[email protected]:8042/over/there/index.dtb;type=animal?name=ferret#nose
\ /   \________________/\_________/ \__/            \___/ \_/ \_________/ \_________/ \__/
 |           |               |       |                |    |       |           |       |
 |       userinfo         hostname  port              |    |       parameter query  fragment
 |    \_______________________________/ \_____________|____|____________/
scheme                  |                               | |  |
 |                authority                           |path|
 |                                                    |    |
 |            path                       interpretable as filename
 |   ___________|____________                              |
/ \ /                        \                             |
urn:example:animal:ferret:nose               interpretable as extension

An absolute url includes the parts before the "path" part - in other words, it includes the scheme (the httpin http://foo/bar/baz) and the hostname (the fooin http://foo/bar/baz) (and optionally port, userinfo and port).

绝对 url 包括“路径”部分之前的部分 - 换句话说,它包括方案(httpin http://foo/bar/baz)和主机名(fooin http://foo/bar/baz)(以及可选的端口、用户信息和端口)。

Relative urls start with a path.

相对 url 以路径开头。

Absolute urls are, well, absolute: the location of the resource can be resolved looking only at the url itself. A relative url is in a sense incomplete: to resolve it, you need the scheme and hostname, and these are typically taken from the current context. For example, in a web page at

绝对 url 是绝对的:资源的位置可以仅通过查看 url 本身来解析。从某种意义上说,相对 url 是不完整的:要解析它,您需要方案和主机名,这些通常取自当前上下文。例如,在一个网页中

http://myhost/mypath/myresource1.html

you could put a link like so

你可以放一个这样的链接

<a href="pages/page1">click me</a>

In the hrefattribute of the link, a relative url s used, and if it is clicked, it has to be resolved in order to follow it. In this case, the current context is

href链接的属性中,使用了一个相对的 url ,如果它被点击,它必须被解析才能跟随它。在这种情况下,当前上下文是

http://myhost/mypath/myresource1.html

so the schema, hostname, and leading path of these are taken and prepended to pages/page1, yielding

所以这些模式、主机名和前导路径被采用并附加到pages/page1,产生

http://myhost/mypath/pages/page1

If the link would have been:

如果链接是:

<a href="/pages/page1">click me</a>

(note the /appearing at the start of the url) then it would have been resolved as

(注意/出现在 url 的开头)然后它会被解析为

http://myhost/pages/page1

because the leading /indicates the root of the host.

因为前导/表示主机的根。

In a webapplication, I would advise to use relative urls for all resources that belong to your app. That way, if you change the location of the pages, everything will continue to work. Any external resources (could be pages completely outside your application, but also static content that you deliver through a content delivery network) should always be pointed to using absolute urls: if you don't there simply is no way to locate them, because they reside on a different server.

在 Web 应用程序中,我建议对属于您的应用程序的所有资源使用相对 url。这样,如果您更改页面的位置,一切都将继续工作。任何外部资源(可能是完全在您的应用程序之外的页面,也可能是您通过内容交付网络交付的静态内容)应始终使用绝对 url 指向:如果您不这样做,则根本无法定位它们,因为它们驻留在不同的服务器上。

回答by Vlad Alivanov

Assume we are creating a subsite whose files are in the folder http://site.ru/shop.

假设我们正在创建一个子站点,其文件位于文件夹http://site.ru/shop 中

1. Absolute URL

1.绝对网址

Link to home page
href="http://sites.ru/shop/"

Link to the product page
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/"

2. Relative URL

2. 相对网址

Link from home page to product page
href="t-shirts/t-shirt-life-is-good/"

Link from product page to home page
href="../../"

Although relative URL look shorter than absolute one, but the absolute URLs are more preferable, since a link can be used unchanged on any page of site.

虽然相对 URL 看起来比绝对 URL 短,但绝对 URL 更可取,因为链接可以在站点的任何页面上不变地使用。

Intermediate cases

中级案例

We have considered two extreme cases: "absolutely" absolute and "absolutely" relative URLs. But everything is relative in this world. This also applies to URLs. Every time you say about absolute URL, you should always specify relative to what.

我们考虑了两种极端情况:“绝对”绝对 URL 和“绝对”相对 URL。但在这个世界上,一切都是相对的。这也适用于 URL。每次你说绝对 URL 时,你应该总是指定相对于什么。

3. Protocol-relative URL

3. 协议相对 URL

Link to home page
href="//sites.ru/shop/"

Link to product page
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/"

Google recommends such URL. Now, however, it is generally considered that http:// and https:// are different sites.

谷歌推荐这样的网址。不过现在一般认为http://和https://是不同的站点。

4. Root-relative URL

4. 根相对 URL

I.e. relative to the root folder of the domain.

即相对于域的根文件夹。

Link to home page
href="/shop/"

Link to product page
href="/shop/t-shirts/t-shirt-life-is-good/"

It is a good choice if all pages are within the same domain. When you move your site to another domain, you don't have to do a mass replacements of the domain name in the URLs.

如果所有页面都在同一个域中,这是一个不错的选择。当您将站点移动到另一个域时,您不必对 URL 中的域名进行大量替换。

5. Base-relative URL (home-page-relative)

5. 基础相对网址(home-page-relative)

The tag <base> specifies the base URL, which is automatically added to all relative links and anchors. The base tag does not affect absolute links. As a base URL we'll specify the home page: <base href="http://sites.ru/shop/">.

标签 <base> 指定基本 URL,它会自动添加到所有相关链接和锚点。基本标签不影响绝对链接。作为基本 URL,我们将指定主页:<base href="http://sites.ru/shop/">。

Link to home page
href=""

Link to product page
href="t-shirts/t-shirt-life-is-good/"

Now you can move your site not only to any domain, but in any subfolder. Just keep in mind that, although URLs look like relative, in fact they are absolute. Especially pay attention to anchors. To navigate within the current page we have to write href="t-shirts/t-shirt-life-is-good/#comments" not href="#comments". The latter will throw on home page.

现在,您不仅可以将站点移动到任何域,还可以移动到任何子文件夹中。请记住,尽管 URL 看起来是相对的,但实际上它们是绝对的。尤其要注意锚点。要在当前页面中导航,我们必须编写 href="t-shirts/t-shirt-life-is-good/#comments" 而不是 href="#comments"。后者将抛出主页。

Conclusion

结论

For internal links I use base-relative URLs (5). For external links and newsletters I use absolute URLs (1).

对于内部链接,我使用基本相对 URL (5)。对于外部链接和新闻通讯,我使用绝对 URL (1)。

回答by None

There are really three types that should be discussed explicitly. In practice though URLs have been abstracted to be handled at a lower level and I would go as far as to say that developers could go through their entire lives without writing a single URL by hand.

确实应该明确讨论三种类型。在实践中,虽然 URL 已被抽象为在较低级别处理,我什至可以说开发人员可以在不手动编写单个 URL 的情况下完成他们的整个生活。

Absolute

绝对

Absolute URLs tie your code to the protocol and domain. This can be overcome with dynamic URLs.

绝对 URL 将您的代码与协议和域联系起来。这可以通过动态 URL 克服。

<a href=“https://dev.example.com/a.html?q=”>https://dev.example.com/a.html?q=</a>

Absolute Pros:

绝对优点:

  1. Control- The subdomain and protocol can be controlled. People that enter through an obscure subdomain will be funneled into the proper subdomain. You can hop back and forth between secure and non-secure as appropriate.

  2. Configurable- Developers love things to be absolute. You can design neat algorithms when using absolute URLs. URLs can be made configurable so that a URL can be updated site-wide with a single change in a single configuration file.

  3. Clairvoyance- You can search for the people scraping your site or maybe pick up some extra external links.

  1. 控制- 可以控制子域和协议。通过一个不起眼的子域进入的人将被引导到正确的子域中。您可以根据需要在安全和非安全之间来回切换。

  2. 可配置- 开发人员喜欢绝对的东西。使用绝对 URL 时,您可以设计简洁的算法。可以使 URL 可配置,以便可以通过单个配置文件中的单个更改在站点范围内更新 URL。

  3. 千里眼- 您可以搜索抓取您网站的人,或者获取一些额外的外部链接。



Root Relative

根亲属

Root Relative URLs tie your code to the base url. This can be overcome with dynamic URLs and/or base tags.

根相对 URL 将您的代码绑定到基本 url。这可以通过动态 URL 和/或基本标签来克服。

<a href=“/index.php?q=”>.example.com/index.php?q=</a>

Root Relative Pros:

根相对优点:

  1. Configurable- The base tag makes them relative to any root you choose making switching domains and implementing templates easy.
  1. 可配置- 基本标签使它们与您选择的任何根相关,从而使切换域和实现模板变得容易。


Relative

相对的

Relative URLs tie your code to the directory structure. There is no way to overcome this. Relative URLs are only useful in file systems for traversing directories or as a shortcut for a menial task.

相对 URL 将您的代码与目录结构联系起来。没有办法克服这一点。相对 URL 仅在文件系统中用于遍历目录或作为琐碎任务的快捷方式。

<a href=“index.php?q=”>index.php?q=</a>
<link src=“../.././../css/default.css” />

Relative Cons:

相对缺点:

  1. CONFUSING- How many dots is that? how many folders is that? Where is the file? Why isn't it working?

  2. MAINTENANCE- If a file is accidentally moved resources quit loading, links send the user to the wrong pages, form data might be sent to the incorrect page. If a file NEEDS to be moved all the resources that are going to quit loading and all the links that are going to be incorrect need to be updated.

  3. DOES NOT SCALE- When webpages become more complex and views start getting reused across multiple pages the relative links will be relative to the file that they were included into. If you have a navigation snippet of HTML that is going to be on every page then relative will be relative to a lot of different places. The first thing people realize when they start creating a template is that they need a way to manage the URLs.

  4. COMPUTED- They are implemented by your browser (hopefully according to RFC). See chapter 5 in RFC3986.

  5. OOPS!- Errors or typos can result in spider traps.

  1. 混淆- 那是多少个点?那是多少个文件夹?文件在哪里?为什么它不起作用?

  2. 维护- 如果文件被意外移动,资源退出加载,链接将用户发送到错误的页面,表单数据可能被发送到错误的页面。如果一个文件需要移动,所有将要停止加载的资源和所有将不正确的链接都需要更新。

  3. 不缩放- 当网页变得更加复杂并且视图开始在多个页面中重复使用时,相关链接将与它们被包含到的文件相关。如果您有一个 HTML 导航片段将出现在每个页面上,那么相对将与许多不同的位置相关。人们在开始创建模板时意识到的第一件事是他们需要一种管理 URL 的方法。

  4. 计算- 它们由您的浏览器实现(希望根据 RFC)。请参阅RFC3986 中的第 5 章。

  5. 哎呀!- 错误或拼写错误可能导致蜘蛛陷阱。



The Evolution of Routes

路线的演变

Developers have stopped writing URLs in the sense being discussed here. All requests are for a website's index file and contain a query string, aka a route. The route can be thought of as a mini URL that tells your application the content to be generated.

开发人员已停止编写此处讨论的 URL。所有请求都针对网站的索引文件,并包含一个查询字符串,即路由。该路由可以被认为是一个迷你 URL,它告诉您的应用程序要生成的内容。

<a href="<?=Route::url('named_url', array('first' => 'my', 'last' => 'whacky'))?>">
    http://dev.example.com/index.php/my:whacky:url
</a>

Routes Pros:

路线优点:

  1. All the advantages of absolute urls.
  2. Use of any character in URL.
  3. More control (Good for SEO).
  4. Ability to algorithmically generate URLs. This allows the URLs to be configurable. Altering the URL is a single change in a single file.
  5. No need for 404 not founds. Fallback routes can display a site map or error page.
  6. Convenient security of indirect access to application files. Guard statements can make sure that everybody is arriving through the proper channels.
  7. Practicality in MVC approach.
  1. 绝对网址的所有优点。
  2. 在 URL 中使用任何字符。
  3. 更多控制(有利于 SEO)。
  4. 能够通过算法生成 URL。这允许 URL 是可配置的。更改 URL 是单个文件中的单个更改。
  5. 不需要 404 not founds。回退路线可以显示站点地图或错误页面。
  6. 间接访问应用程序文件的便捷安全性。警卫声明可以确保每个人都通过适当的渠道到达。
  7. MVC 方法的实用性。


My Take

我的看法

Most people will make use of all three forms in their projects in some way or another. The key is to understand them and to choose the one best suited for the task.

大多数人会以某种方式在他们的项目中使用这三种形式。关键是要了解它们并选择最适合该任务的一种。

回答by marcgg

If it is for use within your website, it's better practice to use relative URL, like this if you need to move the website to another domain name or just debug locally, you can.

如果是在您的网站内使用,最好使用相对URL,如果您需要将网站移动到另一个域名或只是在本地调试,则可以这样做。

Take a look at what's stackoverflow is doing (ctrl+U in firefox):

看看stackoverflow在做什么(firefox中的ctrl+U):

<a href="/users/recent/90691"> // Link to an internal element

In some cases they use absolute urls :

在某些情况下,他们使用绝对网址:

<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5934">

... but this is only it's a best practice to improve speed. In your case, it doesn't look like you're doing anything like that so I wouldn't worry about it.

...但这只是提高速度的最佳实践。在你的情况下,看起来你没有做类似的事情,所以我不会担心。

回答by dudewad

I'm going to have to disagree with the majority here.

我将不得不不同意这里的大多数。

I think the relative URL scheme is "fine" when you want to quickly get something up and running and not think outside the box, particularly if your project is small with few developers (or just yourself).

我认为相对 URL 方案“很好”,当您想快速启动并运行某些东西而不是跳出框框思考时,特别是如果您的项目很小,开发人员很少(或只有您自己)。

However, once you start working on big, fatty systems where you switch domains and protocols all the time, I believe that a more elegant approach is in order.

但是,一旦您开始在不断切换域和协议的大型系统上工作,我相信一种更优雅的方法是必要的。

When you compare absolute and relative URLs in essence, Absolute wins. Why? Because it won't ever break. Ever. An absolute URL is exactly what it says it is. The catch is when you have to MAINTAIN your absolute URLs.

从本质上比较绝对 URL 和相对 URL 时,Absolute 胜出。为什么?因为它永远不会坏。曾经。绝对 URL 正是它所说的那样。问题是当您必须维护绝对 URL 时。

The weak approach to absolute URL linking is actually hard coding the entire URL. Not a great idea, and probably the culprit of why people see them as dangerous/evil/annoying to maintain. A better approach is to write yourself an easy to use URL generator. These are easy to write, and can be incrediblypowerful- automatically detecting your protocol, easy to config (literally set the url once for the whole app), etc, and it injects your domain all by itself. The nice thing about that: You go on coding using relative URLs, and at run time the application inserts your URLs as full absolutes on the fly. Awesome.

绝对 URL 链接的弱方法实际上是对整个 URL 进行硬编码。不是一个好主意,而且可能是为什么人们认为它们是危险/邪恶/烦人的罪魁祸首。更好的方法是为自己编写一个易于使用的 URL 生成器。这些很容易编写,而且功能非常强大——自动检测您的协议,易于配置(字面上为整个应用程序设置一次 url)等,并且它会自行注入您的域。这样做的好处是:您继续使用相对 URL 进行编码,并且在运行时应用程序将您的 URL 作为完全绝对值动态插入。惊人的。

Seeing as how practically all modern sites use some sort of dynamic back-end, it's in the best interest of said site to do it that way. Absolute URLs do more than just make you certain of where they point to- they also can improve SEO performance.

考虑到几乎所有现代网站都使用某种动态后端,这样做符合所述网站的最佳利益。绝对 URL 不仅可以让您确定它们指向的位置,还可以提高 SEO 性能。

I might add that the argument that absolute URLs is somehow going to change the load time of the page is a myth. If your domain weighs more than a few bytes and you're on a dialup modem in the 1980s, sure. But that's just not the case anymore. https://stackoverflow.com/is 25 bytes, whereas the "topbar-sprite.png" file that they use for the nav area of the site weighs in at 9+ kb. That means that the additional URL data is .2% of the loaded data in comparison to the sprite file, and that file is not even considered a big performance hit.

我可能会补充说,绝对 URL 会以某种方式改变页面加载时间的论点是一个神话。如果您的域超过几个字节,并且您使用的是 1980 年代的拨号调制解调器,那当然可以。但现在已经不是这样了。https://stackoverflow.com/是 25 字节,而他们用于站点导航区域的“topbar-sprite.png”文件重 9+ kb。这意味着与 sprite 文件相比,额外的 URL 数据是加载数据的 0.2%,并且该文件甚至不被视为对性能的重大影响。

That big, unoptimized, full-page background image is much more likely to slow your load times.

那个大的、未优化的、整页的背景图片更有可能减慢你的加载时间。

An interesting post about why relative URLs shouldn't be used is here: http://yoast.com/relative-urls-issues/

关于为什么不应该使用相对 URL 的有趣帖子在这里:http: //yoast.com/relative-urls-issues/

An issue that can arise with relatives, for instance, is that sometimes server mappings (mind you on big, messed up projects) don't line up with file names and the developer may make an assumption about a relative URL that just isn't true. I just saw that today on a project that I'm on and it brought an entire page down.

例如,亲戚可能会出现的一个问题是,有时服务器映射(请注意大的、混乱的项目)与文件名不一致,开发​​人员可能会假设相对 URL 不是真的。我今天刚刚在我参与的一个项目中看到了它,它把整个页面都拖下来了。

Or perhaps a developer forgot to switch a pointer and all of a sudden google indexed your entire test environment. Whoops- duplicate content (bad for SEO!).

或者也许开发人员忘记切换指针,突然 google 索引了您的整个测试环境。糟糕 - 重复的内容(对 SEO 不利!)。

Absolutes can be dangerous, but when used properly and in a way that can't break your buildthey are proven to be more reliable. Look at the article above which gives a bunch of reasons why the Wordpress url generator is super awesome.

Absolutes 可能很危险,但如果使用得当并且以不会破坏您的构建的方式使用它们,它们会被证明更可靠。看看上面的文章,它给出了一些为什么 Wordpress url 生成器超级棒的原因。

:)

:)

回答by Gumbo

A URL that starts with the URL scheme and scheme specific part (http://, https://, ftp://, etc.) is an absolute URL.

的URL与所述URL方案和计划特定部分(开始http://https://ftp://等)是绝对URL。

Any other URL is a relative URL and needs a base URL the relative URL is resolved from (and thus depend on) that is the URL of the resource the reference is used in if not declared otherwise.

任何其他 URL 都是相对 URL,并且需要一个基本 URL,相对 URL 是从(因此依赖于)引用的资源的 URL 解析的(如果没有另外声明)。

Take a look at RFC 2396 – Appendix Cfor examples of resolving relative URLs.

请查看RFC 2396 – 附录 C,了解解析相对 URL 的示例。

回答by Ben Everard

In most instances relative URLs are the way to go, they are portable by nature, which means if you wanted to lift your site and put it someone where else it would work instantly, reducing possibly hours of debugging.

在大多数情况下,相对 URL 是可行的方法,它们本质上是可移植的,这意味着如果您想提升您的网站并将其放在其他人可以立即工作的地方,则可能减少调试时间。

There is a pretty decent article on absolute vs relative URLs, check it out.

一篇关于绝对 URL 和相对 URL的相当不错的文章,请查看。

回答by Paolo

Let's say you have a site www.yourserver.com. In the root directory for web documents you have an images sub-directoy and in that you have myimage.jpg.

假设您有一个站点 www.yourserver.com。在 Web 文档的根目录中,您有一个图像子目录,其中有 myimage.jpg。

An absolute URL defines the exact location of the document, for example:

绝对 URL 定义了文档的确切位置,例如:

http://www.yourserver.com/images/myimage.jpg

A relative URL defines the location relative to the current directory, for example, given you are in the root web directory your image is in:

相对 URL 定义相对于当前目录的位置,例如,假设您位于根 Web 目录中,您的图像位于:

images/myimage.jpg

(relative to that root directory)

(相对于那个根目录)

You should always use relative URLS where possible. If you move the site to www.anotherserver.com you would have to update all the absolute URLs that were pointing at www.yourserver.com, relative ones will just keep working as is.

在可能的情况下,您应该始终使用相对 URL。如果您将站点移至 www.anotherserver.com,则必须更新所有指向 www.yourserver.com 的绝对 URL,相对 URL 将保持原样。