最近在看《web前端开发最佳实践》，看到有一个小节的标题是 过时的块状元素和行内元素 ，之前听到的关于HTML标签的嵌套规范一直在讲，甚至面试的时候还被问到，但是自己在之前的工作中，的的确确用<a>标签包过块元素，为了能有一个更好的用户体验，模拟的一个按钮。那个时候就有困惑，不是行内元素不能嵌套块元素么？直到看到这段才大概了解了一些，因为我用的文档申明是HTML5的，所以解析结构会按照HTML5的标准。
这是我之前汇总的一些标签嵌套规范：
- ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt.dd。
- p,dt,h标签里面不能嵌套块元素；
- a标签不能嵌套a；
- 行内元素不能嵌套块元素；
看一下下面这段结构，据说是来自facebook的代码：
<ul>
<li>
<h4><a href=""><div></div></a></h4>
</li>
</ul>
很明显，不符合上面嵌套规则最后一条，因为它在内联元素<a>元素中嵌套了块元素元素<div>
页面元素的两个基本类型：行内元素和块状元素，在HTML5新规范中，已经淡化了元素的这两种分类，取而代之的方案是更具有语义的HTML元素的分类方式。
因为在构建HTML的过程中，首先要考虑的是语义，判断使用的元素合适与否，就是要判断元素对应的标签是否符合当前元素所表达的语义，而不是元素的样式是不是更符合当前的UI设计。
为了消除块元素和行内元素这两个概念引起的混淆（到底什么时候用行内元素，什么时候用块元素，其中元素又那么多，怎么分？），HTML5中的分类比HTML 4.01中的分类更具体，总共分为7类，每种元素并不限于某一类型，有可能某个元素属于多个类型。
-
Flow（流式元素）:
这个分类基本上包含了HTML 4.01中的块状元素和行内元素。
a， abbr， address， area（如果它是map元素的后裔）， article， aside， audio， b， bdi， bdo，
blockquote， br， button， canvas， cite， code， command， datalist， del， details， dfn， div，
dl，em， embed， fieldset， figure， footer， form， h1， h2， h3， h4， h5， h6， header， hgroup，
hr， i， iframe， img， input， ins， kbd， keygen， label， map， mark， math， menu， meter，nav，
noscript， object， ol， output， p， pre， progress， q， ruby， s， samp， script， section， select，
small， span， strong， style（如果该元素设置了scoped属性）， sub， sup， svg， table，textarea， time，
u， ul， var， video， wbr， text
-
Heading（标题元素）:
h1， h2， h3， h4， h5， h6， hgroup
-
Sectioning（章节元素）:
article， aside， nav， section
-
Phrasing（段落元素）:
基本上等同于HTML 4.01中行内元素的范围
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
HTML5规范中的标签类型关系图
最后
希望大家有时间可以去看一下这篇《HTML标签嵌套规则》，我也是参考了很多，而且在文章的最后总结中，验证了我之前汇总的规则中的一处错误，即：在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常。
网友评论