Inline elements, block-level elements, and variable elements in the html structure [memo]

Source: Internet
Author: User

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 tags 'P. The "form" block element is special. It can only accommodate other block elements.

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.

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 "".

Block element)AndInline element)They are all concepts in the html specification. The basic difference between block elements and inline elements is that block elements are generally
Start from the 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
The display: block attribute also has attributes starting from the new line each time.

Variable ElementThe 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. For rough element classification, see the full text.

AboutInline element)Has a variety of inline elements, embedded elements, line elements, 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.

Block element)
* Address-address
* Blockquote-block reference
* Center-align Blocks
* Dir-directory list
* Div-common block-level labels are easy, and they are also the main labels of css layout.
* Dl-definition list
* Fieldset-form Control Group
* Form-interactive form
* H1-large title
* H2-subtitle
* H3-Level 3 title
* H4-4 level title
* H5-Level 5 Title
* H6-6 titles
* 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.
* Noscr platinum pt-) Optional script content (this content is displayed in browsers that do not support scr platinum pt)
* 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-defines the keyboard text
* Label-Table label
* Q-short reference
* S-hyphen (not recommended)
* Samp-Defines sample computer code
* Select-select a project
* Small-small font text
* Span-commonly used inline containers that define 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
The variable element determines whether the element is a block element or an inline element based on the context.
* Applet-java applet
* Button-button
* Del-delete text
* Iframe-inline frame
* Ins-inserted text
* Map-image block (map)
* Object-object
* Scr listen pt-client script

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.