摘要：最近在看前端开发最佳实践，看到有一个小节的标题是过时的块状元素和行内元素，之前听到的关于标签的嵌套规范一直在讲，甚至面试的时候还被问到，但是自己在之前的工作中，的的确确用标签包过块元素，为了能有一个更好的用户体验，模拟的一个按钮。
最近在看《web前端开发最佳实践》，看到有一个小节的标题是 过时的块状元素和行内元素 ，之前听到的关于HTML标签的嵌套规范一直在讲，甚至面试的时候还被问到，但是自己在之前的工作中，的的确确用标签包过块元素，为了能有一个更好的用户体验，模拟的一个按钮。那个时候就有困惑，不是行内元素不能嵌套块元素么？直到看到这段才大概了解了一些，因为我用的文档申明是HTML5的，所以解析结构会按照HTML5的标准。
这是我之前汇总的一些标签嵌套规范：
ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt.dd。
p,dt,h标签里面不能嵌套块元素；
a标签不能嵌套a；
行内元素不能嵌套块元素；
看一下下面这段结构，据说是来自facebook的代码：
很明显，不符合上面嵌套规则最后一条，因为它在内联元素元素中嵌套了块元素元素 页面元素的两个基本类型：行内元素和块状元素，在HTML5新规范中，已经淡化了元素的这两种分类，取而代之的方案是更具有语义的HTML元素的分类方式。 因为在构建HTML的过程中，首先要考虑的是语义，判断使用的元素合适与否，就是要判断元素对应的标签是否符合当前元素所表达的语义，而不是元素的样式是不是更符合当前的UI设计。 为了消除块元素和行内元素这两个概念引起的混淆（到底什么时候用行内元素，什么时候用块元素，其中元素又那么多，怎么分？），HTML5中的分类比HTML 4.01中的分类更具体，总共分为7类，每种元素并不限于某一类型，有可能某个元素属于多个类型。
这个分类基本上包含了HTML 4.01中的块状元素和行内元素。
基本上等同于HTML 4.01中行内元素的范围
嵌入式元素是引用或插入到文档中其他资源的元素。
交互式元素是专门用于与用户交互的元素。 希望大家有时间可以去看一下这篇《HTML标签嵌套规则》，我也是参考了很多，而且在文章的最后总结中，验证了我之前汇总的规则中的一处错误，即：在 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/50836.html 摘要：提升视野的方式有很多，最重要的一点在于自己主动动脑思考，去想的越多，收获也就会越多。相关文章链接我与前端因兴趣起源
HTML5学堂（码匠）：在自学WEB前端或者任何一种技术的过程中，视野都是极其重要的影响因素，视野决定着我们努力的方向，纵然我们多么努力，走错了方向也是枉然。
视野的重要性 (我与前端系列-02)
1.书籍问题导致自学效率不高
通过一段时间的自学，已经清晰了解了HTML与...
Flow（流式元素）:
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（段落元素）:
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
最后
~
元素内嵌入等元素所有浏览器可以解析正常。
相关文章
我与前端 | 视野的重要性
发表评论
0条评论
阅读 2627·2023-04-25 15:22
阅读 2804·2021-10-11 10:58
阅读 972·2021-08-30 09:48
阅读 1787·2019-08-30 15:56
阅读 1710·2019-08-30 15:53
阅读 1061·2019-08-29 11:16
阅读 1032·2019-08-23 18:34
阅读 1616·2019-08-23 18:12
