Analysis of the difference between relative path and absolute path in HTML

Time:2021-12-27

HTML beginners often encounter such a problem, how to correctly reference a file. For example, how to reference another HTML page as a hyperlink in an HTML 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 (unable to browse the linked file, or unable to display the inserted picture, etc.).

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

HTML has two ways to write paths: relative path and absolute path.

HTML relative path
File references in the same directory
If the source file and the reference file are in the same directory, write the reference file name directly.

We now create a source file info HTML, in info Index. HTML should be referenced HTML files as hyperlinks.

Assume info The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ info html
Suppose index The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ index html
In info HTML add index The code of HTML hyperlink should be written as follows:

<a href = “index.html”>index.html</a>

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

Assume info The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ info html
Suppose index The HTML path is: C: \ inetpub \ wwwroot \ sites \ index html
In info HTML add index The code of HTML hyperlink should be written as follows:

<a href = “../index.html”>index.html</a>

Assume info The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ info html
Suppose index The HTML path is: C: \ inetpub \ wwwroot \ index html
In info HTML add index The code of HTML hyperlink should be written as follows:

<a href = “../../index.html”>index.html</a>

Assume info The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ info html
Suppose index The HTML path is: C: \ inetpub \ wwwroot \ sites \ wowstory \ index html
In info HTML add index The code of HTML hyperlink should be written as follows:

<a href = “../wowstory/index.html”>index.html</a>

How to represent subordinate directories
You can directly write the path of the files in the subordinate directory by referencing the files in the subordinate directory.

Assume info The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ info html
Suppose index The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ HTML \ index html
In info HTML add index The code of HTML hyperlink should be written as follows:

<a href = “html/index.html”>index.html</a>

Assume info The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ info html
Suppose index The HTML path is: C: \ inetpub \ wwwroot \ sites \ blablabla \ HTML \ tutorials \ index html
In info HTML add index The code of HTML hyperlink should be written as follows:

<a href = “html/tutorials/index.html”>index.html</a>
HTML absolute path
HTML absolute path refers to the full path of the file with domain name.

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

Suppose you put a file index. In the root directory of www HTML, the absolute path of this file is: https://www.jb51.net/index.html 。

Suppose you create a directory called HTML under the root directory of www_ Tutorials, and then put a file index HTML, the absolute path of this file is https://www.jb51.net/html_tutorials/index.html 。

Recommended Today

Tutorial on sending e-mail using net:: SMTP class in Ruby

Simple Mail Transfer Protocol(SMTP)SendE-mailAnd routing protocol processing between e-mail servers. RubyIt provides the connection of simple mail transfer protocol (SMTP) client of net:: SMTP class, and provides two new methods: new and start New takes two parameters: Server name defaults to localhost Port number defaults to 25 The start method takes these parameters: Server – […]