HTML container labels and text labels

Source: Internet
Author: User

Container-level and text-level tags in HTML, block-level elements and inline elements in CSS are the four nouns we often compare (the inline block level is not considered at the moment). Note: If the label is nested incorrectly, a browser parsing error may occur, just for nesting.

Container label
1、容器级的标签可以简单的理解为能嵌套其它所有标签的标签。2、常见容器级的标签: div h ul ol dl li dt dd ...。

Text labels
1、文本级的标签对应容器级标签,只能嵌套文字/图片/超链接的标签。2、常见文本级的标签:span p buis strong em ins del ...。

Block-level elements
1、css中的块级元素基本与html中的容器级标签对应,包括: **p** div h ul ol dl li dt dd ...。2、*ps:不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd).*

In-line elements
1、行内元素也基本与文本标签对应:span buis strong em ins del。

Block-level elements and inline elements

1. Block-level elements are exclusive to one row, and inline elements are not exclusive.
2. If the width height is not set, the block-level element defaults to the parent element, and the setting is displayed as set;
Inline elements cannot be set to a wide height, and the default is consistent with what is contained.

PS: In order to enable the element to be able to not monopolize a row, but also can set the width and the height, then appears the inline block level element

Toggle display Mode in CSS

You can set the display mode by displaying the label's properties.

Display Fetch value

1、block 块级2、inline 行内3、inline-block 行内块级

HTML container labels and text labels

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.