Analysis of the difference between absolute path and relative path in HTML
As shown in the figure: There are many files connected to a single page, so when referencing files, you need to have a certain understanding of the path issue; or programmers who are familiar with PHP network program development will have many insights into combining define and include to define variable paths and references. for example: Copy code The code is as follows:define('ROOT_PATH',dirname(__FILE__)); include(ROOT_PATH."/inc/webconfig.php"); include(ROOT_PATH."/inc/sysinfo.php"); include(ROOT_PATH."/inc/functions.php"); include(ROOT_PATH."/inc/db_sql.php"); These are what I will analyze next. Main content: • The concept of relative path and absolute path • Analyze the concepts of relative path and absolute path in detail This is what the operating system class said about file search: absolute path: in a tree directory structure, there is only one and only path from the root node to a data file or directory file. Connect the directory file names and data file names on the path from the root node to a data file with "/" to form a path name that can be used to access the data file; relative path: a "current directory", also called a "working directory", can be set for each process, so that each time you look for a file, you do not need to mechanically use an absolute path. Instead, use the path of the file relative to the current directory. This is a relative path. Of course, it is a bit abstract. For details, please see my analysis below, which is mainly applied in HTML. Specific analysis 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 reference file are in the same directory, just write the reference 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 of info.html is: c:\Inetpub\wwwroot\sites\blabla\info.html Assume that the path of 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: How to indicate the parent directory in <a href = "index.html">index.html</a> ../ indicates the parent directory of the source file, https://www.jb51.net/ indicates 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 to 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 = "https://www.jb51.net/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 (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. Some references: The difference between relative path and absolute path |
<<: JS realizes the case of eliminating stars
>>: Summary of using MySQL isolation columns and prefix indexes
Recommend
A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)
I am a beginner in SQL and thought that the insta...
How to set up Referer in Nginx to prevent image theft
If the server's images are hotlinked by other...
Application of CSS3 animation effects in activity pages
background Before we know it, a busy year is comi...
Detailed explanation of Mysql transaction processing
1. MySQL transaction concept MySQL transactions a...
Tic-Tac-toe game implemented in pure CSS3
Operation effect: html <div class="tic-ta...
Detailed steps for creating a Vue scaffolding project
vue scaffolding -> vue.cli Quickly create a la...
Detailed explanation of the four transaction isolation levels in MySQL
The test environment of this experiment: Windows ...
Steps to solve the MySQL 8.0 time zone problem
Software Version Windows: Windows 10 MySQL: mysql...
Using Docker Enterprise Edition to build your own private registry server
Docker is really cool, especially because it'...
How to center images horizontally and vertically in DIV or DIV
<div class="box"> <img /> &...
How to import, register and use components in batches in Vue
Preface Components are something we use very ofte...
Vue uses Split to encapsulate the universal drag and slide partition panel component
Table of contents Preface start Basic layout Data...
Write your HTML like this to make your code more compatible
For example, users who need screen reading softwar...
Implementation example of scan code payment in vue project (with demo)
Table of contents Demand background Thought Analy...
How to migrate the data directory in mysql8.0.20
The default storage directory of mysql is /var/li...