http://blog.sina.com.cn/s/blog_966be2ca010164b9.html
块级元素和内嵌元素的区别：


· 块级元素 一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的，它包括以下这些标签：
div、ul、li、dl、dt、dd、h1~h6、p、address……
 

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

· 块元素 和 内嵌元素 是可以互相转换的，转换的代码如下：
display: block;
display: inline;
· 块元素 和 内嵌元素 对于 CSS 的调用规则是不一样的（这篇文章讨论的是标签嵌套，所以对这个知识点不展开说明）。
 

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


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、h2、h3、h4、h5、h6、p、dt。


4. li 内可以包含 div 标签 —— 这一条其实不必单独列出来的，但是网上许多人对此有些疑惑，就在这里略加说明：
li 和 div 标签都是装载内容的容器，地位平等，没有级别之分（例如：h1、h2 这样森严的等级制度^_^），要知道，li 标签连它的父级 ul 或者是 ol 都可以容纳的，为什么有人会觉得 li 偏偏容纳不下一个 div 呢？别把 li 看得那么小气嘛，别看 li 长得挺瘦小，其实 li 的胸襟很大滴……
5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：


[div][h2][/h2][p][/p][/div] —— 对
[div][a href=”#”][/a][span][/span][/div] —— 对
[div][h2][/h2][span][/span][/div] —— 错
 
 
[a]标签不能包含其他[a]标签
[pre]标签不能包含[img],[object],[big],[samll],[sub]和[sup]标签
[button]标签不能包 含[input],[select],[textarea],[label],[button],[form],[fieldset],[iframe] 和[isindex]标签
[label]标签不能包含其他[label]标签
[form]标签不能包含其他[form]标签


======================================================== 


http://www.zzp-web.com/blog/?p=73
HTML5的元素嵌套规则


HTML4/XHTML的嵌套规则
内联元素不能嵌套块元素[p]元素和[h1~6]元素不能嵌套块元素


HTML5的元素嵌套规则
如上图 元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分） 而是按照如下分类来分：
Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、
Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。
图片
http://www.zzp-web.com/blog/wp-content/themes/satu/img/20130810120757745.png


Heading（标题元素）
h1  h2  h3  h4  h5  h6  hgroup


Sectioning（章节元素）
article  aside  nav  section


Phrasing（段落元素）
a（如果其只包含段落式元素）  abbr  area（如果它是map元素的后裔）  audio  b  bdi  bdo  br  button  canvas  cite  code  command  datalist  del（如果其只包含段落式元素）  dfn  em  embed  i iframe  img  input  ins（如果其只包含段落式元素）  kbd  keygen  label  map（如果其只包含段落式元素）  mark  math  meter  noscript  object  output  progress  q  ruby  s  samp  script select  small  span  strong  sub  sup  svg  textarea  time  u  var  video  wbr  text


Embedded（嵌入元素）
audio  canvas  embed  iframe  img  math  object  svg  video

Interactive（交互元素）
a  audio（如果设置了controls属性）  button  details  embed  iframe  img（如果设置了usemap属性）  input（如果type属性不为hidden状态）  keygen  label  menu（如果type属性为toolbar状态） object（如果设置了usemap属性）  select  textarea  video（如果设置了controls属性）


Metadata（元数据元素）
base command link meta noscript script style title


那么对于h1~h6元素：
它们同时属于Flow content 、Heading content 和 Palpable content三个分类
它们的父元素可以是[hgroup] 同时那些子元素是流式元素的元素也可以作为h1-h6元素的父元素
它们允许的子元素是段落式元素


对于[div]元素：同时属于Flow content 、 Palpable content分类
父元素必须是那些子元素为段落式元素的元素
允许的子元素是流式元素
[div]元素允许的子元素是流式元素 流式元素基本涵括了页面中的大部分元素 所以我们在用[div]时可以不用担心嵌套错误的问题。


但对于[h1]~[h6]元素 它们允许的子元素为段落式元素 而段落式元素并不包含诸如[div]、[p]、[ul][ol]之类的元素 这就说明按照html5的规范 是不允许在标题元素内部嵌入[div]、[p]、[ul][ol]之类的元素。


对于[a]元素：
同时属于Flow content 、 Phrasing content、Interactive content、Palpable content分类
父元素必须是那些子元素为段落式元素的元素
允许的子元素是以它的父元素允许的子元素为准 但不能包含交互式元素
这样看[a]元素还是挺有意思的 允许的子元素要看它的父元素所能包含的子元素。


[ul]
   [li][h4][a href=""][div][/div][/a][/h4][/li]
[/ul]
这时[a]的父元素为[h4] 对于[h1]~[h6]的标题元素上面已经提过 允许的子元素是段落式元素 那么此时对于[a]允许的子元素即为段落式元素 而段落式元素中是不包含[div]元素的 所以FCAEBOOK这样的嵌套方法是错误的！


[ul]
   [li][div][a href=""][div][/div][/a][/div][/li]
[/ul]


这时[a]的父元素为[div] 而[div]元素允许的子元素是流式元素 流式元素中包含[div]元素 所以这样的情形下在[a]里面嵌套[div]就是正确的做法！


严格嵌套约束规则：
a元素里不可以嵌套交互式元素([a]、[button]、[select]等)
[p]里面不可以嵌套[div]、[h1]~[h6]、[p]、[ul]/[ol]/[li]、[dl]/[dt]/[dd]、[form]等
暂时没有发现更多 有的欢迎告诉我


例子(1)：开始与结束标签嵌套错误
[div][h2]内容[/div][/h2]

例子(2)：[p]元素嵌套[div]元素
[p][div]内容[/div][/p]


例子(3)：列表元素[li]兄弟元素为[div]
[ul][li]内容[/li][div]内容[/div][/ul]


例子(4)：[h2]元素嵌套[div]元素
[h2][div]内容[/div][/h2]


例子(5)：[a]元素嵌套[a]元素
[a href=""][a href=""]内容[/a][/a]



Peace Demo: