Basic elements of HTML (element)

I write this article is i in it to make a real garden study for some time, in turn to review when the collation. Although only some basic knowledge content, hope can help everyone.

First, we need to understand what the so-called HTML definition is.

"HTML: Hypertext Markup language, text: TXT-formatted file, tag: Append semantics to text with tags "

If you've got an idea of html above, we're going to look at its three elements.

Block-level (block-level) and inline (inline) elements and inline fast elements (inline-block)

Popular Science background: HTML Layout: Document flow, float float, position positioning and display:flex elastic layout.

Based on the first occurrence of the document flow, some elements are also given its original semantics.

Blocks: block-level elements alone occupy a row, can be set wide height , if the width is not given, block-level elements default to the width of the browser, that is, 100% width;

inline: inline elements: You can have a row of multiple labels , the width of the high attribute value does not take effect, completely by the content open wide !

inline-block: inline block elements: Combining the main points of the inline and block-level, not only can set the width of the height, but also can be more than one row of labels display ;

(Div,p,ul,li) Container: block-level element
<div> The default property is the front and back plus <br> line break.

(span,img,input,a) Text: inline elements
<span> tags do not have semantics, function: can set properties individually

Some of the main elements to be mastered are given. At the same time I believe that the audience is also easier to understand and remember these things. If you still don't have them in your head. You can refer to a Word document in which a paragraph of text is left-to-right and top-to-bottom in a row by default. The table is not a new row of two columns or a row of multiple columns by default is covered with the entire sheet of A4 paper. When it comes to this, you should be able to remember them.

Concepts and representatives have been said, but we have to understand not only their semantics, but also the use of them.

First say the inline bar, text and img it to achieve the position of the right, medium displacement, is the word editor in the 6 locations are identical. In Web settings, Text-align:center is frequently used .

There is no explanation, the inner scripture, as follows

text-align: is set in the parent box label , which specifies that the inline element within the box ( text or img tag) is centered.

line-height: Refers to the height of the line box (row height) of the text. Consists of (top, bottom spacing and text height)

To achieve the principle of vertical: container height = line box height. The text height defaults to 16px, and when the height of the container is =line-height=200px, the lower spacing will automatically divide the 184px.

Margin : 0 Auto: is set in the box label to be centered . Generally also set the width of the box.

vertical-align:middle: is set in two rows of element tags , so that the elements between the two rows and the last line of elements in front of the element in line with each other vertically aligned.

Tex-align and Line-height are often paired with the vertical center of a line of text.

Vertical-align:middle are often used for vertical alignment of text and IMG.

Vertical-align This attribute, if you want to scrutiny, it really needs to be put into a lot of new content. In fact, we also do not know his baseline, midline, the top line of these content, know how to use the good.

There is one more thing to say:Vertical-align is a inline-block dependent element. If it is not a inline-block element, it will be ignored. Some elements are supported by default: Picture, button, single check box, one -line/Multiline text box and other HTML controls

Basic elements of HTML (element)