The difference between relative paths and absolute paths in html

As long as files are involved in HTML (such as hyperlinks, pictures, etc.), the concepts of absolute paths and relative paths will be involved.

1. Absolute path

The absolute path refers to the path where the file actually exists on the hard disk. For example, the picture "bg.jpg" is stored in the "E:\book\Webpage Layout Code\Chapter 2" directory on the hard disk, then the absolute path of the picture "bg.jpg" is "E:\book\Webpage Layout" \Code\Chapter 2\bg.jpg". Then if you want to use an absolute path to specify the background image of the web page, you should use the following statement:

2. Disadvantages of using absolute paths

In fact, when programming web pages, absolute paths are rarely used. If you use "E:\book\Web Page\ Code\Chapter 2\bg.jpg" to specify the location of the background image. Everything may be fine when browsing on your own computer, but when uploaded to a Web server for browsing, the image may not be displayed. Because when uploading to the Web server, the entire website may not be placed on the E drive of the Web server, but may be on the D drive or H drive. Even if it is placed in the E disk of the Web server, the directory "E:\book\Webpage Layout\Code\Chapter 2" may not exist in the E disk of the Web server, so the picture will not be displayed when browsing the web. .

3. Relative path

In order to avoid this situation, relative paths are usually chosen when specifying files in web pages. The so-called relative path is relative to the location of your own target file. For example, in the above example, the "s1.htm" file references the "bg.jpg" picture. Since the "bg.jpg" picture is in the same directory as "s1.htm", it must be in "s1 .htm" file, as long as the relative positions of the two files have not changed (that is, they are still in the same directory), then no matter where they are uploaded to the web server, they will be correctly displayed in the browser. display image.

Give another example, assuming that the directory where the "s1.htm" file is located is "E:\book\Webpage Layout\Code\ Chapter 2", and the directory where the "bg.jpg" picture is located is "E:\book\Webpage Layout\Code\Chapter 2\img", then the "bg.jpg" picture is relative to the "s1.htm" file , in the "img" subdirectory of the directory where it is located, the statement quoting the image should be:

Note: Relative paths use the "/" character as the directory separator character, while absolute paths can use "\" or "/" characters as the directory separator character. Since the "img" directory is a subdirectory under the "Chapter 2" directory, there is no need to add the "/" character before "img".

In relative paths, "../" is often used to represent the upper-level directory. If there are multiple upper-level directories, you can use multiple "../", for example, "http://www.php.cn/" represents the upper-level directory. Assume that the directory where the "s1.htm" file is located is "E:\book\Webpage Layout\Code\Chapter 2", and the directory where the "bg.jpg" picture is located is "E:\book\Webpage Layout\Code", then " Compared to the "s1.htm" file, the "bg.jpg" image is in the superior directory of the directory where it is located, so the statement quoting the image should be:

Give another example, assuming that the directory where the "s1.htm" file is located is "E:\book\Webpage Layout\Code\Chapter 2", and " The directory where the bg.jpg" picture is located is "E:\book\Webpage Layout\Code\img", then the "bg.jpg" picture is in the upper-level directory of the directory where it is located relative to the "s1.htm" file. In the "img" subdirectory, the statement quoting the image should be:

4. Relative virtual directory

There is also a special expression for relative paths: "relative virtual directory". Please look at the following example:

In this example, the value of the background attribute is " /img/bg.jpg", note that there is a "/" character before "img". This "/" represents the root directory of the virtual directory. Assume that "E:\book\Webpage Layout\Code" is set as the virtual directory, then the real path of "/img/bg.jpg" is "E:\book\ Web Layout\Code\img\bg.jpg"; if "E:\book\Web Layout\Code\Chapter 2" is set as a virtual directory, then the real path of "/img/bg.jpg" is "E: \book\Webpage Layout\Code\Chapter 2\img\bg.jpg”

For more about the difference between relative paths and absolute paths in html, please pay attention to the PHP Chinese website for related articles!