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
Recommend
HTML implementation of a simple calculator with detailed ideas
Copy code The code is as follows: <!DOCTYPE ht...
Implementation of converting between underline and camel case in js (multiple methods)
Table of contents Application scenarios: Method 1...
Super detailed basic JavaScript syntax rules
Table of contents 01 JavaScript (abbreviated as: ...
mysql backup script and keep it for 7 days
Script requirements: Back up the MySQL database e...
Node.js+express+socket realizes online real-time multi-person chat room
This article shares the specific code of Node.js+...
Some questions about hyperlinks
<br />I am very happy to participate in this...
Detailed examples of the difference between methods watch and computed in Vue.js
Table of contents Preface introduce 1. Mechanism ...
Detailed explanation of CSS background and border tag examples
1. CSS background tag 1. Set the background color...
Detailed explanation of JavaScript prototype chain
Table of contents 1. Constructors and instances 2...
Some experience in building the React Native project framework
React Native is a cross-platform mobile applicati...
Vue3+TypeScript implements a complete example of a recursive menu component
Table of contents Preface need accomplish First R...
The ultimate solution to the problem of Chinese garbled characters in tomcat static pages (html)
In tomcat, jsp is not garbled, but html Chinese i...
How to build php-nginx-alpine image from scratch in Docker
Although I have run some projects in Docker envir...
Solve the problem of blocking positioning DDL in MySQL 5.7
In the previous article "MySQL table structu...
MySQL deadlock routine: inconsistent batch insertion order under unique index
Preface The essence of deadlock is resource compe...