Detailed introduction to HTML element classification

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: <p>, <p>, <h1>~<h6>, <ul>, 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 <a>, <span>, <strong>, etc., which are typical inline-level elements. displayAttributeElements equal to "inline" are all inline elements. Almost all replaceable elements are inline elements, such as <img>, <input>, 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 <img> 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 <input> tag wait.

##(X)<img>, <input>, <textarea>, <select>, <object> in HTML is a replacement element. These elements often have no actual content, that is, an empty element

b. Non-replaceable elements

Non-replaceable elements: (X)HTML Most of the elements are non-replaceable elements, i.e. their contents are presented directly to the user.

ps: Generally, it is useless to set the width and height of inline elements, so why can some inline elements such as input or img be set? width, height?

Because input, img, etc. are all replacement elements, replacement elements generally have intrinsic dimensions, so they have width and height that can be set, which is quite special. When we do not set their width and height, the browser will give the default width and height. For example: <input type="text"> The text input box form of input will give the default width and height. But we can change his width and height.

The above is the detailed content of Detailed introduction to HTML element classification. For more information, please follow other related articles on the PHP Chinese website!