Basic HTML directory problem (difference between relative path and absolute path)

If the directory structure of the Web site is as shown below

What about the relative path of the BeRef.gif file?

If you want to reference the BeRef.gif file in the Ref.htm file, its relative path is as follows:

../SubDir2/BeRef.gif

In the reference path above, ".." represents the parent directory, so "/Dir2" represents the Dir2 subdirectory under the parent directory. If an absolute path is used for reference, the reference path is as follows:

/Dir2/BeRer.gif

Let's take a more complicated example to compare the use of relative paths and absolute paths. Assume that the website you created has the directory path as shown in the figure below.

We use a table to illustrate the relative path and absolute path that should be used when a file references another file in the above situation.

What needs to be explained in the above table is the meaning of "../../".

".." represents the parent directory, and "../../" represents the parent directory of the parent directory. Therefore, as can be seen from the above table, if the referenced file exists in a subdirectory of the current directory, or in another subdirectory of the upper directory, it is more convenient to use a relative path. If not, just use the absolute path, which is more convenient. From the above table, we can also see that when the same file is referenced, the absolute path used to reference the file is the same.