百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> html中标签嵌套的题目怎样解决
分享文章到:

html中标签嵌套的题目怎样解决

发布时间:09/01 来源:未知 浏览: 关键词:
本篇文章给大家带来的内容是关于html中标签嵌套的问题怎样解决,有必然的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。

问题描写

等待样式:

710612063-5b6a56dee4e5d_articlex.png

简单准确度显示:“准确度等级: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>

看代码感受没问题,但是渲染出来是这么个东西,没有数据。

4256914003-5b6a5ad2a308b_articlex.png

缘由剖析

翻开操纵台,看我们的DOM构造,发明我们本来的嵌套p标签被渲染为3个独立的p标签。

938171766-5b6a5b52c5d0c_articlex.png

所以看构造,我们的准确度等级不在ng-repeat润饰的p标签中,所以没法猎取数据,就会显示错误。

渲染猜想

以下均为个人猜想,假如错误欢迎批判指正。

假设我们写了一个嵌套的p标签,因p标签不克不及嵌套块级元素。

2677297159-5b6a5c4ec47ae_articlex.png

所以阅读器渲染到第二行时,发明了一个块级元素,会认为第一行的p标签已经结束了,所以阅读器认为是开发者少写了一个p的完毕标签。

2888842224-5b6a5d022114e_articlex.png

同理,最后,阅读器会认为开发者少写了一个p的开端标签。

1968491514-5b6a5dbdc478c_articlex.png

所以最后会显现出如上图所示的DOM构造。

总结

归根结柢,就是p标签中不克不及嵌套块级元素。

内联元素不克不及嵌套块级元素,p标签中不克不及嵌套块级元素。这些我们大概都或多或少据说过,但是我们只是把它当做一种标准。

相关文章引荐:

父元素<a>标签的默许行动乃至click事件之间的彼此影响

link标签链接CSS和@import加载有什么不同?

以上就是html中标签嵌套的问题怎样解决的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板