Detailed explanation of how to use relative paths in HTML to obtain files at all levels of directories

The concept of relative path

Use the current file location as a reference point to establish the path to the target file.

The concept of absolute path

The full path of the entire file, such as X:\www\web\index.html, or http://waldo.com.cn/index.html. Both of these are absolute paths.

Detailed explanation of various ways to use relative paths

Assume that there is a page that you want to link to a page named test.html. The following shows various ways to express relative paths:

Relative path access to files in the root directory of the website

A single slash / represents the root directory. You can use the / single slash to directly access the root directory at any level.

Assuming that many places on the web page need to link to the about.html page in the web folder under the root directory of the website, the html code should be written like this: <a href='/about.html'>link to</a>.

Relative path access to files in the parent directory of the current page

../ indicates the parent directory of the current file. Assume that the current page path is Waldo.com.cn/StaticPageFiles/SiteMapFiles/tag_11_1.htm. The page needs to link to the file X:www\web\StaticPageFiles\SiteMapFiles\Tag3\tag_3_1.htm. Then the link address in the current page should be <a href='../Tag3/tag_3_1.htm'>.NET標簽</a> .

PS: Since the current directory is Tag11, and the directory where the target file that the page needs to link is located is Tag3, which belongs to the same parent directory SiteMapFiles as the current directory, you need to use ../ to link to the parent directory first, and then link to the target directory and files under the parent directory.

Relative path access to files in multiple parent directories of the current page

Since ../ represents the parent directory of the current file, ../../ represents the parent directory of the current file. Just add ../ according to the number of parent levels to be obtained.

Relative path access to files in the subdirectory of the current page file

Just use the current directory name/subdirectory name/target file name. Assuming that the current file is located in the directory shiyousan.com/StaticPageFiles/SiteMapFiles/ , to link to the file under Tag3 in the current directory, the link address can be written like this: <a href='SiteMapFiles/Tag3/tag_3_1.htm'>鏈接</a> , or you can use ./,./ like this: <a href='./SiteMapFiles/Tag3/tag_3_1.htm'>鏈接</a>。

Summarize

. --------A single dot or a direct directory name indicates the current directory

.. --------Double dots indicate the parent directory of the current file

/ --------A single slash indicates the root directory of the current website

The above is a detailed explanation of how to use relative paths in HTML to obtain files at all levels of directories. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!