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

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.