Analysis of the difference between HTML relative paths and absolute paths_HTML/Xhtml_Web page production

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 be 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:Inetpubwwwrootsitesblablainfo.html
Assume the index.html path is: c:Inetpubwwwrootsitesblablaindex.html
The code to add the index.html hyperlink to info.html should look like this Write:

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:Inetpubwwwrootsitesblablainfo.html
Assume the index.html path is: c:Inetpubwwwrootsitesindex.html
The code to add the index.html hyperlink to info.html should look like this Write:


index.html

Assume the info.html path is: c:Inetpubwwwrootsitesblablainfo.html
Assume the index.html path is: c: Inetpubwwwrootindex.html
The code to add index.html hyperlink to info.html should be written like this:


index.html

Assume info.html The path is: c:Inetpubwwwrootsitesblablainfo.html
Assume the index.html path is: c:Inetpubwwwrootsiteswowstoryindex.html
The code to add the index.html hyperlink to info.html should be written like this:


index.html

How to represent 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:Inetpubwwwrootsitesblablainfo.html
Assume the index.html path is: c:Inetpubwwwrootsitesblablahtmlindex.html
The code to add the index.html hyperlink to info.html should look like this Write:


index.html

Assume the info.html path is: c:Inetpubwwwrootsitesblablainfo.html
Assume the index.html path is: c: Inetpubwwwrootsitesblablahtmltutorialsindex.html
The code to add index.html hyperlink to info.html should be written like this:


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

Suppose you register the domain name www.jb51.net and apply 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.jb51.net/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.jb51.net/html_tutorials/ index.html.