Block-level elements differ from inline elements

Block-level elements have the following characteristics compared to row-level elements:
(1), before and after the line display, block-level elements compared to "overbearing", the default state exclusive of a whole line.
(2), block-level elements are commonly used as containers, which can then "accommodate" other block-level elements and row-level elements, and row-level elements are generally used to organize content, that is, can only be used to "accommodate" text, pictures, hyperlinks and other line-level elements.
(3), block-level elements have a certain height and width, you can set the block-level elements of the width, height property to control.

From a page layout perspective, block-level elements can also subdivide basic block-level elements and block-level elements that are commonly used for page layouts.
The basic block-level elements are:
1). Title tag 2). Paragraph label <p>: Indicates the content of a piece of text.
3). Horizontal label

Block-level elements commonly used in layouts
1). There is a sequence table <ol>-<li>: represents multiple side-by-side list items, which have a distinct order of precedence.
2). unordered list <ul>-<li>: Represents multiple side-by-side list items, but there is no precedence between them.
3). Definition list <dl>-<dt>-<dd>: Represents the definition or interpretation of a term or product.
4). Table <table>: Represents a table used to describe a form that is displayed with structured data.
5). Form <form>: Represents the page content that is used to describe the user input.
6). partition <div>: Represents the content used to organize cell blocks. For ease of management, a large number of small chunks also need to be placed in a larger chunk for layout. Partition labels <div> the partitioning of chunks when used in page layouts, which is equivalent to a large container that accommodates block-level labels such as unordered lists, ordered lists, definition lists, and so on. Also can accommodate paragraphs, headings, text, pictures and other content.
In the actual development of,<div> commonly used to partition, Ul-li or Ol-li to achieve unordered or orderly list of items, Dl-dt-dd realize the text-to-picture mixed, TABLE-TR-TD realize the display of structured data, thus, in the page local layout, The following four commonly used local block layout structures are formed:
(1), Div-ul (OL)-li: often used for category navigation or menus, etc.
(2), DIV-DL-DT-DD: Commonly used in graphics and text mixed occasions
(3), TABLE-TR-TD: Often used for structured data display occasions
(4), FORM-TABLE-TR-TD: Often used in the form layout of the occasion

Row-level elements
Row-level labels are also known as inline labels, inline labels. When you use block-level labels to "build your organization" for a page, you need to use a row-level label to add content to each small block.

Row-level Labels: similar text display, according to the "line" one after the other, commonly used row-level labels are:

(1), Image label : Represents the display of a picture in a Web page.
(2), hyperlink tag <a>:
(3), range label <span>: Represents a range within a row. For example, implement special settings for a section within a line to differentiate other content.
(4), newline label <br/>: Indicates forced line break display.
(5), Input box label <input>
(6), multiline text field label <textarea>

Block-level elements differ from inline elements