Explanation of the basic elements of Html Element

I wrote this article after studying in the IT Cultivation Park for a period of time and reviewing it. Although it is just some basic knowledge content, I hope it can help everyone.

First of all, we need to understand what is the definition of html?

HTML DOM Node

In HTML DOM (Document Object Model), each part is a node:

The document itself is a document node

All HTML elements are element nodes

All HTML attributes are attribute nodes

The text within HTML elements is text nodes

Comments are comment nodes

Element object

In the HTML DOM, the Element object represents an HTML element.

Element objects can have child nodes of type element nodes, text nodes, and comment nodes.

NodeList object represents a list of nodes, such as a collection of child nodes of an HTML element.

Elements can also have attributes. Properties are attribute nodes.

[html: hypertext tag language, text: file in txt format, tag: use tags to to append semantics to the text]

If you already have an understanding of html through the above, let's start studying its three elements.

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

Some popular science background: html layout: documentation Flow, float, position and display:flex layout.

Based on the document flow that first appeared, some elements are also given their original semantics.

Block: Block-level element occupies a line alone, and the width and height can be set ; if no width is given, block-level elements The default is the width of the browser, that is, 100% width;

Inline: Inline elements: Multiple tags can exist in one line , and the width and height attribute values ​​​​are not It takes effect, completely depends on the content to support the width and height !

Inline-block: Inline block element: The key points of combining inline and block levels, not only can set the width and height, but also Multiple tags exist in one line for display;

(div, p, ul, li) container: block-level element

The default attribute is to add < before and after ;br>Line break.

(Span,img,input,a) text: inline element
tag has no semantics, function: attributes can be set independently

gives some main elements to master. At the same time, I believe it is easier for the audience to understand and remember these contents. If you still haven't formed their appearance in your mind. You can refer to the word document to see if a paragraph of text is arranged line by line from left to right and top to bottom by default. Whether the table adds one row and two columns or one row and multiple columns, the default is to cover the entire A4 paper. At this point everyone should be able to remember them.

The concepts and representatives have been mentioned, but we must not only understand their semantics, but also use them in a down-to-earth manner.

Let’s talk about inline first. The text and img should be positioned to the right, centered and shifted, which is exactly the same as the 6 positions in the word editor. In web page settings, Text-align: center is frequently used.

I won’t explain them one by one. Here is the inner scripture, as follows

Text-align: It is set in in the parent box tag specifies that the inline elements ( text or img tag) in the box are centered.

Line-height: refers to the height of the line box (line height) of the text. Composed of (top and bottom spacing and text height)

The principle of vertical implementation: container height = line box height. The default text height is 16px. When the container height=line-height=200px is set, the top and bottom spacing will be automatically divided into 184px.

Margin: 0 auto: It is set in the box label to be centered. Generally, the box width also needs to be set.

vertical-align:middle: It is set in the two inline element tags , so that the two inline elements are between the two and the last inline element The preceding inline elements are vertically aligned with each other.

Tex-align and line-height are often used together to vertically center a line of text.

Vertical-align:middle is often used for vertical alignment of text and img.

Vertical-align This attribute, if you want to study it carefully, really needs to incorporate a lot of new content. In fact, we don’t need to understand his baseline, midline, and top line. We just need to know how to use them.

There is one more thing that must be said:

vertical-align is an inline-block dependent element. If it is not an inline-block element, it will be ignored. Some elements support it by default: Pictures, buttons, single check boxes, single-line/multi-line text boxes and other HTML controls

The above is the detailed content of Explanation of the basic elements of Html Element. For more information, please follow other related articles on the PHP Chinese website!