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

The image tag is used to display an image on a web page.

HTML/XHTML image tag
In XHTML, the tag is used to define an image to be displayed. is an unpaired tag.

Basic syntax:

<img  src="/static/imghwm/default1.png"  data-src="url"  class="lazy"   / alt="Detailed explanation of the basic usage of img image tag in HTML/XHTML" >

tag determines the source of the image through the src attribute, and the url is a relative Or an 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: Replaceable text, can be omitted. It is used to replace the text displayed when the image cannot be displayed or the browser blocks the image.
title: image prompt text, can be omitted. When the mouse hovers over the picture, relevant text will be prompted.
width: The width of the image display, can be omitted. Units are pixels.
height: The height of the image display, which can be omitted. Units are pixels.

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

Tag usage exercise
Create an images folder under the e:html folder to store image files. Right-click the picture below and select "Save Image As" to save the picture to the images folder for later use.

Edit our XHTML small example 1.html and make the following changes in the p tag with id="main-content":

<h3 id="文章题目">文章题目</h3>  
<p>文章具体内容</p>  
<p><img src="/static/imghwm/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵" /></p>

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

Specify the image display size
You can add the width or height attribute to the tag to manually specify the image display size:

<img src="/static/imghwm/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵"    style="max-width:90%"  style="max-width:90%" />

Tips
Under normal circumstances, the image size attribute will be ignored and the original image size will be displayed by default or the browser will adapt the size display. Specifying an inappropriate image display size may cause the image to appear distorted.
Since it takes a certain amount of time to load images, you should try to reduce the size of the image while ensuring the image quality to achieve a good user access experience.

Extended reading
Pixel: We can vividly think of a pixel as the smallest point that a computer can display. For example, the screen resolution we often say is 1024 *768 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.

For more detailed explanations of the basic usage of the img image tag in HTML/XHTML, please pay attention to the PHP Chinese website!