Detailed description of the basic usage of img image labels in HTML/XHTML _ HTML/Xhtml _ webpage Creation

This article mainly introduces the basic usage of img image labels in HTMLXHTML, and lists some common attributes of img labels, for more information, see image labels.
HTML/XHTML image tags
In XHTML, labels are used to define the display of an image. Is a non-paired tag.

Basic Syntax:

Copy XML/HTML Code to clipboard

The label uses the src attribute to determine the image source. The url is a relative or absolute image address.

Image Tag attributes:
Src: Image Source, required. Specifies the source address of the displayed image, which can be a relative address or an absolute address.
Alt: replaceable text, which can be omitted. It is used to replace the text displayed when the image cannot be displayed or the browser shields the image.
Title: The image prompt text, which can be omitted. When you move your cursor over the image, the text is displayed.
Width: The image display width, which can be omitted. The Unit is pixel.
Height: the height of the image, which can be omitted. The Unit is pixel.

Text replacement attribute (alt)
Although alt is not a required attribute, it is a very important attribute. When the Browser fails to read the image for some reason, the alternative text is displayed to replace the original image to provide the missing image information. This attribute also helps users who use plain text browsers understand the webpage content.
Therefore, it is a good habit to add a meaningful alt text replacement attribute for each image.

Label exercise
Create an images folder in the e: html folder to store image files. Right-click the following image and select "Save image as". Save the image to the images folder for backup.

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

Copy XML/HTML Code to clipboard

1. Article Title

2. Content

In this way, an image is displayed on the webpage.

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

Copy XML/HTML Code to clipboard

Prompt
Generally, the image size attribute is ignored and the source image size or browser adaptive size display is displayed by default. Specifying an inappropriate image display size may cause deformation of the image display.
Since loading images takes a certain amount of time, we recommend that you reduce the image size while ensuring the image quality to achieve a good user experience.

Additional reading
Pixel: We can think that pixels are the smallest point that a computer can display. For example, we often say that the screen resolution is 1024*768, this means that the screen has 1024 (pixels) points and 768 (pixels) points. Write the pix by default when used as the unit.