The href attribute of the HTMLa tag specifies how to use relative paths and absolute paths

php中世界最好的语言
Release: 2018-01-22 10:43:57
Original
3342 people have browsed it

This time I will bring you the href attribute of the HTMLa tagSpecify the relative path and absolute path usage, use the href attribute of the HTMLa tag to specify the relative path and absolute path usageNotesWhat are they? The following is a practical case. Let’s take a look.

In actual Web development, inserting

images, including CSS files, etc. all require paths. If the file path is added incorrectly, it will cause the reference to become invalid (unable to Browsing linked files, or inserted pictures 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:

文件1.htm的绝对路径是:d:/www/html/1.htm
文件2.htm的绝对路径是:d:/www/html/2.htm
那么:1.htm相对于2.htm的路径就是:1.htm
Copy after login

How to use relative links:

If you link to the same directory, you only need to enter the name of the document to be linked, for example:

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

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

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

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

<a href = “../ www/index.htm”>
Copy after login

Example summary


现在有4个html文件分别是aaa.html bbb.html ccc.html index.html
aaa.html的路径为:D:/www/adminwang/html/aaa.html
bbb.html的路径为:D:/www/adminwang/ bbb.html
ccc.html的路径为:D:/www/ ccc.html
index.html的路径为D:/www/ index.html
Copy after login

1. Link files in the same directory

For example, ccc.html file link The code of index.html is as follows:

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

2. Link to the file in the previous directory

For example, the code of bbb.
html link to ccc.html is as follows:

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

3. Link files in the upper 2-level directory

For example, the code for linking aaa.html to ccc.html is as follows:

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

4. Linking files in lower-level directories

For example, ccc.html links to bbb.html The code is as follows:

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

5. Link files in the lower 2-level directory

For example, the code for ccc.html to link aaa.html is as follows:

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

HTML absolute path

Provide the file The full path to , 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
Copy after login

There is nothing to say about the absolute path. Once you master the relative path, the absolute path is very simple.


I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanation of examples of HTML text formatting

Summary of frequently used tags in html

The basics of HTML editing (a must-read for beginners)

The above is the detailed content of The href attribute of the HTMLa tag specifies how to use relative paths and absolute paths. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template