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 be 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 to the file in the upper 2-level directory
For example, aaa.html link The code of ccc.html is as follows:

XML/HTML CodeCopy the content to the clipboard

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

4. Link to lower-level directories File
For example, the code of ccc.html link to bbb.html is as follows:

XML/HTML CodeCopy the content to the clipboard

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

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

XML/HTML CodeCopy content to clipboard

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

HTML Absolute Path
Provide 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

There is nothing to say about the absolute path, but the relative path is mastered , the absolute path is very simple.

For more explanations on how to use the href attribute of the HTML a tag to specify relative paths and absolute paths, please pay attention to the PHP Chinese website!