本文摘自PHP中文网，作者不言，侵删。
本篇文章给大家带来的内容是关于html中标签嵌套的问题如何解决，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。问题描述
期待样式：
单一精确度显示：“精确度等级：xxxxx”
非单一精确度显示：“精确度等级：xxxxx ~ xxxxx”
错误实现
下面是错误的示范，仅供说明使用：
1 2 3 4 5 6 7 8 |
|
看代码感觉没问题，但是渲染出来是这么个东西，没有数据。
原因分析
打开控制台，看我们的DOM结构，发现我们原来的嵌套p标签被渲染为3个独立的p标签。
所以看结构，我们的准确度等级不在ng-repeat修饰的p标签中，所以无法获取数据，就会显示错误。
渲染猜想
以下均为个人猜想，如果错误欢迎批评指正。
假如我们写了一个嵌套的p标签，因p标签不能嵌套块级元素。
所以浏览器渲染到第二行时，发现了一个块级元素，会认为第一行的p标签已经完结了，所以浏览器认为是开发者少写了一个p的结束标签。
同理，最后，浏览器会认为开发者少写了一个p的开始标签。
所以最后会呈现出如上图所示的DOM结构。
总结
归根结底，就是p标签中不能嵌套块级元素。
内联元素不能嵌套块级元素，p标签中不能嵌套块级元素。这些我们可能都或多或少听说过，但是我们只是把它当做一种规范。
相关文章推荐：
标签的默认行为以及click事件之间的相互影响">父元素<a>标签的默认行为以及click事件之间的相互影响
link标签链接CSS和@import加载有什么区别？
以上就是html中标签嵌套的问题如何解决的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《内联》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
