Home Web Front-end HTML Tutorial Detailed introduction to HTML element classification

Detailed introduction to HTML element classification

May 27, 2017 pm 02:51 PM

HTMLElement classification

1. Classify according to block-level elements or inline elements

Block-level elements (block-level) and inline elements (inline-level, also called "inline" elements).

a. Block-level element (occupies one line)

Block-level element: Its most obvious feature is that it fills its parent horizontally by default The content area of ​​the element, and there are no other elements on the left and right sides of it, that is, block-level elements occupy one line by default. Typical block-level elements are: <p>, <p>, <h1>~<h6>, <ul>, etc.

b. Inline elements (can share a line with other elements)

Inline elements: Inline elements do not form a new content block, that is, within their There can be other elements on the left and right, such as <a>, <span>, <strong>, etc., which are typical inline-level elements. displayAttributeElements equal to "inline" are all inline elements. Almost all replaceable elements are inline elements, such as <img>, <input>, etc.

PS: (Block level and inline can be converted to each other): By setting the display attribute of CSS, inline elements can be turned into block level elements: display: block; You can also turn block-level elements into inline elements: display:inline.

##*The difference between block-level elements and inline elements:

1.

Block-level elements will occupy an exclusive line, and its width will automatically fill the width of its parent element;Inline elements It will not occupy a single line. Adjacent in-line elements will be arranged in the same line. It will not wrap until it cannot fit in one line. Its width changes with the content of the element.

2 .Generally, block-level elements can be set with width, and height attributes, while inline elements with width and height set have no effect.

3. Block-level elements can be set with margin and padding. The horizontal padding-left of inline elements ,padding-right,margin-left,margin-right all produce margin effects, but padding-top in the vertical direction ,padding-bottom,margin-top,margin-bottom will not produce margin effect. (Effective in horizontal direction, invalid in vertical direction).

2. Classification according to replaceable and non-replaceable elements

Of course, in addition to block-level and inline elements, it can also be classified according to whether it is a replaceable element.

a. Replace element (this element can produce different display effects according to the change of a certain attribute)

Replace element: The browser will The tags and attributes of the element determine the specific display content of the element.

For example: the browser will read the image information and display it based on the value of the src attribute of the <img> tag. , and if you view the (X)HTML code, you cannot see the actual content of the image; another example is to determine whether to display the input box or the radio button based on the type attribute of the <input> tag wait.

##(X)<img>, <input>, <textarea>, <select>, <object> in HTML is a replacement element. These elements often have no actual content, that is, an empty element

b. Non-replaceable elements

Non-replaceable elements: (X)HTML Most of the elements are non-replaceable elements, i.e. their contents are presented directly to the user.

ps: Generally, it is useless to set the width and height of inline elements, so why can some inline elements such as input or img be set? width, height?

Because input, img, etc. are all replacement elements, replacement elements generally have intrinsic dimensions, so they have width and height that can be set, which is quite special. When we do not set their width and height, the browser will give the default width and height. For example: <input type="text"> The text input box form of input will give the default width and height. But we can change his width and height.


The above is the detailed content of Detailed introduction to HTML element classification. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

Nested Table in HTML

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Table Border in HTML

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

HTML margin-left

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

HTML Table Layout

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Moving Text in HTML

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

HTML Ordered List

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

HTML onclick Button

How do you parse and process HTML/XML in PHP? How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

How do you parse and process HTML/XML in PHP?

See all articles