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
MySQL 8.0.21 installation tutorial with pictures and text
1. Download the download link Click download. You...
Implementation of modifying configuration files in Docker container
1. Enter the container docker run [option] image ...
HTML version declaration DOCTYPE tag
When we open the source code of a regular website...
Detailed description of ffmpeg Chinese parameters
FFMPEG 3.4.1 version parameter details Usage: ffm...
JS implements the snake game
Table of contents 1. Initialization structure 2. ...
MySQL query optimization using custom variables
Table of contents Optimizing sorting queries Avoi...
CSS3 to achieve timeline effects
Recently, when I turned on my computer, I saw tha...
CentOS 6 uses Docker to deploy Zookeeper operation example
This article describes how to use docker to deplo...
Analyze the sql statement efficiency optimization issues of Mysql table reading, writing, indexing and other operations
Last time we talked about some SQL query optimiza...
Example code for converting Mysql query result set into JSON data
Mysql converts query result set into JSON data Pr...
How to quickly clean up billions of data in MySQL database
Today I received a disk alarm exception. The 50G ...
Summary of the use of element's form elements
There are many form elements. Here is a brief sum...
CSS simulates float to achieve the effect of center text surrounding the image on the left and right
What is text wrapping around images? This is the ...
Perfect solution to MySQL common insufficient memory startup failure
1. If MySQL is not started successfully, check th...
How to make vue long list load quickly
Table of contents background Main content 1. Comp...