<img> syntax
It is often necessary to insert pictures in HTML web pages to make the page more beautiful and express more clearly and accurately. Insert a picture,
which is defined by the <img> tag in HTML, through which the picture to be displayed can be imported. <img> is a single tag, it only contains attributes, there is no end tag, remember to add "/" before the ">" end symbol.
Technically speaking, images are not inserted into web pages, but linked to them, and the role of the <img> tag is to create a placeholder for the referenced image. The <img> tag is very commonly used in web pages, for example, importing Logo images, button background images, tool images, etc. The syntax of the <img> tag is:
<img src="Address of referenced image" alt="alt text for image">
The <img> tag contains two commonly used attributes src and alt.
The src attribute is used to specify the address of the picture that needs to be embedded in the web page, which can use a relative address, an absolute address, or even a picture path on the Internet. But you must ensure that the path is correct. When the webpage is running, the browser will find the image file according to this address and display it. If the address is incorrect, the image cannot be displayed.
The alt attribute is used to specify the alternative text of the image, and the content of this attribute will be displayed when the image is not displayed. Search engines will read the content of this attribute value as the meaning expressed by the image, so you need to pay attention to this attribute in search engine optimization.
The src attribute and alt attribute are required attributes of the <img> tag. Although, it will not error if the alt attribute is missing, it is recommended to set it. If it is not set, the search engine cannot obtain the information expressed by the image. If the image cannot be displayed correctly, there will be a blank space, and the user will not be able to obtain valid information. In addition to the src and alt attributes, the <img> tag has other attributes, as shown in the following table.
| attribute name | effect |
| heigth | image height |
| width | image width |
| ismap | Define the image as a server-side image map, the value ismap |
| usemap | Define the image as a client-side image map, the value can be #mapname |
| crossorigin | Set the cross-domain attribute of the image, the value can be anonymous, use-credentials |
When the picture is inserted, it will be displayed according to the original size of the picture. If you want to modify the size of the picture, you can set it through the width and height attributes. The width and height attribute values can be set arbitrarily, and the default unit is pixel (px). If you want the image to be scaled proportionally, you can set only width or only height, so that the other value will be scaled proportionally. The image is a two-dimensional graphic, and by default it is bottom-aligned with the text in the same area, which will result in a large blank area. You can set the floating property of the picture so that the text can be displayed on the side of the picture. The floating property is a property in the CSS style, which can be set through the style property. After setting the floating effect, the text will be aligned with the top of the picture, and the automatic line break will appear on the side of the picture. If the style attribute of the picture is set to float: left; then the picture floats to the right, and the text appears on the right of the picture; if it is set to float: right; then the picture floats to the right and appears on the right of the parent element.
A picture can also be used as a hyperlink object, as long as the <img> tag is included through the <a> tag, the picture becomes a hyperlink object. The picture used as a hyperlink has the same usage and display effect as a normal picture, except that the cursor will change into a hand shape when it is moved over the picture. You can also set the border of the picture through the border property.