A block element is generally a container element for other elements. Block elements generally start on a new line. It can accommodate inline elements and other block elements. A common block element is the paragraph tag 'P'. The block element "form" compares In particular, it can only be used to accommodate other block elements.
Without the function of css, the block elements will be arranged one row at a time. With css, we can change the default layout of this html. Mode, place the block element where you want it, instead of stupidly starting a new line every time. It should be pointed out that the table tag is also a type of block element, and table based layout and css based layout are generally used. From the perspective of users (excluding visually impaired people, blind people, etc.), there is no other difference between the two layouts except the page loading speed. However, if an ordinary user inadvertently clicks the view page source code button, the two layouts will appear. The difference shown by the users is very big. The CSS layout page source code designed based on the concept of good reconstruction can at least allow ordinary users without web development experience to quickly understand the content. From this perspective, CSS layout The code should have a better aesthetic experience.
You can think of the block container element div as a box, or if you have played with clipping, it will be easier to understand. Let's first extract the required articles from various newspapers. The magazine is cut out. Each piece of cut content is a block. Then we glue these pieces of paper onto a new piece of blank paper to form your own unique digest. As an extension of technology, web layout design also follows the same pattern.
Inline elements are generally based on semantic level (semantic) elements. Inline elements can only accommodate text or other inline elements. Element, the common inline element "a".
What needs to be explained is: the Chinese name of inline element has a variety of inline elements, inline elements, inline elements, and direct elements. There is basically no unified translation. Call it whatever you want. In addition, when it comes to inline elements, we will think of a display attribute called display:inline; this attribute can fix the famous IE double floating boundary problem
(block element) and inline element (inline)
.element) are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start on a new line. When CSS control is added, this attribute difference between block elements and inline elements does not become a problem. There is a difference. For example, we can add an attribute such as display:block to the inline element cite, so that it also has the attribute of starting from a new line every time.
The variable element changes with the environment based on the above two. The basic concept is that he needs to determine whether the element is a block element or an inline element based on the context. Variable elements still belong to the above two element categories. Once the context determines its category, it must follow the rules of block elements or inline elements.
Block and inline classification details of html tags:
block element (block element)
div css xhtml xml Example Source Code Example Source Code
◎ address - address ◎ blockquote - block quote ◎ center - alignment block ◎ dir - directory list ◎ div - commonly used block level convenience, also the main tag of CSS layout ◎ dl - definition list ◎ fieldset - form control group ◎ form - interaction Form◎ h1 - Heading ◎ h2 - Subtitle ◎ h3 - Level 3 heading ◎ h4 - Level 4 heading ◎ h5 - Level 5 heading ◎ h6 - Level 6 heading ◎ hr - Horizontal dividing 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 - sorted form ◎ p - paragraph ◎ pre - formatted text ◎ table - table ◎ ul - non-sorted list
inline element (inline element)
div css xhtml xml Example Source Code Example Source Code
◎ a - anchor point ◎ abbr - abbreviation ◎ acronym - initial letter ◎ 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 - emphasize ◎ font - font settings (not recommended)
◎ i - italic ◎ img - picture ◎ input - input box ◎ kbd - define keyboard text ◎ label - table label ◎ q - short quote ◎ s - underline (not recommended)
◎ samp - defines sample computer code ◎ select - item selection ◎ small - small font text ◎ span - commonly used inline container, defines 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 variable
variable element
div css xhtml xml Example Source Code Example Source Code
A mutable element is a block element or an inline element depending on the context.
◎ applet-java applet
◎ button - button ◎ del - delete text ◎ iframe - inline frame
◎ ins - inserted text ◎ map - picture block (map)
◎ object - object object ◎ script - client script