is a block-level element.
For those who have learned CSS, they can understand it immediately. But it is difficult for novices to understand. I mainly want to make it more familiar to novices!
Using the word container will make it easier to understand their existence and purpose. Inline elements are equivalent to small containers, and < div> is equivalent to a large container. Of course, a small container can be placed in a large container. It is a small container. This way you may have a preliminary impression in your mind. If we want to put some clean water in a large container. But what if I also want to put some ink in it? It's very simple. We take out the small container, fill it with ink and put it into the clean water in the large container.
Block elements are generally container elements for other elements
Block elements generally start on a new line and can accommodate inline elements and other block elements. A common block element is the paragraph tag 'P". The "form" block element is special. It can only be used to accommodate other block elements.
Without the effect of css, the block elements will be arranged sequentially on a new line each time. With CSS, we can change the default layout mode of this HTML and place the block elements where you want. Instead of stupidly starting a new line every time. It should be pointed out that the table tag is also a type of block element. Table based layout and css based layout look at these two layouts from the perspective of ordinary users (excluding visually impaired people, blind people, etc.), except for page loading speed. Except for the difference, there is no other difference. However, if an ordinary user inadvertently clicks the view page source code button, the difference between the two will be very large. The CSS layout page source code designed based on good reconstruction concepts can at least allow ordinary users without web development experience to quickly understand the content. From this perspective, css layout code should have a better aesthetic experience.
You can think of the block container element div as boxes, or if you have played with clipping, it will be easier to understand. We first cut out the necessary articles from various newspapers and magazines. Each piece of cut content is a block. Then we glued these pieces of paper onto a new piece of blank paper according to our layout intention. This will form your own unique abstract. As an extension of the technology, web layout design follows the same pattern.
Inline elements are generally based on basic elements at the semantic level. Inline elements can only hold text or other inline elements, and the common inline element "a" is.
Block element (block element) and inline element (inline element) are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start on a new line. When CSS control is added, this attribute difference between block elements and inline elements no longer becomes a difference. For example, we can add an attribute such as display:block to the inline element cite, so that it also has the attribute of starting from a new line every time.
The basic concept of a variable element is that it needs to determine whether the element is a block element or an inline element based on the context. Variable elements still belong to the above two element categories. Once the context determines its category, it must follow the rules of block elements or inline elements. See full text for rough element classification.
Regarding the Chinese name of inline element, there are many kinds of inline elements, inline elements, inline elements, and inline elements. Basically there is no unified translation, just call it whatever you want. In addition, when talking about inline elements, we will think of a display attribute called display:inline; this attribute can fix the famous IE double floating border problem.
block element
address - address blockquote - block quote center - alignment block dir - Directory list div - Commonly used block level is easy, and it is also the main tag of css layout dl - Definition list fieldset - form control group form - Interactive form h1 - Heading h2 - Subtitle h3 - Level 3 heading h4 - Level 4 heading h5 - Level 5 heading h6 - Level 6 heading hr - Horizontal separator line isindex - input prompt menu - Menu list noframes - frames optional content (this block content is displayed for browsers that do not support frames) noscript - optional script content (this content is displayed for browsers that do not support scripts) ol - sorted list p - paragraph pre - formatted text table - table ul - unsorted list inline element
a - anchor abbr - abbreviation acronym - first word b - bold ( Not recommended) bdo - bidi override big - big font br - line break cite - quote code - computer Code (required when quoting source code) dfn - definition field em - emphasis font - font setting (not recommended) i - italic img - picture input - input box kbd - define keyboard text label - table label q - short quotes s - underscore (not recommended) samp - definition sample computer code select - item selection small - small font text span - commonly used inline container, defining blocks within text strike - underline strong - bold emphasis sub - subscript sup - superscript textarea - multi-line text input box tt - telex text u - underline var - Define variables Variable elements
Variable elements determine whether the element is a block element or an inline element according to the context.
applet - java applet button - button del - delete text iframe - inline frame ins - inserted text map - image block (map) object - object object script - client script Welcome to join the IT exchange group:
