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

标签嵌套问题

时间:2023-04-02 17:42:46 HTML

问题描述期望样式:单精度显示:"精度等级:xxxxx"非单精度显示:"精度等级:xxxxx~xxxxx"错误实现下面是错误的演示,仅供参考说明使用:精度等级:{{parameter.accuracy.minAccuracyValue+parameter.accuracy.minAccuracyUnit.name}}

精度等级:{{parameter.accuracy.minAccuracyValue+parameter.accuracy.minAccuracyUnit.name+'~'+parameter.accuracy.maxAccuracyValue+parameter.accuracy.maxAccuracyUnit.name}}

看代码,感觉没什么问题,但是渲染成这样,没有数据。原因分析打开控制台,查看我们的DOM结构,发现我们原来嵌套的p标签渲染成了3个独立的p标签。所以看结构,我们的accuracylevel不在ng-repeat修改的p标签中,所以获取不到数据,会显示错误。渲染猜想以下均为个人猜想。如有不妥,敬请批评指正。如果我们写一个嵌套的p标签,因为p标签不能嵌套块级元素。所以当浏览器渲染到第二行,发现一个块级元素时,就会认为第一行的p标签结束了,于是浏览器就认为开发者少写了一个p结束标签。同理,最后浏览器会认为开发者少写了一个p开始标签。所以最终会呈现出上图所示的DOM结构。总结归根结底,块级元素不能嵌套在p标签中。内联元素不能嵌套块级元素,p标签也不能嵌套块级元素。这些我们可能或多或少听说过,但我们只是把它当做一种常态。通过这件事,我明白了规范不仅仅是规范,它是前人对后人的忠告。有了规范,我们就可以避免一些不必要的错误。