Introduction to various link reference methods on Web pages

This article is my usual practice. If there is an error, please point it out

 

References in webpages (for example, referencing CSS, JS, IMG, and other objects) can be divided into the following methods:

 

 

<% -- Method 1 -- %> <link href = "/site.css" rel = "stylesheet" type = "text/CSS"/> <% -- method 2 -- %> <link href = "site.css" rel = "stylesheet" type = "text/CSS"/> <% -- Method 3 -- %> <link href = ".. /site.css "rel =" stylesheet "type =" text/CSS "/> <% -- Method 4 -- %> <link href =" <% = resolveurl ("~ /Site.css ") %>" rel = "stylesheet" type = "text/CSS"/>

Next, I will analyze the advantages and disadvantages of the four methods.

 

Method 1:/URL

 

Usage:

This is from the top of the domain name to find the file

 

If your page is: http://dozer.cnblogs.com/article/1.aspx

When referencing a CSS file:/CSS/site.css

The final CSS path is: http://dozer.cnblogs.com/css/site.css

 

That is, it ignores everything behind the http://dozer.cnblogs.com and adds itself

 

 

Limitations:

If your website is a sub-website, for example, creating an application in a website under IIS (instead of directly creating a website)

Then the root directory of your website will be: http://www.test.com/website

The problem arises, because the reference is determined based on the URL, and it cannot distinguish what the root directory of your website is, so the resolved address will also be wrong, "website" is ignored.

 

Method 2: URL

 

Usage:

This is the relative path.

 

If your page is: http://dozer.cnblogs.com/article/1.aspx

When referencing a CSS file: CSS/site.css

The final CSS path is: http://dozer.cnblogs.com/article/css/site.css

 

That is to say, it will remove the last "/" and then add itself

 

Limitations:

There are two limitations:

First, if you make a reference in masterpage, but the content page is in different folders, the final reference is determined based on the content page, so an error occurs.

Second, if you use urlrewrite, the URL is different from the actual file system, and it will obviously cause errors.

 

Method 3: ../URL

 

Usage:

In fact, this is the same as method 2,.../is the meaning of returning the upper level

 

If your page is: http://dozer.cnblogs.com/article/1.aspx

When referencing a CSS file: ../CSS/site.css

The final CSS path is: http://dozer.cnblogs.com/css/site.css

 

Limitations:

Same limitations as method 2

In addition, IIS does not allow the use of ../to return the parent level by default, so you need to configure

 

Method 4: <% = resolveurl ("~ /Site.css ") %>

 

Usage:

This method is similar to method 1, but it has the advantage of avoiding the limitations of method 1.

Because this is parsed by the server rather than executed on the client, it can identify sub-websites.

 

If your page is: http://www.cnblogs.com/dozer/article/1.aspx

When referencing a CSS file: <% = resolveurl ("~ /Site.css ") %>

The final CSS path is: http://www.cnblogs.com/dozer/site.css

 

Limitations:

This method is omnipotent, but not perfect.

Because it depends on Server Resolution, you can't see what you get, and you have to play so many words, which is very troublesome.