Basic HTML directory issues (difference between relative paths and absolute paths)_HTML/Xhtml_Web page production

Relative path - a directory path created based on the location of the web page that references the file. Therefore, when web pages saved in different directories reference the same file, the paths used will be different, so it is called relative.
Absolute path - a directory path based on the root directory of the Web site. The reason why it is called absolute means that when all web pages reference the same file, the path used is the same.
In fact, the only difference between absolute paths and relative paths lies in the reference points used when describing directory paths. Since the reference point of the root directory is the same for all files on the website, the path description method using the root directory as the reference point is called an absolute path.
The following are several special symbols used to create paths and their meanings.
"."--represents the current directory.
".."--represents the upper level directory.
　"/"--represents the root directory.
Next, we assume that the Web site created by the reader has the directory path as shown in the figure below.

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

　./SubDir2/BeRef.gif

above In the reference path, "." represents the current directory (Dir1), so "./SubDir2" represents SubDir2 in the current directory. In fact, you can also omit "./" and quote directly in this way.

　SubDir2/BeRef.gif

If you use an absolute path to reference the file with the root directory as the reference point, the reference path is as follows:

/Dir1/SubDir2/BeRef.gif

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

 

What about the relative path to reference the BeRef.gif file?

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

../ SubDir2/BeRef.gif

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

　/Dir2/BeRer.gif

Let’s take another more complex example to compare the use of relative paths and absolute paths. Suppose that in the Web site created by the reader, there is a directory path as shown 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 picture.

Quoted by	Quoted	Relative path	Absolute path
Ref1.htm	BeRef1.gif	../SubDir2/BeRef1.gif	/Dir1/SubDir2/BeRef1.gif
Ref2.htm	BeRef1.gif	../../Dir1/SubDir2/ BeRef1.gif	/Dir1/SubDir2/ BeRef1.gif
Ref1.htm	BeRef2.htm	../../Dir2/ BeRef2.htm	/Dir2/BeRef2.htm
Ref2.htm	BeRef2.htm	../BeRef2.htm	/Dir2/BeRef2.htm

　　上表中比较需要说明的是"../../"所代表的意义。

　　".."代表上一层目录，而"../../"所代表的是上一层目录的上一层目录。所以，从上表中可以看出，如果引用的文件存在于目前目录的子目录中，或者存在于上一层目录的 另一个子目录中，运用相对路径是比较方便的。如果不是时，则干脆利用绝对路径，还比较省事。从上表中，亦可以看出，当被引用的是同一个文件时，引用文件所使用的绝对路径是一样的。