About label classification and label Classification

About label classification and label Classification

After learning the front-end, we know that the labels we used are classified. Specifically, it is divided into blocks/Embedded/embedded blocks. Let's take a look at the characteristics of the labels of blocks/Embedded/embedded blocks.

First, block tags

Block:

1. Exclusive display of one row

2. All styles are supported.

3. No width is set. The width is full of the parent space.

 

Second, embedded labels

Embedded:

1. It can be displayed in one row

2. wide and high, up and down margin, and up and down padding are not supported.

3. A line feed will parse a space (the font and font size can control the space size)

4. The width is supported by the content

In addition, our embedded block labels, the embedded block labels are a collection of block labels that support width and height styles. They are not set width and height to be supported by the content. They also support nested exclusive line features, A line feed will parse a space. I personally think it is quite convenient to use embedded blocks to layout pages. Only the embedded block elements are displayed in one row. There are some gaps between the two elements, which need to be solved during use.

Embedded block:

1. It can be displayed in one row

2. Support for width and height

3. A line feed will parse a space

4. When the width is not set, the width is opened by the content.

Of course, these three types of elements are not only used as the initial defined types. We can also convert them according to self requirements through the display method.

Common block labels: div, h1-h6, header, nav, section, article, aside, footer, dl, dt, dd, ol, ul, li, p, form

Commonly used embedded labels: a, span, strong, mark, time, em, label

Commonly used embedded block labels: img, input, buttom, textarea, select

 

Label nesting specification:

1. Tag a cannot contain tag

2. Embedded tags cannot contain block tags

3. Some block labels can no longer contain block labels: p, h1-h6, dt

4. Note that the following nesting types are fixed:

Ul li

Ul can only contain li, and its parent level can only be ol or ul. Of course, li can be placed at will.

Ol li

Ol can only contain li, and its parent level can only be ol or ul. Of course, li can be placed at will.

Dl dt dd

Dl can only contain dt, dd, dt, and dd, and its parent level can only be dl. Of course, dd can be placed at will.

5. It is generally recommended that the block and block be parallel, and embedded are parallel.