我想知道这两种类型的url之间的区别:相对url(图片,CSS文件,JS文件等)和绝对url。
另外,用哪个比较好呢?
我想知道这两种类型的url之间的区别:相对url(图片,CSS文件,JS文件等)和绝对url。
另外,用哪个比较好呢?
在大多数情况下,相对url是可行的,它们本质上是可移植的,这意味着如果您想提升您的站点并将其放在其他地方,它将立即工作,可能会减少调试时间。
有一篇相当不错的文章是关于绝对url和相对url的,看看吧。
假设您有一个网站www.yourserver.example。在web文档的根目录中有一个images子目录,其中有myimage.jpg。
绝对URL定义了文档的确切位置,例如:
http://www.yourserver.example/images/myimage.jpg
相对URL定义了相对于当前目录的位置,例如,假设你在你的图片所在的根目录中:
images/myimage.jpg
(相对于根目录)
你应该尽可能使用相对url。如果你将网站移动到www.anotherserver.com,你将不得不更新所有指向www.yourserver.example的绝对url,相对的url将继续工作。
如果是在你的网站中使用,最好使用相对URL,如果你需要将网站移动到另一个域名或只是在本地调试,你可以这样做。
看看stackoverflow在做什么(firefox中的ctrl+U):
<a href="/users/recent/90691"> // Link to an internal element
在某些情况下,他们使用绝对url:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5934">
... 但这只是提高速度的最佳做法。在你的情况下,你看起来不像这样做,所以我不会担心。
请看这个:http://en.wikipedia.org/wiki/URI_scheme#Generic_syntax
foo://username:password@example.com: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
绝对URL包括“路径”部分之前的部分——换句话说,它包括方案(http://foo/bar/baz中的http)和主机名(http://foo/bar/baz中的foo)(还有可选的port、userinfo和port)。
相对url以路径开头。
绝对URL是绝对的:资源的位置可以仅通过URL本身来解析。相对URL在某种意义上是不完整的:要解析它,您需要方案和主机名,而这些通常来自当前上下文。例如,在网页中
http://myhost/mypath/myresource1.html
你可以这样放一个链接
<a href="pages/page1">click me</a>
在链接的href属性中,使用了一个相对url,如果单击了它,则必须解析它以便跟随它。在本例中,当前上下文为
http://myhost/mypath/myresource1.html
因此,这些文件的模式、主机名和引导路径将被添加到pages/page1中,从而得到
http://myhost/mypath/pages/page1
如果链接是:
<a href="/pages/page1">click me</a>
(注意/出现在URL的开头),那么它将被解析为
http://myhost/pages/page1
因为前导的/表示主机的根目录。
在一个web应用程序中,我建议对属于你的应用程序的所有资源使用相对url。这样,如果你改变了页面的位置,一切都将继续工作。任何外部资源(可以是完全在应用程序之外的页面,也可以是通过内容交付网络交付的静态内容)应该始终使用绝对url指向:如果不这样做,则根本无法定位它们,因为它们驻留在不同的服务器上。
以URL方案和方案特定部分(http://, https://, ftp://,等)开头的URL是绝对URL。
任何其他URL都是相对URL,并且需要一个基本URL,相对URL是从引用所使用的资源的URL中解析出来的(因此依赖于),如果没有声明的话。
请参阅RFC 2396 -附录C中有关解析相对url的示例。
我不同意大多数人的观点。
我认为相对URL方案是“好的”,当你想快速启动和运行一些东西,而不是跳出框框思考,特别是如果你的项目很小,只有几个开发人员(或者只有你自己)。
然而,一旦您开始在大型的、臃肿的系统上工作,并且一直在切换域和协议,我相信一种更优雅的方法是合适的。
当你从本质上比较绝对和相对url时,绝对url胜出。为什么?因为它永远不会坏。永远。绝对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 incredibly powerful- 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的作用不仅仅是让你确定它们指向哪里——它们还可以提高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的有趣文章: 为什么相对url应该被禁止
例如,可能会出现的一个问题是,有时服务器映射(请注意大型、混乱的项目)与文件名不一致,开发人员可能会对相对URL做出不正确的假设。我今天在我参与的一个项目上看到了这个,它把整个页面都拖下来了。
或者开发人员忘记切换指针,突然谷歌索引了整个测试环境。唉,重复的内容(不利于搜索引擎优化!)
绝对可能是危险的,但如果使用得当,并且不会破坏你的构建,它们被证明是更可靠的。看看上面的文章,它给出了一堆为什么Wordpress url生成器超级棒的理由。
:)
我应该使用绝对url还是相对url ?
如果你所说的绝对url指的是包含方案(例如HTTP / HTTPS)和主机名(例如yourdomain.example)的url,不要这样做(对于本地资源),因为维护和调试会很糟糕。
假设您在代码中处处使用绝对URL,如<img src="http://yourdomain.example/images/example.png">。现在,当你要去的时候,会发生什么:
切换到其他方案(例如HTTP -> HTTPS) 切换域名(test.yourdomain. com)。示例-> yourdomain.example)
在第一个例子中,您将收到关于页面上正在请求的不安全内容的警告。因为你所有的url都是硬编码使用http(://yourdomain.example/images/example.png)。当通过HTTPS运行页面时,浏览器期望所有资源都通过HTTPS加载,以防止信息泄露。
在第二个例子中,当你把你的网站从测试环境中上线时,这意味着所有的资源仍然指向你的测试域,而不是你的上线域。
因此,为了回答您关于使用绝对url还是相对url的问题:始终使用相对url(用于本地资源)。
不同的url之间有什么区别?
首先让我们来看看我们可以使用的不同类型的url:
http://yourdomain.example/images/example.png / / yourdomain.example /图片/ example.png /图片/ example.png 图片/ example.png
这些url试图访问服务器上的哪些资源?
在下面的例子中,我假设网站在服务器/var/www/mywebsite上运行
http://yourdomain.example/images/example.png
上面的(绝对)URL试图访问资源/var/www/website/images/example.png。这种类型的URL是你总是想要避免从你自己的网站请求资源的原因如上所述。然而,它确实有它的位置。例如,如果你有一个网站http://yourdomain.example,你想通过HTTPS从外部域请求资源,你应该使用这个。例如,https://externalsite.example/path/to/image.png。
/ / yourdomain.example /图片/ example.png
这个URL是相对的,基于当前使用的方案,当包含外部资源(图像,javascript等)时几乎总是应该使用。
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.example and on that page is an image tag <img src="//yourdomain.example/images/example.png"> the URL of the image would resolve in http://yourdomain.example/images/example.png. When you would have been on the page https://yourdomain.example and on that page is an image tag <img src="//yourdomain.example/images/example.png"> the URL of the image would resolve in https://yourdomain.example/images/example.png.
这可以防止在不需要时通过HTTPS加载资源,并自动确保在需要时通过HTTPS请求资源。
上面的URL在服务器端的解析方式与前面的URL相同:
上面的(绝对)URL试图访问资源/var/www/website/images/example.png。
/图片/ example.png
对于本地资源,这是首选的引用方式。这是一个基于你网站的文档根目录(/var/www/mywebsite)的相对URL。这意味着当你有<img src="/images/example.png">时,它总是会解析为/var/www/mywebsite/images/example.png。
如果在某个时候你决定切换域,它仍然可以工作,因为它是相对的。
图片/ example.png
这也是一个相对URL,尽管与前一个略有不同。这个URL相对于当前路径。这意味着它将解析到不同的路径,这取决于您在站点中的位置。
例如,当你在http://yourdomain.example页面上,你使用<img src="images/example.png">时,它会在服务器上解析为/var/www/mywebsite/images/example.png,然而,当你在http://yourdomain.example/some/path页面上,你使用完全相同的图像标记时,它会突然解析为/var/www/mywebsite/ somepath /images/example.png。
什么时候用什么?
在请求外部资源时,您很可能希望使用相对于方案的URL(除非您希望强制使用不同的方案),而在处理本地资源时,您希望使用基于文档根的相对URL。
文档示例:
<!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>
有些(有点)复制品
编写跨环境传输url的安全方法 在网站中链接图片的正确方法是什么?
对于支持相对URI解析的每个系统,相对URI和绝对URI都服务于同一个目标:引用。它们可以互换使用。所以你可以在每种情况下做出不同的决定。从技术上讲,它们提供相同的引用。
确切地说,每个相对URI都有一个绝对URI。那是那个相对URI被解析的base-URI。所以相对URI实际上是绝对URI之上的一个特性。
这也是为什么使用相对URI可以比单独使用绝对URI做得更多的原因——这对于静态网站尤其重要,否则与绝对URI相比,静态网站的维护就不那么灵活。
These positive effects of relative URI resolution can be exploited for dynamic web-application development as well. The inflexibility absolute URIs do introduce are also easier to cope up with, in a dynamic environment, so for some developers that are unsure about URI resolution and how to properly implement and manage it (not that it's always easy) do often opt into using absolute URIs in a dynamic part of a website as they can introduce other dynamic features (e.g. configuration variable containing the URI prefix) so to work around the inflexibility.
So what is the benefit then in using absolute URIs? Technically there ain't, but one I'd say: Relative URIs are more complex because they need to be resolved against the so called absolute base-URI. Even the resolution is strictly define since years, you might run over a client that has a mistake in URI resolution. As absolute URIs do not need any resolution, using absolute URIs have no risk to run into faulty client behaviour with relative URI resolution. So how high is that risk actually? Well, it's very rare. I only know about one Internet browser that had an issue with relative URI resolution. And that was not generally but only in a very (obscure) case.
与HTTP客户端(浏览器)相比,对于超文本文档或代码的作者来说,它可能更加复杂。在这里,绝对URI的好处是更容易测试,因为您只需将其原样输入到浏览器的地址栏中。然而,如果这不仅仅是您一个小时的工作,那么实际理解绝对和相对URI处理通常对您更有好处,这样您就可以真正利用相对链接的好处。
实际上有三种类型需要明确讨论。在实践中,虽然URL已经被抽象为在较低的级别上处理,但我想说的是,开发人员可以一辈子都不用手写一个URL。
绝对
绝对url将代码绑定到协议和域。这可以通过动态url解决。
<a href=“https://dev.example.com/a.html?q=”>https://dev.example.com/a.html?q=</a>
绝对的优点:
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. 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. Clairvoyance - You can search for the people scraping your site or maybe pick up some extra external links.
根相对
根相对url将您的代码绑定到基url。这可以通过动态url和/或基本标记来克服。
<a href=“/index.php?q=”>.example.com/index.php?q=</a>
根相对优点:
可配置的-基标签使它们相对于你选择的任何根,使切换域和实现模板变得容易。
相对
相对url将代码绑定到目录结构。这是无法克服的。相对url仅在文件系统中用于遍历目录或作为低级任务的快捷方式。
<a href=“index.php?q=”>index.php?q=</a>
<link src=“../.././../css/default.css” />
相对的缺点:
CONFUSING - How many dots is that? how many folders is that? Where is the file? Why isn't it working? 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. 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. COMPUTED - They are implemented by your browser (hopefully according to RFC). See chapter 5 in RFC3986. OOPS! - Errors or typos can result in spider traps.
路线的演变
开发人员已经停止编写这里所讨论的url。所有的请求都是针对一个网站的索引文件,并包含一个查询字符串,也就是路由。路由可以看作是一个迷你URL,它告诉应用程序要生成的内容。
<a href="<?=Route::url('named_url', array('first' => 'my', 'last' => 'whacky'))?>">
http://dev.example.com/index.php/my:whacky:url
</a>
路线的优点:
绝对url的所有优点。 URL中任意字符的使用。 更多的控制(有利于搜索引擎优化)。 能够算法生成url。这允许url是可配置的。更改URL是对单个文件的单个更改。 不需要404 not found。回退路由可以显示站点地图或错误页面。 方便安全的间接访问应用程序文件。警卫声明可以确保每个人都是通过适当的渠道到达的。 MVC方法的实用性。
我的看法
大多数人会在他们的项目中以某种方式使用这三种形式。关键是要了解它们,并选择最适合这项任务的一个。
假设我们正在创建一个子站点,其文件位于http://site.ru/shop文件夹中。
1. 绝对URL
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. 相对URL
Link from home page to product page
href="t-shirts/t-shirt-life-is-good/"
Link from product page to home page
href="../../"
虽然相对URL看起来比绝对URL短,但绝对URL更可取,因为链接可以在网站的任何页面上使用。
中间的情况下
我们考虑了两种极端情况:“绝对”绝对url和“绝对”相对url。但在这个世界上,一切都是相对的。这也适用于url。每次提到绝对URL时,都应该指定相对于什么。
3.Protocol-relative URL
Link to home page
href="//sites.ru/shop/"
Link to product page
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/"
谷歌推荐这样的URL。然而,现在通常认为http://和https://是不同的网站。
4. Root-relative URL
即相对于域的根文件夹。
Link to home page
href="/shop/"
Link to product page
href="/shop/t-shirts/t-shirt-life-is-good/"
如果所有页面都在同一个域中,这是一个很好的选择。当你把你的网站转移到另一个域名时,你不必在url中做大量的域名替换。
5. 基本相对URL(主页相对)
标签<base>指定基本URL,它会自动添加到所有相对链接和锚点。base标记不影响绝对链接。作为基本URL,我们将指定主页:<base href="http://sites.ru/shop/">。
Link to home page
href=""
Link to product page
href="t-shirts/t-shirt-life-is-good/"
现在,您不仅可以移动您的网站到任何域,但在任何子文件夹。请记住,虽然url看起来像相对的,但实际上它们是绝对的。 尤其要注意锚。要在当前页面中导航,我们必须写入href="t-shirt /t-shirt-life-is-good/#comments"而不是href="#comments"。后者将扔在首页上。
结论
对于内部链接,我使用基本相对url(5),对于外部链接和时事通讯,我使用绝对url(1)。