A detailed summary of HTML tag nesting rules suitable for beginners
|
I have been relearning HTML recently, which can be regarded as a new understanding of HTML! Don't underestimate this thing, all web pages are based on it! Let’s summarize the nesting rules of HTML tags in detail below. I hope it will be helpful to everyone. XHTML has many tags: div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... When we use these tags to build the page structure, we can nest them infinitely. However, nesting also requires certain rules, and we cannot allow our personal habits to nest them randomly - after all, XHTML is not XML. In the XHTML language, we all know that the ul tag contains li, the dl tag contains dt and dd - the nesting rules of these fixed tags are very clear. However, there are still many tags that are independent and not bundled together, such as h1, div, p... So what are the nesting rules of these tags? Let’s talk about this topic today. When it comes to the nesting rules of XHTML tags, we first need to know that there are two types of XHTML tags: One is called block-level elements One type is called inline elements (inline, also called by many people: inline, inline, line level, etc.) The distinction between block-level elements and inline elements is simple. Please put the following two lines of code into the body tag: Copy code The code is as follows:<div style=”border: 1px solid red;”>div1</div> <div style=”border: 1px solid red;”>div2</div> The browser rendering effect: div1 div2 The two divs on the page occupy two lines of space. Unless they are floated or set in other ways, they are not next to each other. They both occupy their own line of space very aggressively. Whenever you see a tag with this phenomenon, you can call it a block element. Then put the following two lines of code into the body tag: Copy code The code is as follows:<span style=”border: 1px solid red;”>span1</span> <span style=”border: 1px solid red;”>span2</span> The browser rendering effect: span1 span2 This time, the two spans are in a row, and they are friendly and harmonious with each other... We can call such tag behaviors: inline elements; The difference between block-level elements and inline elements: Block-level elements are generally used to build website architecture, layout, and carry content. These heavy tasks are all block-level elements, which include the following tags: address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul Embedded elements are generally used in some details or parts of the website content to "emphasize, distinguish styles, superscripts, subscripts, anchors", etc. The following tags are all embedded elements: a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var Block elements and inline elements can be converted to each other. The conversion code is as follows: display: block; /* Convert to block element*/ display: inline; /* Convert to inline element*/ · The CSS calling rules for block elements and inline elements are different (this article discusses tag nesting, so this knowledge point will not be explained in detail). After a brief introduction to block elements and inline elements, we can now list the nesting rules of XHTML tags: 1. Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements. They can only contain other inline elements: <div><h1></h1><p></p></div> —— Yes <a href=”#”><span></span></a> —— Yes <span><div></div></span> — Wrong 2. Block-level elements cannot be placed inside <p>: <p><ol><li></li></ol></p> —— Wrong <p><div></div></p> — Wrong 3. There are several special block-level elements that can only contain inline elements and cannot contain block-level elements. These special tags are: h1, h2, h3, h4, h5, h6, p, dt 4. li can contain div tags - This one doesn't really need to be listed separately, but many people on the Internet are confused about it, so I'll briefly explain it here: Both li and div tags are containers for loading content. They have equal status and no hierarchy (for example, the strict hierarchy of h1 and h2^_^). You should know that the li tag can even accommodate its parent ul or ol. Why do some people think that li cannot accommodate a div? Don't think Li is so stingy. Although Li looks thin and small, she actually has a big heart... 5. Block-level elements are placed side by side with block-level elements, and inline elements are placed side by side with inline elements: <div><h2></h2><p></p></div> —— Yes <div><a href=”#”></a><span></span></div> —— Yes <div><h2></h2><span></span></div> — Wrong |
<<: Detailed explanation of commonly used CSS styles (layout)
>>: Vue basics MVVM, template syntax and data binding
Recommend
Do you know the meaning of special symbols in URL?
1.# # represents a location in a web page. The ch...
Solution to garbled display of Linux SecureCRT
Let's take a look at the situation where Secu...
Examples of using Docker and Docker-Compose
Docker is an open source container engine that he...
How to modify the scroll bar style in Vue
Table of contents First of all, you need to know ...
Q&A: Differences between XML and HTML
Q: I don’t know what is the difference between xml...
How to query data within a certain period of time with Vue front-end and Django back-end
Preface During the development process, you will ...
How to ensure transaction characteristics of MySQL InnoDB?
Preface If someone asks you "What are the ch...
10 performance configuration items that need to be adjusted after installing MySQL
In this blog, we will discuss ten performance set...
Detailed explanation of CSS3+JS perfect implementation of magnifying glass mode
About a year ago, I wrote an article: Analysis of...
How to use shtml include
By applying it, some public areas of the website c...
MySQL 5.7.21 decompressed version of the tutorial to restore data through the historical data directory
Situation description: The database was started a...
Detailed explanation of how to use the mysql backup script mysqldump
This article shares the MySQL backup script for y...
Docker deploys Mysql, .Net6, Sqlserver and other containers
Table of contents Install Docker on CentOS 8 1. U...
Introduction to local components in Vue
In Vue, we can define (register) local components...
Detailed steps for using jib for docker deployment in Spring Cloud
Introduction to Jib Jib is a library developed by...