Basic analysis of img tag in HTML5: four elements of img Tag Image:
(1) SRC: image path
The effect of alert is as follows
When there is an error in the image, the function in ALT is used to represent the error content, which is convenient for the search engine to grab (convenient for the search engine to grab, and convenient for the SEO rendering)
matters needing attention:
(1) The width and height set by img must be the original size of the picture
(2) Generally, the width and height of an inline element cannot be set. Although img is also an inline element, it is a replacement element. You can set the width and height independently through Src
The difference between an inline element and an inline element.
How to solve the problem of spacing between the elements in the line:
In the figure below, the reasons for the upper and lower gaps of the inline elements are as follows:
IMG is an inline element = > the inline element will generate the newline character in the element code by default (also known as blank character = > can also be used as a text string by default)
In the figure below, the reasons for the gap in the vertical direction of the inline elements are as follows:
The default baseline alignment of inline elements results in null nodes appearing (vertical)- align:baseline; )
What is baseline alignment?
Acting on the vertical, horizontal way
What is a blank node?
Acting on the vertical direction
Causes of blank nodes: because img inline elements may be treated as strings in the browser, they may be affected by the font size of front size, and line height will also affect blank nodes = > when adding images, a blank line will appear below, which is the role of blank nodes
Because inline elements are treated as strings, you can add a font size: 0 to the parent; the alignment changes to vertical align: middle; but it may cause problems with the text style in the parent
Use display to change from in line elements to block level elements
Note: vertical align and line height are the two most difficult knowledge points to understand in CSS: why can you change font size = 0; can make the blank node of img disappear
Text and picture example: use the span tag with the picture
The alignment of the two inline elements is vertical align: baseline; obviously, the text is beyond the baseline of the image
As you change the size of the text in the figure below, the gap in the vertical direction of the picture will become larger
The causes are as follows:
Text will have a default line height, resulting in vertical space between the text. The larger the text, the larger the space will be = > when using “vertical align: miiddle;”, the space will not be generated when the text position rises, as shown in the figure below
The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.