Advantages of semantic tags and block level inline elements

The code structure is clear , Easy to read , It's good for team development .
Facilitate analysis of other equipment （ Such as screen reader 、 Blind reader 、 Mobile devices ） Rendering web pages in a semantic way .
It's good for SEO （SEO）.

Differences between block level inline elements

1, Block level elements wrap automatically

2, The height and width of block level elements can be set , Inline elements cannot , It can only be supported by its child elements

conversion

1.display:inline;// Convert block level elements into row level elements , At this time, the width and height set by the block level element are invalid
2.display:block;// Turn row level elements into block level elements , At this time, the original row level element will become a block level element with only one row , At the same time, width and height can be set
3.display:inline-block;// Turn row level elements into block level elements , Don't monopolize a line , Width and height can be set