html中标签嵌套的问题如何解决


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于html中标签嵌套的问题如何解决,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

问题描述

期待样式:

710612063-5b6a56dee4e5d_articlex.png

单一精确度显示:“精确度等级:xxxxx”

非单一精确度显示:“精确度等级:xxxxx ~ xxxxx”

错误实现

下面是错误的示范,仅供说明使用:

1

2

3

4

5

6

7

8

<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标签中不能嵌套块级元素。这些我们可能都或多或少听说过,但是我们只是把它当做一种规范。

相关文章推荐:

标签的默认行为以及click事件之间的相互影响">父元素<a>标签的默认行为以及click事件之间的相互影响

link标签链接CSS和@import加载有什么区别?

以上就是html中标签嵌套的问题如何解决的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

div标签:水平居中和垂直居中的实现(附代码)

html文字超出部分怎么隐藏

html img不显示图片怎么办

html5应用:离线的应用以及存储的应用

input输入框只能输入数字、字母相关组合(正则表达式)

vue面试题的介绍(附答案)

html基础之选择器

html em标签怎么用

html设置button的方法

html里的列表标签有哪些?

更多相关阅读请进入《内联》频道 >>




打赏

取消

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

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

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

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...