The difference between relative paths and absolute paths_CSS/HTML

Absolute path:

To find the file we need when we usually use the computer, we must know the location of the file, and the way to express the location of the file is the path. For example, as long as you see this path: c:/website/img /photo.jpg We know that the photo.jpg file is in the img subdirectory of the website directory of the c drive. A path similar to this that completely describes the location of a file is an absolute path. We don't need to know any other information to determine the location of the file based on the absolute path. On the website, the method of determining the file location similar to http://www.e3i5.net/img/photo.jpg is also an absolute path.

In website applications, we usually use "/" to represent the root directory. /img/photo.jpg means that the photo.jpg file is in the img directory on the root directory of the website. But this use is risky for beginners, because you must know that the root directory referred to here is not the root directory of your website, but the root directory of the server where your website is located, so when the root directory of the website When it differs from the server root, an error occurs.
Relative path:

Analyze why the picture cannot be displayed normally. For example, there is a page index.htm, and there is a picture photo.jpg connected to this page. Their absolute paths are as follows:
　c:/website/index.htm
　c:/website/img/photo.jpg

If you use the absolute path c:/website/img/photo. jpg, then everything will be fine on your own computer, because the photo.jpg file can indeed be found at the specified location, c:/website/img/photo.jpg, but when you upload the page to the website, it is very likely that Something will go wrong, because your website may be on the c drive of the server, it may be on the d drive, it may be in the aa directory, or even more likely in the bb directory. In short, there is no reason to have c:/website/img/photo.jpg. a path. So, what kind of path should be used to locate the photo.jpg file in the index.htm file? Yes, you should use a relative path. The so-called relative path, as the name implies, is relative to the target position. In the above example, photo.jpg connected in index.htm can use img/photo.jpg to locate the file. No matter where these files are placed, as long as their relative relationship does not change, there will be no error.

In addition, we use "../" to represent the upper-level directory, "../../" to represent the upper-level directory, and so on. (Friends who have studied DOS may find it easier to understand)

Look at a few more examples. Note that in all examples, there is a picture photo.jpg connected to the index.htm file.

Example:
c:/website/web/index.htm
c:/website/img/photo.jpg
In this example, photo.jpg is linked to index.htm How should it be expressed?
Incorrect writing: img/photo.jpg
This writing is incorrect. In this example, for the index.htm file, the absolute path represented by img/photo.jpg is: c:/website /web/img/photo.jpg, obviously does not meet the requirements.
Correct writing method: Use the relative path of ../img/photo.jpg to locate the file


Example:
c:/website/web/xz/index.htm
c:/website/img/images/photo.jpg
In this example, how should the photo.jpg connected in index.htm be represented?
Incorrect writing: ../img/images/photo.jpg
This writing is incorrect. In this example, for the index.htm file, ../img/images/photo.jpg represents The absolute path is: c:/website/web/img/images/photo.jpg.
Correct writing: You can use the relative path of ../../img/images/photo.jpg to locate the file


Example:
c:/website/web/xz/ index.htm
c:/website/web/img/photo.jpg
In this example, how should the photo.jpg connected to index.htm be represented?
Incorrect writing: ../../img/photo.jpg
This writing is incorrect. In this example, for the index.htm file, ../../img/photo.jpg The absolute path represented is: c:/website/img/photo.jpg.
Correct writing method: You can use the relative path of ../img/photo.jpg to locate the file


Summary: Through the above example, you can find that when converting the absolute path into a relative path , the identical parts of the absolute paths of the two files can be ignored and will not be considered. Just consider how they are different.