html中标签嵌套的题目怎样解决
问题描写
等待样式:
简单准确度显示:“准确度等级:xxxxx”
非简单准确度显示:“准确度等级:xxxxx ~ xxxxx”
错误实现
下面是错误的示范,仅供说明使用:
<p ng-repeat="parameter in object.parameterCalibrateAbilitySet"> <p ng-if="parameter.parameterCategory.singleAccuracyOrNot"> 准确度等级:{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }} </p> <p ng-if="!parameter.parameterCategory.singleAccuracyOrNot"> 准确度等级:{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + ' ~ ' + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }} </p> </p>
看代码感受没问题,但是渲染出来是这么个东西,没有数据。
缘由剖析
翻开操纵台,看我们的DOM
构造,发明我们本来的嵌套p
标签被渲染为3个独立的p
标签。
所以看构造,我们的准确度等级不在ng-repeat
润饰的p
标签中,所以没法猎取数据,就会显示错误。
渲染猜想
以下均为个人猜想,假如错误欢迎批判指正。
假设我们写了一个嵌套的p
标签,因p
标签不克不及嵌套块级元素。
所以阅读器渲染到第二行时,发明了一个块级元素,会认为第一行的p
标签已经结束了,所以阅读器认为是开发者少写了一个p
的完毕标签。
同理,最后,阅读器会认为开发者少写了一个p
的开端标签。
所以最后会显现出如上图所示的DOM
构造。
总结
归根结柢,就是p
标签中不克不及嵌套块级元素。
内联元素不克不及嵌套块级元素,p
标签中不克不及嵌套块级元素。这些我们大概都或多或少据说过,但是我们只是把它当做一种标准。
相关文章引荐:
父元素<a>标签的默许行动乃至click事件之间的彼此影响
link标签链接CSS和@import加载有什么不同?
以上就是html中标签嵌套的问题怎样解决的具体内容,更多请关注百分百源码网其它相关文章!