Analysis of the difference between HTML relative path and absolute path
|
HTML beginners often encounter the problem of how to correctly reference a file. For example, how do you reference another HTML page as a hyperlink in an HTML page? How to insert a picture into a web page If you use the wrong file path when referencing a file (such as adding a hyperlink or inserting a picture, etc.), the reference will become invalid (the linked file cannot be browsed, or the inserted picture cannot be displayed, etc.). In order to avoid these errors and reference files correctly, we need to learn about HTML paths. There are two ways to write paths in HTML: relative paths and absolute paths. HTML Relative Path File references in the same directory If the source file and the referenced file are in the same directory, just write the referenced file name. We now create a source file info.html, and reference the index.html file as a hyperlink in info.html. Assume that the path to info.html is: c:\Inetpub\wwwroot\sites\blabla\info.html Assume that the path to index.html is: c:\Inetpub\wwwroot\sites\blabla\index.html The code to add a hyperlink to index.html in info.html should be written like this: <a href = "index.html">index.html</a> How to indicate the parent directory ../ represents the parent directory of the source file, ../../ represents the parent directory of the source file, and so on. Assume that the path to info.html is: c:\Inetpub\wwwroot\sites\blabla\info.html Assume that the path to index.html is: c:\Inetpub\wwwroot\sites\index.html The code to add a hyperlink to index.html in info.html should be written like this: <a href = "../index.html">index.html</a> Assume that the path to info.html is: c:\Inetpub\wwwroot\sites\blabla\info.html Assume that the path of index.html is: c:\Inetpub\wwwroot\index.html The code to add a hyperlink to index.html in info.html should be written like this: <a href = "../../index.html">index.html</a> Assume that the path to info.html is: c:\Inetpub\wwwroot\sites\blabla\info.html Assume that the path to index.html is: c:\Inetpub\wwwroot\sites\wowstory\index.html The code to add a hyperlink to index.html in info.html should be written like this: <a href = "../wowstory/index.html">index.html</a> How to indicate that a sub-directory references a file in a sub-directory? Simply write the path of the sub-directory file. Assume that the path to info.html is: c:\Inetpub\wwwroot\sites\blabla\info.html Assume that the path to index.html is: c:\Inetpub\wwwroot\sites\blabla\html\index.html The code to add a hyperlink to index.html in info.html should be written like this: <a href = "html/index.html">index.html</a> Assume that the path to info.html is: c:\Inetpub\wwwroot\sites\blabla\info.html Assume that the path to index.html is: c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html The code to add a hyperlink to index.html in info.html should be written like this: <a href = "html/tutorials/index.html">index.html</a> HTML Absolute Path HTML absolute path refers to the complete path of the file with the domain name. Suppose you register the domain name www.jb51.net and apply for a virtual host. Your virtual host provider will give you a directory, such as www. This www is the root directory of your website. Suppose you put a file index.html in the www root directory, the absolute path of this file is: https://www.jb51.net/index.html. Suppose you created a directory called html_tutorials in the www root directory, and then placed a file index.html in the directory. The absolute path of this file is https://www.jb51.net/html_tutorials/index.html. |
<<: Implementation example of JS native double-column shuttle selection box
>>: Four ways to combine CSS and HTML
![Detailed steps for installing and debugging MySQL database on CentOS7 [Example]](/upload/images/67cae1e054671.webp)
Recommend
How to use Web front-end vector icons
Preface When writing front-end pages, we often us...
JavaScript Function Currying
Table of contents 1 What is function currying? 2 ...
Pure CSS3 mind map style example
Mind Map He probably looks like this: Most of the...
Detailed explanation of top command output in Linux
Preface I believe everyone has used the top comma...
Tutorial on installing AutoFs mount service under Linux
Whether it is Samba service or NFS service, the m...
JavaScript canvas realizes the effect of nine-square grid cutting
This article shares the specific code of canvas t...
Summary of Linux vi command knowledge points and usage
Detailed explanation of Linux vi command The vi e...
How to solve the problem of forgetting the root password of Mysql on Mac
I haven't used mysql on my computer for a lon...
How to solve the problem that Docker container has no vim command
Find the problem Today, when I tried to modify th...
Solution for Docker Swarm external verification load balancing not taking effect
Problem Description I created three virtual machi...
Detailed explanation of display modes in CSS tags
Label display mode (important) div and span tags ...
How to create an index on a join table in MySQL
This article introduces how to create an index on...
Detailed explanation of Mysql master-slave synchronization configuration practice
1. Introduction I wrote an article before: The pr...
5 Ways to Send Emails in Linux Command Line (Recommended)
When you need to create an email in a shell scrip...
Let's talk about the problem of Vue integrating sweetalert2 prompt component
Table of contents 1. Project Integration 1. CDN i...