It is necessary to understand the HTML nesting rules_html/css_WEB-ITnose

最近在重新学习HTML的知识，算是对HTML的一个重新认识吧！别小看了这东西，一切的网页可都是以它为基础的！下面就详细归纳一下HTML标签的嵌套规则吧，希望对大家有所帮助。

XHTML的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候，是可以将它们无限嵌套的，但是，嵌套也需要有一定规则，不能任由自己的个人习惯胡乱嵌套?? XHTML 必竟不是 XML。

在 XHTML 的语言里，我们都知道：ul 标签包含着 li、dl 标签包含着 dt 和 dd??这些固定标签的嵌套规则十分明确。但是，还有许多标签是独立的，它们没有被捆绑在一起，比如 h1、div、p……那么这些标签的嵌套规则到底是怎样的？今天就来说说这个话题。

提到 XHTML 标签的嵌套规则，我们先得知道有这么二类 XHTML 标签：
一类叫做 块级元素(block)
一类叫做 内嵌元素（inline，也有许多人叫它：内联、行内、线级等）

块级元素 和 内嵌元素 的划分标准很简单，请把下面二行代码放进 body 标签里：

div1

div2

浏览器的呈现效果：
div1
div2

页面呈现的这二个 div 占据了二行空间，除非让它们浮动（float）或是进行其他设置，否则谁都不挨着谁，它们都很霸道的占领属于自己的那一行空间??但凡看到某个标签有此现象，你就可以叫它：块级元素（block）；

再把下面二行代码也放进 body 标签里：
span1
span2

浏览器的呈现效果：
 span1 span2

这一次，两个 span 并列在一行，它们之间睦邻友好、亲切和谐……像这样的标签行为，我们可以称它们为：内嵌元素（inline）;

块级元素和内嵌元素的区别：

·块级元素 一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的，它包括以下这些标签：

address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

 

· 内嵌元素 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：

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

· 块元素 和 内嵌元素 是可以互相转换的，转换的代码如下：
display: block; /* 转成块元素 */
display: inline; /* 转成内嵌元素 */

· 块元素 和 内嵌元素 对于 CSS 的调用规则是不一样的（这篇文章讨论的是标签嵌套，所以对这个知识点不展开说明）。

简单认识了块元素和内嵌元素以后，下面就可以罗列 XHTML 标签的嵌套规则了：

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：

?? 对
?? 对

?? 错

2. 块级元素不能放在

里面：

?? 错

?? 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. Can li contain div tags?? This item does not need to be listed separately, but many people on the Internet are confused about this. A brief explanation here:

li and div tags are both containers for loading content. They have equal status and there is no hierarchy (for example: h1, h2 such a strict hierarchy^_^), you know, li A tag can even accommodate its parent ul or ol. Why do some people think that li cannot accommodate a div? Don't think that li is so stingy, even though li looks quite thin, in fact li has a big heart...

5. Block-level elements are juxtaposed with block-level elements, and inline elements are inline with inline elements. Juxtaposition:

?? Right

?? Yes

< ;/div> ?? Wrong

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn