HTML元素嵌套规则

HTML标签包括块级标签(block)、内嵌元素(inline)

1、块级元素

一般用来构建网站的结构、布局、承载内容等等，常见标签：

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

2、内嵌元素

一般用在网站内容一种的某些细节或者部位，用以 "强调、区分样式、上标、下标、锚点等等，常见标签：

标签	标签	标签
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

HTML标签的嵌套规则

1、块元素可以报含内联元素或者某些块元素、但是内联元素却不能报含块元素，它只能报含其他的内联元素：

<!-- 正确 -->
<div>
  <h1></h1>
  <p></p>
</div>

<!-- 正确 -->
<a href=""><span></span></a>

<!-- 错误 -->
<span><div></div></span>

2、块级元素不能放在<p>中：

<!-- 错误 -->
<p><ol><li></li></ol></p>

<!-- 错误 -->
<p><div></div></p>

3、有几个特殊的块级元素只能报含内嵌元素，不能在报含块级元素：

标签	标签	标签
h1 - h6	p	dt

4、li内可以报含div标签

这一条其实不必单独列出来，但是网上许多人对比有些疑惑，在此略加说明：

li he div 都是装载内容的容易，地位平等，要知道 li 标签连它的腹肌 ul 或者 ol 都可以容纳，为什么有人会觉得 li 偏偏容纳不 div 呢 ? 虽然li长得瘦小，但是胸襟还是很大的···

5、块级元素与块级元素并列、内嵌元素与内嵌元素并列：

<!-- 正确 -->
<div><h2></h2><p></p></div>

<!-- 正确 -->
<div><a href=""></a><span></span></div>

<!-- 错误 -->
<div><h2></h2><span></span></div>