In-depth understanding of HTML relative path (Relative Path) and absolute path (Absolute Path)

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

Design Theory: A Method to Understand People's Hearts

<br />Once, Foyin and Mr. Dongpo were chatti...

Convert XHTML CSS pages to printer pages

In the past, creating a printer-friendly version ...

Summary of several error logs about MySQL MHA setup and switching

1: masterha_check_repl replica set error replicat...

JavaScript recursion detailed

Table of contents 1. What is recursion? 2. Solve ...

Hbase Getting Started

1. HBase Overview 1.1 What is HBase HBase is a No...

Several ways to submit HTML forms_PowerNode Java Academy

Method 1: Submit via the submit button <!DOCTY...

Installation tutorial of MySQL 5.7.17 zip package version under win10

The installation tutorial of mysql5.7.17 is share...

How to deploy and start redis in docker

Deploy redis in docker First install Docker in Li...

js realizes 3D sound effects through audioContext

This article shares the specific code of js to ac...

Introduction to the process of creating TCP connection in Linux system

Table of contents Steps to create TCP in Linux Se...

9 super practical CSS tips to help designers and developers

A web designer's head must be filled with a lo...

How to get the intersection/difference/union of two sets in mysql

Common scenarios of MySQL: getting the intersecti...

Steps to package and release the Vue project

Table of contents 1. Transition from development ...