First, we need to understand that all html elements are either block elements or inline elements. Let's learn about the characteristics of block and inline:
Characteristics of the block element:
Always start on a new line;
Height, row height, top and bottom edge distance can be controlled;
The width defaults to 100% of its container, unless a width is set.
Features of inline element:
And other elements on the same line;
Height, row height and top and bottom margin cannot be changed;
The width is the width of its text or picture and cannot be changed.
Let's learn more about them.
A block element is generally a container element for other elements. Block elements generally start from a new line, which can accommodate inline elements and other block elements. The common block element is the paragraph label 'P'. "form" is a special block element, which can only be used to accommodate other block elements.
If there is no role of css, the block elements will be listed down in the order of starting a new line each time. With css, we can change the default layout mode of this html and place the block elements in the position you want. Instead of starting a new line every time. It should be noted that the table tag is also a kind of block element. From the perspective of general users (excluding visually impaired people and blind people), the table based layout and css based layout have no other differences except the difference in page loading speed. However, if ordinary users inadvertently click the View Page Source Button, the difference between the two will be very large. The css layout page source code designed based on a good reconfiguration concept can at least enable ordinary users without web development experience to quickly understand the content. From this perspective, css layout code should have a better aesthetic experience.
You can imagine the block container element div as boxes, or if you have played with clip art, it will be easier to understand. First, we cut out the articles we need from various newspapers and magazines. Each cut is a block. Then we re paste these pieces of paper onto a new blank paper with glue according to our own typesetting intention. In this way, you can form your own unique digest bulletin. As an extension of technology, web page layout design also follows the same pattern.
Inline elements are generally semantic based basic elements. Inline elements can only contain text or other inline elements. The common inline element is "a".
It should be noted that the Chinese name of inline element includes multiple inline elements, inline elements, inline elements, and inline elements. Basically, there is no unified translation. Call it what you like. In addition, when referring to inline elements, we will think of a display attribute that is display: inline; This property can fix the famous IE double floating boundary problem.
Block element and inline element are concepts in the html specification. The basic difference between block elements and inline elements is that block elements generally start from a new line. When css control is added, the attribute difference between block elements and inline elements will not become a difference. For example, we can add an attribute such as display: block to the inline element cite, so that it can also start from a new line every time.
The variable element is based on the above two and changes with the environment. Its basic concept is that it needs to determine whether the element is a block element or an inline element according to the context. The variable element still belongs 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
◎ address – address
◎ blockquote – block reference
◎ center – center lifting alignment block
◎ dir - List of contents
◎ div – easy to use at the block level, which is also the main label of css layout
◎ dl - Definition list
◎ fieldset – form control group
◎ form – Interactive form
◎ h1 – Headline
◎ h2 - Subtitle
◎ h3 – Level 3 title
◎ h4 – Level 4 title
◎ h5 – Level 5 title
◎ h6 – Level 6 title
◎ hr - Horizontal separation line
◎ isindex – input prompt
◎ menu – Menu list
◎ noframes – optional contents of frames, (for those that do not support frames browser Show the content of this block
◎ noscript - optional script Content (display this content for browsers that do not support script)
◎ ol - Sort form
◎ p – Paragraph
◎ pre - formatted text
◎ table – table
◎ ul – Non sorted list
Inline element
◎ a – anchor point ◎ abbr – abbreviation
◎ acronym - Acronym
◎ b - Bold (not recommended)
◎ bdo – bidi override
◎ big - large typeface
◎ br - Line feed
◎ cite - reference
◎ code – computer Code (required when referencing source code)
◎ dfn - Define field
◎ em - Emphasis
◎ font – font setting (not recommended)
◎ i - Italic
◎ img – pictures
◎ input – Input field
◎ kbd - Define keyboard text
◎ label – Table label
◎ q - Short reference
◎ s – Middle dash line (not recommended)
◎ samp – define sample computer code
◎ select – Item selection
◎ small - small font text
◎ span – Common inline container, defining blocks within text
◎ strike – middle dash
◎ strong - Bold emphasis
◎ sub - subscript
◎ sup - superscript
◎ textarea - Multiline text input box
◎ tt - Telex text
◎ u - Underline
◎ var – Define variable
Variable element
Variable elements are block elements or inline elements determined according to 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
