Detailed introduction to html block elements and inline elements

Original text here

Classification of block-level elements Block-level elements are divided into three types according to whether they are applied to structure or content: structured block elements, terminal block elements, and multi-target block elements. 1. Structured block elements This type of element is used to construct the structure of the document. A good document structure is very beneficial to search engines and the application of other technologies (such as JavaScript ) . They have no semantic meaning. They only divide the organization of the document and do not reflect the content of the document. Main structured block elements * * * * Support structured elements * * * * * * * * * 2. Terminal block elements This type of element is used to move from structure to content, and they have semantic meaning , can indicate the nature of the content. Terminal block elements belong to the end of the structure. They cannot contain other block-level elements, only text or line-level elements. Terminal block element * ... * * * * Multi-objective block elements have structural connotations when used in a structured manner, and semantic connotations when used in terminal form. Multi-target block elements can contain either block elements or content (the combination of text and line-level elements is content), but not both at the same time. Content should be placed in block elements. Block elements should not be used as siblings of line-level elements and text. Due to the limitations of the HTML validator, there is currently no way to detect this situation, but it should be avoided. Multi-target block elements * * * * * * When talking about CSS layout, we need to know something in advance. For various HTML tags/elements, a classification can be made from the block level: either block (block element) or inline ( Inline element ): Characteristics of block elements: * Always start on a new line; * Height, line height and top and bottom margins can all be controlled; * The width defaults to 100% of the container in which it is located, unless a width is set. Characteristics of inline elements: * and other elements are on the same line; * Height, line height and top and bottom margins cannot be changed; * Width is the text or picture it accommodates The width cannot be changed. Their properties and applications are further explained below: ◎Block element (block element) is usually used as a container for other elements, and it can accommodate inline elements and other block elements. We know that by default, block elements will be arranged downwards in a new line at a time. By controlling its style with CSS, we can change this default layout mode and place the block elements where you want. . It should be pointed out that the table tag is also a type of block element. Based on table table and CSS+p-based layout, in the user's view, in addition to the difference in page loading speed (table loads in all content elements Displayed after completion), there is no other difference. But judging from the source code of the page, the difference is very large. The CSS layout source code designed based on the concept of good structure can at least make it easy for users without web development experience to find continuous page content. From this perspective, CSS layout code should have a better aesthetic experience. We can imagine modularity 's p's as boxes, and then arrange them according to our own wishes to form complete content. Web page layout design follows the same pattern. Block element (block element) HTML tag Category details * address - address * blockquote - block Quote * center - center alignment block * dir - Directory list * p - Commonly used block level, also the main tag of CSS layout * dl - Definition list * field set - form control group * form - interactive form (can only be used to accommodate other block elements) * h1 - large title * h2 - subtitle * h3 - level 3 title * h4 - level 4 heading * h5 - level 5 heading * h6 - level 6 heading * hr - horizontal separator line * isindex - input prompt * menu - menu list * noframes - frames optional content, (display this block content for browsers that do not support frames) * noscript - optional script content (display this content for browsers that do not support script) * ol - Sorting form * p - Paragraph * pre - Formatted text * table - Table * ul - Non-sorted list ◎Inline elements (inline elements) are generally based on Basic elements at the semantic level can only accommodate text or other inline elements. In order to clearly show the difference between block and inline, we can use the demonstration of their respective representative elements p and span to illustrate: Inline element (inline element) HTML tag classification details * a - anchor

* abbr - abbreviation * acronym - first word * b - bold (not Recommended) * bdo - bidi override * big - large font * br - line break * cite - quote * code - computer code (required when citing source code) * dfn - Define fields * em - Emphasis * font - Font settings (not recommended) * i - Italic * img - Picture * input - input box * kbd - define keyboard text * label - table label * q - short quote * s - underscore (not recommended) * samp - definition example Computer code * select - item selection * small - small font text * span - commonly used inline container, defining blocks within text * strike - underline * strong - bold emphasis * sub - subscript * sup - superscript * textarea - multi-line text input box * tt - telex text * u - underline * var - Define variables ◎Variable elements are based on the above two and change with the environment. Its basic concept is to determine whether the element is a block element or an inline element based on the context. Once its category is determined, it follows the rules for block or inline elements. Variable elements HTML tag classification details * applet - java applet * button - Button * del - Delete text * iframe - inline frame * ins - inserted text * map - picture block (map) * object - object object * script - client script But through CSS, we can get rid of the restrictions of HTML tag classification in the above table and freely apply the attributes we need on different tags/elements. For example, we can add the display:inline attribute to the block element [ul] tag to make the originally vertical list display horizontally. This is widely used when we set the Blog Navigation bar; we can also completely The inline element [cite] adds an attribute such as display:block, so that it also has the attribute of starting on a new line every time.