Parsing of block elements and inline elements in HTML Getting started HTML

Block elements and inline element parsing blocks elements (block element) in HTML Getting Started HTML are typically container elements of other elements, and block elements generally start from the new row, which can accommodate inline elements and other block elements, and inline elements (inline element) are generally based on the semantic level The basic element of (semantic). Inline elements can only hold text or other inline elements

Let's start by analyzing the definition and parsing of block-level elements, inline-level elements:

Block element is generally the container element of other elements, the block element generally starts from the new row, it can accommodate inline elements and other block elements, the common block element is the paragraph label ' P '. The block element of "form" is special, and it can only be used to accommodate other block elements.
If there is no CSS, the block elements are ordered to go down in a row each time. With CSS, we can change the default layout of this HTML and put the block elements where you want them. Instead of every stupid other line. It should be noted that table tags are also one of the block elements, table based layout and cssbased layout from the perspective of the general user (not including visually impaired, blind, etc.) of the two layouts, in addition to the page loading speed differences, there is no other difference. But if ordinary users inadvertently point to the page Source code button, the difference between the two is very large. Based on the concept of good reconstruction of CSS layout page source code, at the very least, can let no web development experience of ordinary users to quickly read the content. From this point of view, CSS layout code should have a better aesthetic experience.
You can think of the block element div as a box, or if you've played a clip, it's easier to understand. We first cut down the articles we need from various newspapers and magazines. Each cut is a block. Then we put the pieces of paper on a blank new piece of paper according to our own layout intent. This will create your own unique digest letters. As an extension of technology, Web page layout design also follows the same pattern.

Inline elements (inline element) are generally based on semantic level (semantic) basic elements. Inline elements can only hold text or other inline elements, common inline element "a".
It should be stated that the Chinese term of the inline element has multiple inline elements, inline elements, in-line elements, and straight-forward elements. Basically there is no unified translation, love how to call it. In addition to the inline element, we think that the property of a display is display:inline, which fixes the famous IE double floating boundary problem.
Both the block element and the inline element are concepts in the HTML specification. The basic difference between a block element and an inline element is that the block element generally starts from the new row. When CSS control is added, this attribute difference between the block element and the inline element does not become a difference. For example, we can completely add an inline element cite to a property such as Display:block, so that he also has properties that start from the new line each time.

Block element
Address-Address
BLOCKQUOTE-Block reference
Center-lifting the alignment block
Dir-directory list
Div-Common block-level easy, is also the main label of CSS layout
DL-Definition list
Fieldset-form Control Group
form-Interactive form
H1-Big title
H2-Subtitle
h3-3 level headings
h4-4 level headings
h5-5 level headings
h6-6 level headings
HR-Horizontal divider Line
isindex-input Prompt
Menu-Menu list
noframes-frames Optional content (this chunk content is displayed for browsers that do not support frame)
noscript-Optional script content (this content is displayed for browsers that do not support script)
ol-Sort the form
P-Paragraph
Pre-formatted text
Table-Table
• UL-Non-sorted list


Inline elements (inline element)
A-anchor point
abbr-abbreviation
acronym-the first word
・the-Bold (not recommended)
Bdo-bidi Override
Big-Large font
BR-line break
cite-citation
Code-Computer code (required when referencing source)
DFN-defining fields
em-Emphasis
font-font settings (not recommended)
• I-Italic
img-Images
Input-Input box
KBD-Define keyboard text
Label-table labels
Q-Short reference
• S-Medium dash (not recommended)
Samp-Define sample computer code
Select-Project selection
Small-Small font text
span-commonly used inline containers, defining chunks within text
Strike-Medium dash
Strong-Bold emphasis
Sub-subscript
sup-Superscript
textarea-Multi-line text input box
TT-Telex text
• U-Underline
var-Defining variables


When an inline element, one of the following attributes is defined in the CSS, it has the feature of the Block element
1) Display:block;
2) Float:left; (not only features with block elements, but also floating on the left)
But at this time the inline elements, although the characteristics of the block elements, but the two are a little different, the first, completely and block elements exactly the same, should be a separate row, from left to right, without the width and Height properties, strictly follow the flow layout model block elements of the flow, from top to bottom flow, Second, the size is exactly what can be contained, and the right side floats, can be multiple on one line.

When added to the position:absolute/relative, the block and inline elements are not constrained by the parent zone and can be moved to any location where the width and height properties are added to the layer's characteristics. (plus width and height is a bit of a benefit, is compatible with IE browser, all browsers are the same reality)

Parsing of block elements and inline elements in HTML Getting started HTML