Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end HTML Tutorial Detailed introduction to HTML element classification

Detailed introduction to HTML element classification

黄舟
黄舟
May 27, 2017 pm 02:51 PM

HTMLElement classification

1. Classify according to block-level elements or inline elements

Block-level elements (block-level) and inline elements (inline-level, also called "inline" elements).

a. Block-level element (occupies one line)

Block-level element: Its most obvious feature is that it fills its parent horizontally by default The content area of ​​the element, and there are no other elements on the left and right sides of it, that is, block-level elements occupy one line by default. Typical block-level elements are:

,

,

~

,
    , etc.

    b. Inline elements (can share a line with other elements)

    Inline elements: Inline elements do not form a new content block, that is, within their There can be other elements on the left and right, such as , , , etc., which are typical inline-level elements. displayAttributeElements equal to "inline" are all inline elements. Almost all replaceable elements are inline elements, such as , , etc.

    PS: (Block level and inline can be converted to each other): By setting the display attribute of CSS, inline elements can be turned into block level elements: display: block; You can also turn block-level elements into inline elements: display:inline.

    ##*The difference between block-level elements and inline elements:

    1.

    Block-level elements will occupy an exclusive line, and its width will automatically fill the width of its parent element;Inline elements It will not occupy a single line. Adjacent in-line elements will be arranged in the same line. It will not wrap until it cannot fit in one line. Its width changes with the content of the element.

    2 .Generally, block-level elements can be set with width, and height attributes, while inline elements with width and height set have no effect.

    3. Block-level elements can be set with margin and padding. The horizontal padding-left of inline elements ,padding-right,margin-left,margin-right all produce margin effects, but padding-top in the vertical direction ,padding-bottom,margin-top,margin-bottom will not produce margin effect. (Effective in horizontal direction, invalid in vertical direction).

    2. Classification according to replaceable and non-replaceable elements

    Of course, in addition to block-level and inline elements, it can also be classified according to whether it is a replaceable element.

    a. Replace element (this element can produce different display effects according to the change of a certain attribute)

    Replace element: The browser will The tags and attributes of the element determine the specific display content of the element.

    For example: the browser will read the image information and display it based on the value of the src attribute of the tag. , and if you view the (X)HTML code, you cannot see the actual content of the image; another example is to determine whether to display the input box or the radio button based on the type attribute of the tag wait.

    ##(X), ,