What are the attributes of the HTML IMG tag? Learn how to use the IMG tag

What are the attributes of the HTML IMG tag? Do you know how to use IMG? This article provides a comprehensive explanation of all HTML img tag attributes. I hope everyone is familiar with HTML and the img tag.

In HTML, images are defined by the tag.

is an empty tag, which means that it only contains attributes and has no closing tag.

To display an image on the page, you need to use the source attribute (src). src refers to "source". The value of the source attribute is the URL address of the image.

The syntax for defining images is:

<img src="/static/imghwm/default1.png"  data-src="url"  class="lazy"   alt="some_text">

URL refers to the location where the image is stored. If an image named "pulpit.jpg" is located in the images directory of www.runoob.com, its URL is http://www.runoob.com/images/yidian.jpg.

The browser displays the image in the document where the image tag appears. If you place an image tag between two paragraphs, the browser will display the first paragraph first, then the image, and finally the second paragraph.

Definition and usage

The img element embeds an image into a web page.

Please note that technically the tag does not insert an image into the web page, but rather links the image from the web page. The tag creates a placeholder for the referenced image.

tag has two required attributes: src attribute and alt attribute.

src attribute: Specifies the URL of the image to be displayed.

The alt attribute is used to define a string of prepared replaceable text for the image.

The value of the replacement text attribute is user-defined.

<img src="/static/imghwm/default1.png"  data-src="boat.gif"  class="lazy"   alt="Big Boat">

When the browser cannot load the image, the replacement text attribute tells readers the information they lost. At this point, the browser will display this alternative text instead of the image. It's a good practice to add the alt text attribute to all images on the page. This helps display information better and is very useful for those who use text-only browsers.

HTML img attribute scaling

HTML part:

<div class="tu"><img  src="/static/imghwm/default1.png"  data-src="pulpit.jpg"  class="lazy"  src=“suofang.jpg” alt="What are the attributes of the HTML IMG tag? Learn how to use the IMG tag" >

css control image scaling:

.tu img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
}

Description: The image is larger than 640 Automatically scale to 640px. If it is less than 640px, it is the actual size. If the height is greater than 720px, it is scaled to 720px. If it is less than 720px, it is the actual size. Note: Generally, the size of pictures is not controlled.

Centered display of the image: (with all alignment attribute values ​​attached)

left: Align the image to the left

right: Align the image to the right

middle: Align the image to the center

top: Align the image to the top

bottom: Align the image to the bottom

height, width attribute

height (height) and width (width) attributes are used to set the height and width of the image.

The default unit for attribute values ​​is pixels:

<img src="/static/imghwm/default1.png"  data-src="pulpit.jpg"  class="lazy"   alt="Pulpit rock"    style="max-width:90%"  style="max-width:90%">

Tip: It is a good practice to specify the height and width of the image. If an image has a specified height and width, the specified dimensions will be retained when the page loads. If the size of the image is not specified, the overall layout of the HTML page may be destroyed when the page is loaded.

Basic Notes - Helpful Tips:

Note: If an HTML file contains ten images, then in order to display the page correctly, 11 need to be loaded document. Loading images takes time, so our advice is: use images with caution.

Note: When loading the page, pay attention to the path to insert the page image. If the position of the image cannot be set correctly, the browser cannot load the image, and the image tag will display a broken image.

HTML image tag:

Define image

Differences between HTML and XHTML:

In HTML, the tag does not have a closing tag.

In XHTML, the tag must be closed properly.

In HTML 4.01, the use of the "align", "border", "hspace" and "vspace" attributes of the image element is deprecated.

In XHTML 1.0 Strict DTD, the "align", "border", "hspace" and "vspace" attributes of the image element are not supported.

【Knowledge Supplement】

Optional attributes in img:

• align: Specifies how to arrange images according to the surrounding text.

• border: Defines the border around the image.

• height: Defines the height of the image.

• hspace: Define the space on the left and right sides of the image.

• ismap: Defines the image as a server-side image map.

• longdesc: Points to a URL containing a long image description document.

• usemap: Define the image as a client image map.

• vspace: Defines the white space at the top and bottom of the image.

• width: Set the width of the image.

[Related recommendations]

The basic elements of html, allowing you to learn HTML from scratch

What is an HTML file? A preliminary understanding of HTML files

The above is the detailed content of What are the attributes of the HTML IMG tag? Learn how to use the IMG tag. For more information, please follow other related articles on the PHP Chinese website!