[Original dry goods] absolute address and relative address, original dry goods relative
Absolute and relative addresses are important knowledge points in website development.
1. When you insert a file into a webpage, you cannot use the absolute path of the hard disk.
For example, insert an image into a webpage. The Code is as follows:
<! Doctype html>
It means to insert an image with the path "E: \ MyDocument \ Pictures \ 1.jpg ".
That is, this image is placed in the "E: \ MyDocument \ Pictures \" folder on the computer. The image file name is "Hangzhou 1.jpg ". However, such code is incorrect.
(1) because the HTML code is a client markup language, this Code actually tells the browser to display an image, which is placed in a folder on the client viewer's hard disk. However, in fact, the front-end code does not have the permission to read the viewer's hard disk files. It involves the security of computer data. If there are no restrictions, you can directly delete or format the viewer's hard disk data through the webpage, or read the viewer's hard disk data and upload it to the network. No security or privacy exists. Therefore, the webpage cannot successfully execute the code that exceeds the permission to read files or data.
(2) The website developer's computer does have this picture in this path, so even if the picture can be normally displayed in the browser of the website developer, when a webpage is uploaded to a server or virtual host, the image cannot be viewed normally when others access the webpage. This image does not exist on the viewer's hard disk (this image only exists on the developer's computer ).
Therefore, when inserting images or other files on a webpage, you cannot use the absolute path of the hard disk.
2. recognize absolute and relative addresses
Example 1: assume that the directory and file structure of the E drive on the computer are as follows:
(Figure 2-39)
According to the configuration in "E: \ UPUPW_AP5.6 \ Apache2 \ conf \ httpd-vhosts.conf", "E: \ UPUPW_AP5.6 \ htdocs \" corresponds to the URL "http: // 127.0.0.1/", then:
(1) The "htdocs" folder of "E: \ UPUPW_AP5.6 \ htdocs \" is the root directory of the website (server physical path.
The last slash "/" of "http: // 127.0.0.1/" represents the root directory of the website (Virtual Path.
The two are in a corresponding relationship. If you want to access the webpage file "E: \ upw_ap5.6 \ htdocs \ index.html", the corresponding URL is "http: // 127.0.0.1/index.html". If you want to access "E: \ UPUPW_AP5.6 \ htdocs \ images \ 001.jpg ". The URL of this image file is" http: // 127.0.0.1/images/001.jpg ".
(2) If we insert an image "E: \ UPUPW_AP5.6 \ htdocs \ index.html" in the webpage file "E: \ UPUPW_AP5.6 \ htdocs \ images \ 001.jpg ", there are three methods to write the correct code:
① (this is the address relative to the address of the webpage index.html)
② (this is an absolute address, starting. "/" Corresponds to the root directory of the website, that is, from the root directory "E: \ upw_ap5.6 \ htdocs \" of the website)
③ (this is also an absolute address and is a complete URL. However, this method is not recommended for reference of files on the site. Once the website domain name is changed, a lot of code will be modified, increasing the maintenance cost .)
(3) If we insert an image in the webpage file "E: \ UPUPW_AP5.6 \ htdocs \ member \ login.html ",
"E: \ upw_ap5.6 \ htdocs \ images \ 001.jpg", there are three correct statements:
① (this is the path of the webpage, relative to “login.html. ".. /Folder indicates a folder in the previous layer. When login.html#is in the latest memberloud folder, the first layer of login.html will go to the "htdocs" folder. After arriving at the "htdocs" folder, locate "images/001.jpg", which is "E: \ UPUPW_AP5.6 \ htdocs \ images \ 001.jpg ")
② (this is an absolute address, starting. "/" Corresponds to the root directory of the website, that is, from the root directory "E: \ upw_ap5.6 \ htdocs \" of the website)
③ (this is also an absolute address and is a complete URL. This form is not recommended for reference of files on the site .)
(4) use a backslash (/) or a backslash (\)
According to common sense, the physical path in the hard disk uses a backslash (\), for example, "E: \ UPUPW_AP5.6 \ htdocs \". We can remember this as follows: backslash (\) the physical path used for the hard disk.
In addition to the physical path, the URL and the path involved in the website, we use a slash (/), for example, "/images/001.jpg ".
(5) Relative addresses and absolute addresses are also called relative paths and absolute paths.
Example 2: assume that the directory and file structure of the E drive on the computer are as follows:
(Figure 2-40)
According to the configuration in "E: \ UPUPW_AP5.6 \ Apache2 \ conf \ httpd-vhosts.conf", "E: \ UPUPW_AP5.6 \ htdocs \" corresponds to the URL "http: // 127.0.0.1/", then:
(1) The "htdocs" folder of "E: \ UPUPW_AP5.6 \ htdocs \" is the root directory of the website (server physical path.
The last slash "/" of "http: // 127.0.0.1/" represents the root directory of the website (Virtual Path.
The two are in a corresponding relationship. To access the webpage file "E: \ UPUPW_AP5.6 \ htdocs \ new \ a \ B \ reg.html", the corresponding URL is "http: // 127.0.0.1/new/a/B/reg.html ". To access the image file" E: \ UPUPW_AP5.6 \ htdocs \ new \ a \ B \ c \ 002.jpg, the corresponding URL is: "http: // 127.0.0.1/new/a/B/c/002.jpg ".
(2) If we insert an image "E: \ UPUPW_AP5.6 \ htdocs \ new \ a \ B \ reg.html" into the webpage file: \ UPUPW_AP5.6 \ htdocs \ new \ a \ B \ c \ 002.jpg ", the correct code can be written in three ways:
① (relative address)
② (absolute address)
③ (absolute address)
(3) Suppose we insert the image "E: \ UPUPW_AP5.6 \ htdocs \ new \ d \ e \ 003.jpg ", there are three correct coding methods:
① (relative address)
② (absolute address)
③ (absolute address)
(4) If we link "E: \ UPUPW_AP5.6 \ htdocs \ new \ a \ B \ reg.html": \ UPUPW_AP5.6 \ htdocs \ new \ d \ e \ test.html "webpage, there are three correct coding methods:
① <A href = ".../../d/e/test.html"> test </a> (relative path)
② <A href = "/new/d/e/test.html"> test </a> (absolute path)
③ <A href = "http: // 127.0.0.1/new/d/e/test.html"> test </a> (absolute path)
(5) If we link "E: \ UPUPW_AP5.6 \ htdocs \ new \ a \ B \ reg.html": \ UPUPW_AP5.6 \ Apache2 \ "folder. Is there a solution?
<A href = ".../Apache2/filename. ext"> test </a> (error)
When the root directory of the website's physical path is configured as "E: \ upw_ap5.6 \ htdocs \" on the server (Apache \", the "/" symbol starting with the absolute address is the root directory of the website, corresponding to "E: \ UPUPW_AP5.6 \ htdocs \", and relative path ".. /.. /.. /.. /.. /.. /.. /.. /"no matter how many layers are up, the top level can only reach the root directory" E: \ upw_ap5.6 \ htdocs \ "of the website and will not go up one layer. This is also a security issue. If the path link above can break through the physical path root directory "E: \ UPUPW_AP5.6 \ htdocs \" we configured \", this means that any files on the server can be linked and used through the webpage, including the system files on the system disk of the server. When using web programming languages (such as ASP, PHP ,. when writing website code, you can read arbitrary files on the server and delete arbitrary files on the server, including system files on the server ...... This is a terrible thing. Therefore, permission restrictions apply to server security issues.