Detailed explanation of the basic usage of the img image tag in HTML/XHTML

The image tag is used to display an image in a web page.
HTML/XHTML Image <img /> Tag
In XHTML, an image is defined using the <img /> tag. <img /> is an unpaired tag.

Basic syntax:

The <img /> tag determines the image source through the src attribute. The url is a relative or absolute image address.

Image tag attributes:
src: Image source, required. Specify the source address of the displayed image, which can be a relative address or an absolute address.
alt: Alternative text, can be omitted. Used for replacement text displayed when the image cannot be displayed or the browser blocks the image.
title: Image hint text, can be omitted. When the mouse hovers over the picture, relevant text will be displayed.
width: The width of the image display, which can be omitted. The unit is pixel.
height: The height of the image display, which can be omitted. The unit is pixel.

Text Alternative Attribute (alt)
The text replacement attribute alt of the image tag is not a required attribute, but it is a very important attribute. When the browser fails to read the image for some reason, the alternative text will be displayed instead of the original image to provide the missing relevant image information. This attribute also helps users who use text-only browsers understand the content of the web page.
Therefore, it is a good habit to add a meaningful alt text replacement attribute to each image.

<img /> tag usage practice
Create an images folder under the e:html folder to store image files. Right-click the picture below and select "Save Picture As" to save the picture to the images folder for future use.

Edit our XHTML example1.html and make the following changes in the div tag with id="main-content":

In this way, we display an image on the web page.

Specify the image display size
You can add width or height attributes to the <img /> tag to manually specify the image display size:

hint
In general, the image size attribute is ignored and the original image size is displayed by default or the browser adaptive size is displayed. Specifying an inappropriate image display size may cause the image to be distorted.
Since it takes a certain amount of time to load images, you should try to reduce the size of the images while ensuring the quality of the images in order to achieve a good user experience.

Further reading
Pixel: We can figuratively think of a pixel as the smallest dot that a computer can display. For example, the screen resolution we often say is 1024*768, which means that the screen has 1024 (pixels) dots horizontally and 768 (pixels) dots vertically. When used as a unit, it is generally written as pix by default.