Semanticization of HTML tags
The so-called semantic labeling refers to the meaning of labels. What kind of label, what kind of thing do it do.
Why have semantic tags
-
Convenient code reading and maintenance
-
At the same time, the browser or web crawler can analyze it well, so as to better analyze the content
-
Using semantic tags will have better search engine optimization
Core: Give a most reasonable label where appropriate.
Is the semantics good: When we remove the CSS, the web page structure is still organized and has good readability.
In the vernacular, at a glance, you know that is the point, what the structure is, and what each piece of content is for.
The principle to follow: first determine the semantic HTML, and then select the appropriate CSS.
The difference between
block- level, in-line block-level, line and element Block-level element:
1. You can set the width and height
2. Cannot stay in one line with other elements
3. When the width and height are not set, the width is the same as that of the parent, and the height is determined by the element The height of the content determines
4. When the width and height are set, the width and height of the element is the set value
5. You can see a box, container, used for layout
Row-level elements:
1. The width and height cannot be set, and the set width and height are invalid
. 2. You can stay in one line with other elements
. 3. The width and height are determined by the content of the element.
Inline block-level elements:
1. You can set the width and height
2. You can stay in one line with other elements
3. When the width and height are not set, the width and height are determined by the content of the element
4. When the width and height are set, the width and height of the element are set The value of
element type conversion
Any element can be type converted, and element types can be converted to each other.
Element type conversion does not affect the nature of the element itself
1. Convert to block-level element display: block;
2. Convert to line-level element display: inline;
2. Convert to inline block-level element display: inline-block;