当前位置: 首页 > Web前端 > HTML5

HTML标签嵌套究竟如何被视为一种规范?

时间:2023-04-05 18:54:58 HTML5

最近在看《web前端开发最佳实践》,看到一个小节的标题是过时的块元素和行内元素。之前一直在讲HTML标签的嵌套规范,面试的时候还被问到过,但是在之前的工作中,确实是用标签来包裹block元素。为了有更好的用户体验,我模拟了一个按钮。那时,有混乱。内联元素不是不能嵌套块元素吗?看到这段之前我有点不明白,因为我使用的文档声明是HTML5的,所以解析结构会遵循HTML5标准。下面是我之前总结的一些标签嵌套规范:ul,li/ol,li/dl,dt,dd有父子关系标签;ul和ol只能跟在li之后,dl只能跟在dt.dd之后。p、dt、h标签中不能嵌套块元素;标签不能嵌套;内联元素不能嵌套块元素;看下面的结构,据说是facebook的代码:

显然不满足上面最后的嵌套规则,因为它是一个内联元素元素嵌套了块元素元素
页面元素有两种基本类型:内联元素和块元素。在新的HTML5规范中,这两类元素都被淡化了,替换的方案是更加语义化的HTML元素分类方式。因为在构建HTML的过程中,首先要考虑的是语义。判断使用的元素是否合适,是判断元素对应的标签是否符合当前元素所表达的语义,而不是判断元素的风格是否更符合当前的UI设计。为了消除块元素和内联元素这两个概念带来的混淆(什么时候用内联元素,什么时候用块元素,而且元素那么多,怎么划分?),HTML5中的分类比较多比HTML4.01中的分类准确。具体来说,一共分为7类,每个元素不限于某一种类型,有可能一个元素属于多种类型。Flow(流元素):这一类基本上包括HTML4.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样式(如果元素设置了scoped属性),sub,sup,svg,table,textarea,time,u,ul,var,video,wbr,textHeading(标题元素):h1,h2,h3,h4,h5,h6,hgroupSectioning(Section元素):article,aside,nav,sectionPhrasing(段落元素):基本相当于HTML4.01中inline元素的rangea(如果只包含段落元素),abbr,area(如果是a的后代)地图元素),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,textEmbedded(嵌入元素):嵌入元素是引用或插入文档音频中其他资源的元素,canvas、embed、iframe、img、math、object、svg、videoInteractive(交互元素):交互元素是设计用于与用户交互的元素。a、audio(如果设置了controls属性)、button、details、embed、iframe、img(如果设置了usemap属性)、input(如果没有隐藏“type”属性)、keygen、label、menu(如果"type""属性为toolbarstatus),object(如果设置了usemap属性),select,textarea,video(如果设置了controls属性)Metadata(元数据元素):base,command,link,meta,noscript,script,style,title最后,希望大家有空看看这个《HTML标签嵌套规则》,我也参考了很多,在文章最后的总结中,验证了我之前总结的规则中的一个错误,即:在

~

元素中嵌入的
等元素,所有浏览器都可以正常解析。