HTML tag: summary of usage of img tag

The content of this article is about HTML tags: a summary of the usage of img tags. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The Img tag has two important attributes:

1.src attribute: the address of the picture

2.alt attribute: the picture does not The display is actual text

2. The Img tag is a line-level element:

img and input are inline replacement elements. height/width/padding/margin are all available. The effect is equal to the block element. Inline non-replacement elements, for example, height/width/padding top, bottom/margin top/bottom have no effect. Only padding left/right and margin left/right can be used to change the width.

3. Center the Img tag:

1. The first method: I don’t like this method very much. The Img tag cannot be set to table-cell. Prone to errors.

img_p{
        display: table-cell;vertical-align: middle;  /*控制图片垂直居中*/
        text-align: center;  /*控制图片水平居中*/      }

2. The second method: In this method, it is best not to have the margin attribute for the Img tag, otherwise it will not be centered.

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}

4. Img tag event:

1. Use the onerror event of the HTML DOM Event object to process images that display exceptions.

<img src="img/1.jpg" alt="这是一张图片" onerror="alert(this.alt)">

Recommended related articles:

html layout: implementation code of html three-column layout

What is the innerHTML attribute? Usage of innerHTML attribute

The above is the detailed content of HTML tag: summary of usage of img tag. For more information, please follow other related articles on the PHP Chinese website!