Almost all elements in HTML belong to an inline element or block element. The following describes the features of block and inline:
Features of block elements:
Always starts on a new line;Let's take a closer look at their situation.
Block Element)It is generally a container element of other elements. Block elements generally start from a new line and can accommodate inline elements and other block elements. Common block elements are section labels 'P ".
If no CSS function is available, the block elements are arranged in the order of each row. With CSS, we can change the default layout of HTML and place block elements in the desired position. Instead of just starting another line. It should be noted that table labels are also a type of block elements. Table based layout and CSS based layout are from average users (excluding persons with visual impairment and blind people) the two la s have no difference except the page loading speed. However, if a common user inadvertently clicks the page source code button, the difference between the two is very large. The CSS layout page source code, designed based on a good refactoring concept, can at least allow common users without web development experience to quickly understand the content. From this perspective, CSS layout code should have a better aesthetic experience.
You can think of the block container element Div as a box, or it is easier to understand if you have played the clipboard. First, we cut down the necessary articles from various newspapers and magazines. Each piece of cut is a block. Then we pasted the paper block to a blank new paper with glue based on our typographical intent. This forms your own unique digest Express. As an extension of technology, webpage layout design follows the same pattern.
Inline Element)It is generally a basic element based on the semantic level (semantic. Inline elements can only contain text or other inline elements. Common inline elements are "".
It should be noted that the Chinese name of inline element has multiple inline elements, embedded elements, in-line elements, and straight-forward elements. Basically, there is no unified translation. What do you call love. When we mention inline elements, we will think of a display attribute: Display: inline; which can fix the famous IE Double Floating boundary.
The Inline elements can be further distinguished. There are several elements (such as and <input>) that are special and can define the width and height.
Both 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. After CSS control is added, the attribute differences between block elements and inline elements will not be different. For example, we can add the inline element cite to the display: block attribute so that it also has attributes starting from the new line each time.
Nesting rules for block and inline elements:A block element can contain inline elements or some block elements, but an inline element cannot contain block elements. It only contains other inline elements.
You can divide all the block elements into several levels again. Because the visible elements only appear in the <body>, we place the <body> In the first level, next, place the elements that cannot be freely nested in the third level, and the others will be placed in the second level. The so-called element that cannot be freely nested can only contain inline elements, including:
Why can second-level elements be freely nested? We can regard them as some containers (or boxes), and the size of these containers can be freely changed. For example, we can embed <ul> in <div>, you can also embed <div> in <li>.
There are several special elements in HTML: <ul>, <ol>, <DL>, and <Table>. Their child layers must be specified elements, the Sub-Level of <ul> and <ol> must be <li>. The Sub-Level of <DL> must be <DT> or <DD>; the sub-layers of <Table> must be <caption>, <thead>, <tfoot>, and <tbody>, the sub-layer must be <tr> (<tr> only available in <thead>, <tfoot>, and <tbody> ), <TD> or <TH>.
The following is a tag nesting rule that must be followed under HTML 4 strict and XHTML 1.0 strict. For example, you cannot<a>Embed another<a>Such an agreement.
Note:
Instead<HTML>) - A lowercase word table indicates a group or a series of HTML tags.
- Each entry (TAG) follows a group of tags. If this list is not available, it indicates that the entry (TAG) cannot contain any tags. This means that the entry can only contain plain text content (# pcdata, see below ). If you specify (empty), this means that the entry cannot contain any form of content. For flow, inline, block, object, and body, the content that can be contained in the object is provided separately in this document.
- # Pcdata refers to "parsed character data", that is, plain text content (excluding any HTML tag, but the escape content can exist, such
äAndä) - CDATA indicates "character data", which means that plain text content without escaping content is not included. For details, refer to CDATA confusion.
- Excluding... means that it is not allowed to directly or indirectly include the listed elements
Variable ElementIt is based on the above two changes with the environment. Its basic concept is that it needs to determine whether the element is a block element or an inline element based on the context relationship. The variable element still belongs to the above two element categories. Once the context relation determines its category, it must follow the block element or Inline element rule restrictions.
Details of the block and inline types of HTML tags are as follows:
Block Element)
◎ Address-address
◎ BLOCKQUOTE-block reference
◎ Center-align Blocks
◎ Dir-directory list
◎ Div-common block levels are easy, and it is also the main tag of CSS layout
◎ DL-definition list
◎ Fieldset-Form Control Group
◎ Form-interactive form
◎ H1-title
◎ H2-subtitle
◎ H3-Level 3 title
◎ H4-4 level title
◎ H5-Level 5 Title
◎ H6-6 level title
◎ HR-horizontal Separator
◎ Isindex-input prompt
◎ Menu-Menu list
◎ Optional content of noframes-frames (content in this block is displayed in browsers that do not support frame
◎ NoScript-optional script content (this content is displayed in browsers that do not support scripts)
◎ Ol-sorting form
◎ P-paragraph
◎ Pre-format text
◎ Table-table
◎ Ul-non-sorted list Inline Element)
◎ A-anchor ◎ abbr-abbreviation
◎ Acronym-First word
◎ B-bold (not recommended)
◎ BDO-bidi override
◎ Big-large font
◎ Br-line feed
◎ CITE-Reference
◎ Code-computer code (required when source code is referenced)
◎ Dfn-define a field
◎ Em-emphasis
◎ Font-font setting (not recommended)
◎ I-italic
◎ IMG-Image
◎ Input-input box
◎ KBD-define keyboard text
◎ Label-Table label
◎ Q-short reference
◎ S-hyphen (not recommended)
◎ Samp-Define sample computer code
◎ Select-select a project
◎ Small-small font text
◎ Span-commonly used inline containers, defining text blocks
◎ Strike-dashes
◎ Strong-highlighted in bold
◎ Sub-subscript
◎ Sup-superscript
◎ Textarea-multi-line text input box
◎ Tt-telex text
◎ U-underline
◎ Var-define variables Variable Element
◎ Applet-Java Applet
◎ Button-button
◎ Del-delete text
◎ IFRAME-inline Frame
◎ Ins-inserted text
◎ Map-image block (MAP)
◎ Object-object
◎ Script-client script
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
