The following is the current summary, which has not yet been perfected. Of course, we will continue to learn and supplement in the future.
1. alt attribute
Required attribute that specifies alternative text when the image cannot be displayed
The alt attribute can provide alternative information for the image, assuming that the user cannot view the image due to the following reasons: the internet is too slow, an error in the src attribute, the browser disables the image, the user is using a screen reader
Usage: <img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulip" />
Note: alt means the replacement content when the picture cannot be displayed normally. Text can be added to it. Generally, if this attribute is not written, there will be a warning error, so I usually add it.
2. Web page plus icon
<head lang="en">
<meta charset="UTF-8">
<link rel="shortcut icon" href="./0223.png">
<title>Front-end development</title>
</head>
The href in the <link> tag is the relative position of the icon, preferably in the root directory of the website
Add icon, add the image path after href, which is equivalent to the src attribute in the <img src=""> tag
【Frequently occurring problems】
①The picture cannot lead to the html page, and it prompts 404 path error.
After checking, it is found that the relative path is correct, but it cannot be cited. At this point you can try to access only the image, and then change the path to the top-level path down
<img src="../../../xitong/image/tu.png">
../../../xitong is the top-level path, where xitong is the project name
②The page does not display pictures
[There is a new method here, open the web page with a code editor, drag the picture to show the absolute position, and then copy it to the project]
When starting through the browser, it is found that the page cannot apply local images, and the browser does not report an error.
After many searches, it was found that it was a problem with the image path. Because the image did not pass through the server, it must not be loaded.
At this time, I changed the path to the image through the server path:
Original: <img src="./Firefox_wallpaper.png"> Modified: <img src="localhost/xitong/views/Firefox.png">