In-depth understanding of HTML relative path (Relative Path) and absolute path (Absolute Path)
|
I have been engaged in Java web development for more than a year, and it is inevitable to write html or jsp pages. The powerful function of web applications lies in their hyperlinks (Hyper Link). For example, page a saves the link address (that is, URI) pointing to page b, but the problem lies precisely here, 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? ...... In addition, relative paths are very popular in struts, so it is easy to get confused if you are not careful. 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 cite the documents correctly, I have written down the differences and usages for future reference. HTML has two ways of writing paths: 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: d:\tomcat\webapps\hello\blabla\info.HTML Assume that the path to index.HTML is: d:\tomcat\webapps\hello\blabla\index.HTML The code to add a hyperlink to index.HTML in info.HTML should be written like this: Copy code The code is as follows:<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: d:\tomcat\webapps\hello\blabla\info.HTML Assume that the path to index.HTML is: d:\tomcat\webapps\hello\index.HTML The code to add a hyperlink to index.HTML in info.HTML should be written like this: Copy code The code is as follows:<a href = "../index.HTML">index.HTML</a> Assume that the path of info.HTML is: d:\tomcat\webapps\hello\blabla\wowstory\info.HTML Assume that the path to index.HTML is: d:\tomcat\webapps\hello\index.HTML The code to add a hyperlink to index.HTML in info.HTML should be written like this: Copy code The code is as follows:<a href = "../../index.HTML">index.HTML</a> Assume that the path to info.HTML is: d:\tomcat\webapps\hello\blabla\info.HTML Assume that the index.HTML path is: d:\tomcat\webapps\hello\wowstory\index.HTML The code to add a hyperlink to index.HTML in info.HTML should be written like this: Copy code The code is as follows:<a href = "../wowstory/index.HTML">index.HTML</a> How to represent a sub-directory <br />To reference a file in a sub-directory, simply write the path of the sub-directory file. Assume that the path to info.HTML is: d:\tomcat\webapps\hello\blabla\info.HTML Assume that the path to index.HTML is: d:\tomcat\webapps\hello\blabla\HTML\index.HTML The code to add a hyperlink to index.HTML in info.HTML should be written like this: Copy code The code is as follows:<a href = "HTML/index.HTML">index.HTML</a> Assume that the path to info.HTML is: d:\tomcat\webapps\hello\blabla\info.HTML Assume that the path to index.HTML is: d:\tomcat\webapps\hello\blabla\HTML\tutorials\index.HTML The code to add a hyperlink to index.HTML in info.HTML should be written like this: Copy code The code is as follows:<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 have registered the domain name www.jb51.net and applied for a virtual host. The virtual host provider will give you a directory, such as www. This www is the root directory of the website. Assume that there is a file index.HTML in the www root directory. The absolute path of this file is: https://www.jb51.net/index.html. Suppose a directory called HTML_tutorials is created in the www root directory, and then a file index.HTML is placed in this directory. The absolute path of this file is https://www.jb51.net/article/32759.htm. |
<<: JavaScript imitates the complete page implementation process of Xiaomi Mall official website
>>: Teach you how to make cool barcode effects
Recommend
NULL and Empty String in Mysql
I recently came into contact with MySQL. Yesterda...
N ways to achieve two-column layout with CSS
1. What is a two-column layout? There are two typ...
HTML table tag tutorial (36): table header background color attribute BGCOLOR
The <TH> tag is used to set the properties ...
Detailed explanation of encoding issues during MySQL command line operations
1. Check the MySQL database encoding mysql -u use...
Using CSS3 to implement font color gradient
When using Animation.css, I found that the font o...
Centos7.4 server installation of apache and solutions to problems encountered during the installation process
This article describes how to install Apache on a...
Basic learning and experience sharing of MySQL transactions
A transaction is a logical group of operations. E...
Web standards learning to understand the separation of structure and presentation
When discussing Web standards, one thing that alwa...
Use of Linux network configuration tools
This article introduces RHEL8 network services an...
Tips for turning pixels into comprehensive brand experiences
Editor: This article discusses the role that inte...
HTML table markup tutorial (22): row border color attribute BORDERCOLORLIGHT
Within rows, light border colors can be defined i...
Vue implements the drag and drop sorting function of the page div box
vue implements the drag and drop sorting function...
Network configuration of Host Only+NAT mode under VirtualBox
The network configuration of Host Only+NAT mode u...
TypeScript interface definition case tutorial
The role of the interface: Interface, in English:...
avue-crud implementation example of multi-level complex dynamic header
Table of contents Preface Background data splicin...