What are the inline block elements in html?

In HTML, inline block-level elements are: img used to mark images in web pages; input used to collect user information; td used to label standard cells in tables; single or multiple selections can be created The select of the menu; the textarea that defines the multi-line text input control; the label that defines the label for the input element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Inline block elements combine the characteristics of inline elements and block elements, but each has its own trade-offs. Therefore, inline block elements are used more often due to their characteristics in daily use.

Characteristics of inline block elements:

• No automatic line wrapping

• Able to recognize width and height

• The default arrangement is from left to right

There are relatively few inline block-level elements, they are: img, input, td, select, textarea, label;

img: used to mark images in web pages, with attributes src: image resource path, alt: prompt message. When the image fails to load, the specified text will be displayed instead of the image

input: Input box, with attribute type input box type and attribute value (text means text input box, file file selector, password input box, email input box, number input box, button button). placeholder placeholder character, used to prompt what should be entered in the input box. value represents the content in the input box. When name interacts with the backend server, it must carry the name attribute, which is the parameter name when sending the request.

Radio selection type="radio" means that a radio option is in the same group of radio button boxes and only one value can be selected. Set the name attribute values ​​​​of multiple radios to the same value type="checkbox "Check box

label: It is bound to the input label and has the attribute for. The attribute value is the id value of the input box. The checked attribute is the selected state of the label

select: drop-down list

Extended information:

Conversion of inline block-level elements

By setting the CSS style attribute display:inline-block, inline elements or block-level elements can be converted into inline block-level elements;

But if the element is converted into an inline element, set display: inline;

If the element is converted into a block-level element, set display:block;

inline-block is a new attribute of css2.1. This is not supported for versions below IE7 properties, so some compatible methods are needed.

Recommended learning: html video tutorial

The above is the detailed content of What are the inline block elements in html?. For more information, please follow other related articles on the PHP Chinese website!