Understanding HTML element classification and HTML element Classification

Understanding HTML element classification and HTML element Classification

HTML contains a large number of tags. These tags are found to be slightly different in our use. Some tags do not have much layout changes after they are used, but are only semantic, however, some tags start a new line, which is equivalent to a carriage return. This is the result of different types of tag elements.

Block-level elements

In HTML, tags such as <div >,< p >,< h1 >,< form >,< ul >,< ol >,< li> are block-level elements, each block-level element has the same features.

1. Each block-level element starts from a new row, and the subsequent element also starts from a new row. (that is, the block-level element occupies one row by itself, and the subsequent element must also make way)

2. You can set the element height, width, row height, and top and bottom margins.

3. If the element width is not set, it is 100% of its parent container. You can also set it separately.

Inline Element

Unlike block elements, <span>, <a>, <label>, <strong>, and <em> are typical inline tags (intra-row elements, in the process of use, the layout does not change much. They only modify some visual or click effects in the row.

Of course, inline elements also have their own characteristics, which correspond to block-level elements one by one.

1. The Inline element and other elements are on one row without crowding out other elements,

2. The height, width, and bottom margin of the element cannot be set (because the elements are close to each other in the row. If you set these values, the elements will not be messy ).

3. The width of an element is the width of the text or image it contains and cannot be changed.

Inline Block Element

There are very few such elements. They both have the characteristics of these two elements. and <input> these two labels are inline block elements.

　　

These three elements can be converted to each other, that is, they can be forced to modify their element types through css. You only need to set the display attribute, if you want to change the inline element <span> type to a block-level element, the Code is as follows:

Span {

Display: block;

}

Similarly, other attributes are the same. Change the attribute value to block-level elements: block, inline elements: inline, and inline block elements: inline-block.

These three elements must be very accurate, because they play an important role in the div + css layout.