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
A brief discussion on the matching rules of host and user when Mysql connects to the database
--When connecting to the database, the matching r...
How does WeChat Mini Program obtain user information and user phone number at the same time
When I was writing the login page today, I needed...
How to install yum source and upload and download commands rz and sz under CentOS7 (with pictures)
** Detailed graphic instructions for installing y...
Element tree control integrates a drop-down menu with icons (tree+dropdown+input)
Table of contents Requirements: Implementation st...
Detailed explanation of the syntax and process of executing MySQL transactions
Abstract: MySQL provides a variety of storage eng...
Three methods of inheritance in JavaScript
inherit 1. What is inheritance Inheritance: First...
Ubuntu 20.04 firewall settings simple tutorial (novice)
Preface In today's increasingly convenient In...
Teach you to quickly build a web cluster project based on nginx
Table of contents 1. Project Environment 2. Proje...
JavaScript realizes the drag effect of modal box
Here is a case of modal box dragging. The functio...
Let's talk about destructuring in JS ES6
Overview es6 adds a new way to get specified elem...
Introduction to MySQL <> and <=> operators
<> Operator Function: Indicates not equal t...
A brief introduction to VUE uni-app core knowledge
Table of contents specification a. The page file ...
A brief analysis of SQL examples for finding uncommitted transactions in MySQL
A long time ago, I summarized a blog post titled ...
js realizes the magnifying glass function of shopping website
This article shares the specific code of js to re...
What is BFC? How to clear floats using CSS pseudo elements
BFC Concept: The block formatting context is an i...