Absolute vs relative URLs
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.
In addition, which one is better to use?
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.
Should I use absolute or relative URLs?
If by absolute URLs you mean URLs including scheme (eg http / https) and the hostname (eg yourdomain.com) don't ever do that (for local resources) because it will be terrible to maintain and debug.
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:
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.
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).
What are the difference between the different URLs?
First lets have a look at what the difference URLs are we can use:
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?
In the examples below I assume the website is running from the following location on the server /var/www/mywebsite .
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 always want 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.com and you want to request a resource from an external domain over http you should use this. Eg https://externalsite.com/path/to/image.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).
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.com and 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.com and 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 .
This prevent loading resources over https when it is not needed and automatically makes sure the resource is requested over https when it is needed.
The above URL resolves in the same manner on the server side as the previous URL:
The above (absolute) URL tries to access the resource /var/www/website/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 always resolve to /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
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.
For example when you are on the page http://yourdomain.com and you use <img src="images/example.png"> it would resolve on the server to /var/www/mywebsite/images/example.png as expected, however when your are on the page http://yourdomain.com/some/path and you use the exact same image tag it suddenly will resolve to /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.
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
See this: 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
An absolute url includes the parts before the "path" part - in other words, it includes the scheme (the http in http://foo/bar/baz ) and the hostname (the foo in http://foo/bar/baz ) (and optionally port, userinfo and port).
Relative urls start with a path.
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
http://myhost/mypath/myresource1.html
you could put a link like so
<a href="pages/page1">click me</a>
In the href attribute 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
http://myhost/mypath/myresource1.html
so the schema, hostname, and leading path of these are taken and prepended to pages/page1 , yielding
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
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.
链接地址: http://www.djcxy.com/p/42222.html上一篇: .jpg img白色背景与html页面白色背景发生冲突
下一篇: 绝对与相对网址