Home > Article > Web Front-end > 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 layoutWhat is the innerHTML attribute? Usage of innerHTML attributeThe 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!