Explanation on the usage of HTML a tag href attribute to specify relative path and absolute path

href is one of the most commonly used important attributes for linking front-end files. Here we will take a look at the usage of the HTML a tag href attribute to specify relative paths and absolute paths. Friends who need it can refer to

In actual web development, inserting pictures, including CSS files, etc. all require paths. If the file path is added incorrectly, the reference will become invalid (the linked file cannot be browsed, or the inserted picture cannot be displayed, etc.). Many beginners are confused. Below I will introduce relative paths and absolute paths in detail.

HTML relative path
refers to the path relationship with other files (or folders) caused by the path where this file is located.
For example:
The absolute path of file 1.htm is: d:/www/html/1.htm
The absolute path of file 2.htm is: d:/www/html/2.htm
Then: the path of 1.htm relative to 2.htm is: 1.htm

How to use relative links:
If the link is to the same directory, just Enter the name of the document to be linked, for example:

XML/HTML CodeCopy the content to the clipboard

<a href =”1 htm”>网页链接 </a>
<img src=”bg.jpg” />

If linking to the next level directory , you need to enter the directory name first, then add "/", and then enter the file name, for example:

XML/HTML CodeCopy the content to the clipboard

<a href =”html/ next.htm”>
<img src=”images/bg.jpg” />

If you connect to the upper-level directory, you need to enter "../" first, and then enter the directory name and file name, for example:

XML/HTML Code Copy content to clipboard

<a href = “．．/ www/index.htm”>

Example summary
There are now 4 html files, namely aaa.html bbb.html ccc The path of .html index.html
aaa.html is: D:/www/adminwang/html/aaa.html
bbb.html is: D:/www/adminwang/ bbb.html
The path of ccc.html is: D:/www/ ccc.html
The path of index.html is D:/www/ index.html

1. Link files in the same directory
For example, the code for the ccc.html file link index.html is as follows:

XML/HTML CodeCopy the content to the clipboard

<a href="index.html">链接index网页</a>

2. Link to the file in the previous directory
For example, the code for linking bbb.html to ccc.html is as follows:

XML/HTML Code Copy the content to the clipboard

<a href="../ccc.html">链接ccc网页</a>

3. Link the files in the upper 2-level directory
For example, the code for linking aaa.html to ccc.html is as follows:

XML/HTML CodeCopy the content to the clipboard

<a href=”../../ccc.html”>链接ccc网页</a>

4. Link files in lower-level directories
For example, ccc.html link The code of bbb.html is as follows:

XML/HTML CodeCopy the content to the clipboard

<a href="adminwang/bbb.html">链接bbb网页</a>

5. Link to the next 2 levels Directory files
For example, the code for ccc.html link aaa.html is as follows:

XML/HTML CodeCopy the content to the clipboard

<a href="adminwang/html/aaa.html">链接aaa网页</a>

HTML Absolute Path
Provides the full path to the file, including the applicable protocol or drive letter. That is, the real full path of the file or directory on your home page on the hard disk. For example:
http://www.adminwang.com/index.htm
d:/ www /html/images/bg.jpg
Absolute path has nothing to say, relative path is mastered, absolute path is It's very simple.

Related recommendations:

How to prevent hyperlink jumps when using a link

in HTML Detailed explanation of the use of tags

The above is the detailed content of Explanation on the usage of HTML a tag href attribute to specify relative path and absolute path. For more information, please follow other related articles on the PHP Chinese website!