Differentiation of elements in web Front-end HTML and web Front-end html

Differentiation of elements in web Front-end HTML and web Front-end html

As front-end personnel, we need to deal with various hypertext tags and use different tag elements. When I use it, I wonder if I have noticed their category ownership? Let's talk about the opinions of bloggers:

At present, bloggers have summarized three classification methods: one is to divide by closed, the other is to divide by display content, and the other is to divide by document flow.

1. Closed tags can be divided into dual tags and single tags.

Double tags are closed tags. We often write 2. Container-level labels and text-level labels can be divided by display content.

Text-level labels can only contain text, images, links, and so on, such as <p>, <a>, <em>, and <B>. Container-level labels can be used in labels, such as <div>, <li>, 3. file-based streams can be divided into block-level labels and row-level labels.

Not very easy to understand. Let's talk about their characteristics first.

Block-level elements have the following features:

① It always starts on a new line and occupies a whole line;

② Height, row height, and outer and inner margins can be controlled;

③ The bandwidth is always the same as the browser width and has nothing to do with the content;

④ It can accommodate inline elements and other block elements.

Features of In-row Elements:

① And other elements are on one row;

② High, the row height, outer margin, and inner margin can be changed;

③ The width is only related to the content;

④ In-row elements can only contain text or other in-row elements.

Common block-level labels include <div>,

Block-level labels and row-level labels can be converted by setting different values using the display attribute,

Display: block; convert to block element; display: inline; convert to line element, while display: inline-block; convert to line block element.

All text labels are intra-Row labels, and all container-level labels are block-level labels.

Note that<P> label, which is both a text label and a block-level label