Introduction to nesting rules of html tags
|
There are many XHTML 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. We cannot nest them randomly according to our personal habits. So, what are the nesting rules of HTML tags?
1. Block-level elements It is generally used to build website architecture, layout, and carry content... It includes the following tags: Copy code The code is as follows:address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul 2. Embedded elements Generally used in some details or parts of the website content to "emphasize, distinguish styles, superscript, subscript, anchor", etc. The following tags are all embedded elements: Copy code The code is as follows: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 2. Nesting rules of HTML 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: Copy code The code is as follows:<div><h1></h1><p></p></div> —— True</p> <p> <a href=”#”><span></span></a> —— True</p> <p> <span><div></div></span> —— False 2. Block-level elements cannot be placed inside <p>: Copy code The code is as follows:<p><ol><li></li></ol></p> —— Wrong</p> <p> <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: Copy code The code is as follows: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: Copy code The code is as follows:<div><h2></h2><p></p></div> —— True</p> <p> <div><a href=”#”></a><span></span></div> —— True</p> <p> <div><h2></h2><span></span></div> —— False |
<<: MySQL spatial data storage and functions
>>: Introduction to using window.open, a jump menu that opens in a new window
Recommend
Comparative Analysis of IN and Exists in MySQL Statements
Background Recently, when writing SQL statements,...
Detailed explanation of Vuex environment
Table of contents Build Vuex environment Summariz...
The whole process record of introducing Vant framework into WeChat applet
Preface Sometimes I feel that the native UI of We...
Why does your height:100% not work?
Why doesn't your height:100% work? This knowl...
Sample code for seamless scrolling with flex layout
This article mainly introduces the sample code of...
Compilation process analysis of Remax framework for writing small programs using React (recommended)
Remax is an open source framework developed by An...
What are the similarities between the development of web design and western architecture?
History always repeats itself surprisingly well. ...
Detailed explanation of the definition and usage of MySQL stored functions (custom functions)
Stored Functions What is a stored function: It en...
Summary of common sql statements in Mysql
1. mysql export file: SELECT `pe2e_user_to_compan...
Detailed explanation of docker entrypoint file
When writing a Dockerfile, include an entrypoint ...
MySQL 8.0.16 Win10 zip version installation and configuration graphic tutorial
This article shares with you the installation and...
Linux installation Redis implementation process and error solution
I installed redis today and some errors occurred ...
Detailed explanation of Vue-router nested routing
Table of contents step 1. Configure routing rules...
About input file control and beautification
When uploading on some websites, after clicking t...
When the interviewer asked the difference between char and varchar in mysql
Table of contents Difference between char and var...