HTML relative path and absolute path difference

When I first proposed this topic, it felt too simple and nothing worth talking about. A little bit of HTML language people should know the difference between relative and absolute paths. But then think about it, think it is necessary to write out. Because, after all, there are some of the HTML beginners and some specific environment, will be due to improper file path settings caused the site content loading is not complete. For example, when we have written a site locally, when the site moved to other places on the online found some pictures, the module does not load out. After checking the logic of the code, did not find the problem, but finally through the small advice of others, oh, it is the code in the path of the file is set to local, rather than the new environment under the path.

Typically, it is recommended that you use a relative path when referencing a file path, so that you do not modify the code every time the site is moved, because you use an absolute path. Using relative paths can bring a lot of convenience.

OK, so let's talk about the relative and absolute paths of HTML.

Relative path (relative path)

Same directory

References a file in the same directory, you can refer directly to the file name without specifying the path.

Like what

The path to the file index.html is: D:\hostingspace\aipsme\wwwroot\test\index.html.

The path to the file test.html is: D:\hostingspace\aipsme\wwwroot\test\test.html.

Now to refer to file test.html in file index.html, you only need to write this:

<a href = "test.html" > Test.html</a>

Different directory

Situation One
The path to the file list.html is: D:\hostingspace\aipsme\wwwroot\abc\list.html.

The path to the file buter.html is: D:\hostingspace\aipsme\wwwroot\def\buter.html.

Now to refer to file buter.html in file list.html, you only need to write this:

<a href = ". /def/buter.html "> Buter.html</a>

Situation Two
The path to the file list.html is: D:\hostingspace\aipsme\wwwroot\abc\list.html.

The path to the file buter.html is: D:\hostingspace\aipsme\wwwroot\buter.html.

Now to refer to file buter.html in file list.html, you only need to write this:

<a href = ". /buter.html "> Buter.html</a>

Situation Three
The path to the file list.html is: D:\hostingspace\aipsme\wwwroot\abc\def\list.html.

The path to the file buter.html is: D:\hostingspace\aipsme\wwwroot\buter.html.

Now to refer to file buter.html in file list.html, you only need to write this:

<a href = ". /.. /buter.html "> Buter.html</a>

Situation Four
The path to the file list.html is: D:\hostingspace\aipsme\wwwroot\abc\list.html.

The path to the file buter.html is: D:\hostingspace\aipsme\wwwroot\abc\def\buter.html.

Now to refer to file buter.html in file list.html, you only need to write this:

<a href = "def/buter.html" > Buter.html</a>

Absolute path (absolute path)

For example, now there is a Web site www.test.com on a virtual host server. Your site files are usually placed under the root directory wwwroot or public_html, so that, for example, you now have a file index.php path is wwwroot\test\index.php

So the absolute path to this file should be: http://www.test.com/test/index.php