Relative paths in Web pages, JS, CSS, and Flash

Relative paths in Web pages, JS, CSS, and Flash

Hyperlink is the charm of the Internet. In order to link many scattered websites and webpages on the Internet to form an organic whole, we need to add links to the webpage. By clicking the link on the web page, we can enjoy traveling in the Information Ocean.

Hyperlinks include the following types:

• Internal link:Links between documents on the same website
• External link:Links between different website documents
• Anchor link:Links of the same webpage or different webpage locations
• Email link:Email Link

When creating an internal or external link, you need to describe the location of the referenced document or material in order to reference the document and material. there are usually two ways to describe the content, they are "relative path" and "absolute path ". The "relative path" can be divided into "root relative path" and "document relative path. Next we will explain it separately.

Physical path: Before describing the concepts and differences between absolute and relative paths, we need to first understand the physical path. The so-called physical path refers to the absolute storage location of documents or materials on the server, this location is actually the description of the Document location in the file system of the server operating system. For example, in windows, the absolute location of a document is "D:/doc/1.htm ", in Linux, the absolute location of a document may be "/home/www/1.htm ".

The absolute path is the complete path containing the server protocol (HTTP in this example). For example, the full path pointing to the Information Express homepage is "http://www.china-yantai.net/index.htm.pdf ". If you need to link documents or materials outside the current site on a webpage, use an absolute path.

Unlike the absolute path, the relative path does not contain the complete path information (for example, does not contain the server protocol ), the relative path describes the relative positional relationship (relative path of the document) between the referenced document and the current document, or the relative positional relationship (root relative path) between the referenced document and the website root directory ). When you click a link using a relative path in a browser, the browser automatically obtains the server protocol, address, port, and other information of the current document, and sends the information and relative path to the server, the server calculates the absolute position of the referenced document based on the current document location and relative path, obtains the document, and finally returns the result to the browser.

The root relative path starts with "/" (note that it cannot be "/"). It is the complete path from the root directory of the current site to the referenced document. For example, the root directory of a website is/home/WWW, there is a document/home/www/a/B/1.htm, and the root relative path of this document is "/a/B/1.htm ".

The relative document path refers to the path to access referenced documents from the directory where the current document is located. That is to say, the relative path describes the relative location relationship between the directory where the current document is located and the directory where the referenced document is located. For example, the physical path of the current document is/home/www/A/1.htm, and the physical path of the referenced document is/home/www/B/2.htm. the relative path of the second document to the first document is "... /B/2.htm ".

When using relative paths, we need to know how to describe the directory where the current document is located and how to describe the upper-level directory (parent directory) of the current document ). We usually use ". /"or empty description of the directory where the current document is located. For example, if the current document is/home/www/A/1.htm, then". /2.htm”and ipv2.htm are both relative paths pointing to "/home/www/A/2.htm. We use the prefix ".. /", if you have used the DOS system, please recall a frequently used command" CD .. ", which is the command to jump the current directory to the upper-level directory. In the above example, if the relative path is "../B/2.htm", we request the document with the physical path "/home/www/B/2.htm. "../" And "./" can be combined at any time. For example, "../" indicates the upper-level directory of the current directory.

After learning about the concepts and differences between absolute and relative paths, we also need to know the time to use them. In general, if you need to reference documents and materials outside the current website, we should use absolute paths. When referencing documents and materials inside the current website, we should use relative paths. Because the relative path does not contain the website address and other information, it makes the website easier to transplant (for example, to change the website domain name). Therefore, although you can also use the absolute path to link documents on the same website, however, use relative paths whenever possible. In general, when creating an internal link, we should try to use the relative path of the document instead of the root relative path. The reason for this is that when you preview the website locally, the browser does not recognize the root directory of the current site as a server, which may cause a link error. This problem does not occur when you use the relative path of the document. However, in some cases, using root relative paths is a better choice. A typical example is editing the "copyright information" in the "Rural Informatization self-help network builder, if a website clip (for example, an image under a custom file) is referenced in the copyright information, because the copyright information code is used by multiple webpages under different directories at the same time (for example, used by both the home page and the first-level page). Because the directories of These webpages are different, the relative path of the document cannot be used. In this case, the root relative path can be used to obtain the correct result (of course, this "correct" means that the uploaded website is correct ).

When a link is generated in the "Rural Informatization self-built network builder", the software has automatically helped us calculate the relative path between documents (usually using the relative path of documents ), you do not need to consider the path format.

Finally, let's discuss how to correctly write relative paths in webpages, JS files, CSS files, and Flash.

• Write relative paths on the webpage:Use the relative path of the referenced document or clip relative to the current page, for example, reference the material "/home/www/A/index.htm" on the webpage "/home/www/A/images/a.jpg". The relative path should be ". /images/a.jpg "or" images/a.jpg ".
• Write the relative path in the JS file:A js file is an external Javascript file referenced on the page. JavaScript code may be used to generate HTML code. Because the generated HTML code is embedded in the page that references this JS file, when describing relative paths, you should use relative paths between referenced documents or materials and pages that reference JS files. For example, the file "/home/www/A/index.htm" references the JS file "/home/www/A/JS/hello. JS, and generate an HTML code in the reference material "/home/www/A/images/1.jpg" in this JS, in this code, the relative path should be ". /images/1.jpg "or" images/1.jpg ", but not" .. /images/1.jpg ".
• Write relative paths in the CSS file:A css file is an external style definition file referenced on a page, this file is usually used to define the Display Effect of Various HTML tags on the page (such as the text font name, font size, indentation, margin, and so on ), CSS files can also reference external materials or documents (for example, setting a background image of a div object ). Unlike JS files, the browser regards CSS files as an independent document. Therefore, reference to materials in CSS can be achieved by calculating the relative path between the material file and the CSS file, it is irrelevant to the location of the page that references the CSS file. For example, the "/home/www/A/index.htm" file references the CSS file "/home/www/A/CSS/main.css ", if the reference material "/home/www/A/images/1.jpg" is referenced in the CSS, the relative path referenced by the reference material should be ".. /images/1.jpg "instead of". /images/1.jpg "or" images/1.jpg ".
• Writing relative paths in flash:Flash is used to show some dynamic effects of web pages. Web pages using FLASH are often more beautiful and interactive. In Flash files, external materials can also be referenced (for example, using flash to make a beautiful album). How can we use relative paths to reference external materials in flash? Similar to a JS file, a browser does not regard a flash file as an independent file, but an embedded clip in a page. Therefore, when a flash file references a clip, the relative path between the referenced material and the HTML page embedded in Flash should also be used. For example, the "/home/www/A/index.htm" file references the Flash file "/home/www/A/SWF/main.swf ", if the reference material "/home/www/A/images/1.jpg" is used in flash, the correct relative path is ". /images/1.jpg "or" images/1.jpg "instead of" .. /images/1.jpg ".
• I would like to add my own opinion: for JSP requests such as http: // localhost: 8888/test1/agencies/agencies_search.do, jump to/test1/module/agencies/agenciessearch. JSP page. On this page, an image is named 1.jpg. How can I determine the position of this image in JSP? Local development is relative to the path of the local file system, while running on the server is relative to the URL access path. According to the above statement, if it is written in the following format: images/left.jpg, the image should be in/test1/agencies/images/left.jpg. Because this path is relative to the URL. If it is written as ../images/left.jpg, the image should be in/test1/images/left.jpg.