Relative and absolute URL

Relative HTML path and absolute path)

HTML beginners often encounter such a problem: how to correctly reference a file. For example, how to reference another HTML webpage as a hyperlink in an HTML webpage )? How can I insert an image into a webpage ?......

(Related Tutorials: HTML hyperlinks and HTML images)

If you use an incorrect file path when referencing a file (such as adding a hyperlink or inserting an image), the reference will become invalid (you cannot browse the linked file, or the inserted image cannot be displayed ).

To avoid these errors and reference files correctly, we need to learn the HTML path.

HTML has two paths: relative path and absolute path.

File Reference of the same directory in the relative HTML path (relative path)

If the source file and the Referenced File are in the same directory, you can directly write the referenced file name.

We now create a source file info.html, which uses the index.html file as a hyperlink.

False info.html path: C: \ Inetpub \ wwwroot \ sites \ blabla \ info.html

The hypothetical index.html path is: C: \ Inetpub \ wwwroot \ sites \ blabla \ index.html.

Add the index.html hyperlink to info.htmlCodeIt should be written as follows:

<A href = "index.html"> index.html </a>

How to represent the parent directory

../Indicates the upper-level directory of the source file directory.

False info.html path: C: \ Inetpub \ wwwroot \ sites \ blabla \ info.html

The hypothetical index.html path is: C: \ Inetpub \ wwwroot \ sites \ index.html.

The code for adding the index.html hyperlink to info.html should be written as follows:

<A href = "../index.html"> index.html </a>

False info.html path: C: \ Inetpub \ wwwroot \ sites \ blabla \ info.html

The hypothetical index.html path is: C: \ Inetpub \ wwwroot \ index.html.

The code for adding the index.html hyperlink to info.html should be written as follows:

<A href = "http://www.cnblogs.com/index.html"> index.html </a>

False info.html path: C: \ Inetpub \ wwwroot \ sites \ blabla \ info.html

The hypothetical index.html path is: C: \ Inetpub \ wwwroot \ sites \ wowstory \ index.html.

The code for adding the index.html hyperlink to info.html should be written as follows:

<A href = "../wowstory/index.html"> index.html </a>

How to represent a sub-directory

Reference the file in the lower-level directory and directly write the path of the lower-level directory file.

False info.html path: C: \ Inetpub \ wwwroot \ sites \ blabla \ info.html

The hypothetical index.html path is: C: \ Inetpub \ wwwroot \ sites \ blabla \ HTML \ index.html

The code for adding the index.html hyperlink to info.html should be written as follows:

<A href = "html/index.html"> index.html </a>

False info.html path: C: \ Inetpub \ wwwroot \ sites \ blabla \ info.html

The hypothetical index.html path is: C: \ Inetpub \ wwwroot \ sites \ blabla \ HTML \ tutorials \ index.html.

The code for adding the index.html hyperlink to info.html should be written as follows:

<A href = "html/tutorials/index.html"> index.html </a>

Absolute HTML path (absolute path)

Absolute path refers to the complete path of the file with a domain name.

Suppose you have registered a domain name www.blabla.cn and applied for a VM. Your VM provider will give you a directory, such as WWW, which is the root directory of your website.

Assume that you have stored index.html in the wwwroot directory. The absolute path of this file is http://www.blabla.cn/index.html.

Assume that you have created a directory named html_tutorials in the wwwroot directory, and then put index.html in the directory. The absolute path of this file is http://www.blabla.cn/html_tutorials/index.html.

Author or editor: breaphup (last updated :)Reference Source: www.blabla.cn blabla webpage tutorial and code