Detailed analysis of the difference between HTML relative paths and absolute paths

HTML beginners often encounter the problem of how to correctly reference a file. For example, how to reference another HTML web page as a hyperlink in an HTML web page?

How to insert a picture into a web page If you use the wrong file path when referencing a file (such as adding a hyperlink or inserting a picture, etc.), the reference will become invalid (the link cannot be browsed). HTML beginners often encounter the problem of how to correctly reference a file. For example, how to reference another HTML web page as a hyperlink in an HTML web page? How to insert a picture into a web page

If you use the wrong file path when referencing a file (such as adding a hyperlink, or inserting a picture, etc.), the reference will become invalid (the linked file cannot be browsed) , or the inserted picture cannot be displayed, etc.).

In order to avoid these errors and reference files correctly, we need to learn HTML paths.

HTML has two ways of writing paths: relative paths and absolute paths.

HTML relative path (Relative Path)
File reference in the same directory
If the source file and the reference file are in the same directory, just write the reference file name directly.

We now create a source file info.html, and reference the index.html file as a hyperlink in info.html.

Assume the info.html path is: c:\Inetpub\wwwroot\sites\blabla\info.html
Assume the index.html path is: c:\Inetpub\wwwroot\sites\blabla\index. html
The code to add the index.html hyperlink to info.html should be written like this:

index.html


How to represent the upper-level directory
../ represents the upper-level directory of the directory where the source file is located, ../../ represents the upper-level directory of the directory where the source file is located, and so on.

Assume the info.html path is: c:\Inetpub\wwwroot\sites\blabla\info.html
Assume the index.html path is: c:\Inetpub\wwwroot\sites\index.html
The code to add the index.html hyperlink to info.html should be written like this:


index.html

Assume the info.html path is: c:\Inetpub\wwwroot\sites\blabla\info.html
Assume the index.html path is: c:\Inetpub\wwwroot\index.html
In The code for adding a hyperlink to index.html to info.html should be written like this:


index.html

Assume the info.html path is: c:\Inetpub\wwwroot\sites\blabla\info.html
Assume the index.html path is: c:\Inetpub\wwwroot\sites\wowstory\index.html
The code to add the index.html hyperlink to info.html should be written like this:


index.html

How to express the lower-level directory
To reference files in the lower-level directory, just write the path of the file in the lower-level directory directly.

Assume the info.html path is: c:\Inetpub\wwwroot\sites\blabla\info.html
Assume the index.html path is: c:\Inetpub\wwwroot\sites\blabla\html\ index.html
The code to add the index.html hyperlink to info.html should be written like this:


index.html

Assume the info.html path is: c:\Inetpub\wwwroot\sites\blabla\info.html
Assume the index.html path is: c:\Inetpub\wwwroot\sites\blabla\ html\tutorials\index.html
The code to add the index.html hyperlink to info.html should be written like this:



HTML absolute path (Absolute Path)
HTML absolute path (absolute path) refers to the full path of a file with a domain name.

Suppose you registered the domain name www.php.cn and applied for a virtual host. Your virtual host provider will give you a directory, such as www. This www is the root directory of your website.

Suppose you place a file index.html in the www root directory. The absolute path of this file is: http://www.php.cn/index.html.

Suppose you create a directory called html_tutorials in the www root directory, and then place a file index.html in the directory. The absolute path of this file is http://www.php.cn/html_tutorials/ index.html.