摘要：所以浏览器渲染到第二行时，发现了一个块级元素，会认为第一行的标签已经完结了，所以浏览器认为是开发者少写了一个的结束标签。内联元素不能嵌套块级元素，标签中不能嵌套块级元素。
问题描述
期待样式：
单一精确度显示：“精确度等级：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标签。
所以看结构，我们的准确度等级不在ng-repeat修饰的p标签中，所以无法获取数据，就会显示错误。
渲染猜想以下均为个人猜想，如果错误欢迎批评指正。
假如我们写了一个嵌套的p标签，因p标签不能嵌套块级元素。
所以浏览器渲染到第二行时，发现了一个块级元素，会认为第一行的p标签已经完结了，所以浏览器认为是开发者少写了一个p的结束标签。
同理，最后，浏览器会认为开发者少写了一个p的开始标签。
所以最后会呈现出如上图所示的DOM结构。
总结归根结底，就是p标签中不能嵌套块级元素。
内联元素不能嵌套块级元素，p标签中不能嵌套块级元素。这些我们可能都或多或少听说过，但是我们只是把它当做一种规范。
通过此事，我懂得，规范，不只是规范，那是前人对后人的忠告。有规范，我们可以避免一些不必要的错误。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52811.html
摘要：开发过程中遇到问题，简单写个运行环境为描述一下这个问题，当标签内部存在嵌套时，父元素标签的默认行为以及子元素绑定的事件的响应之间存在影响。 2018-08-07 Question about work 开发过程中遇到问题，简单写个demo 运行环境为Chrome 68 描述一下这个问题，当标签内部存在嵌套时， 父元素标签的href默认行为以及子元素绑定的click事件的响应之间存在...
摘要：开发过程中遇到问题，简单写个运行环境为描述一下这个问题，当标签内部存在嵌套时，父元素标签的默认行为以及子元素绑定的事件的响应之间存在影响。 2018-08-07 Question about work 开发过程中遇到问题，简单写个demo 运行环境为Chrome 68 描述一下这个问题，当标签内部存在嵌套时， 父元素标签的href默认行为以及子元素绑定的click事件的响应之间存在...
摘要：标签属性属性名全部写，属性值双引号引起来，每个双标签务必加对应的结束标签单标签不遵循此标准，仍按原标准，即不需要以结束。视情况为链接添加，图要添加及。明确指定图的和。 前言 作为一个前端工程师，我们可能每天都要写html、css、javascript，每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则，下面和大家分享一下我的习惯和准则。 html 首先我们要对文...
摘要：标签属性属性名全部写，属性值双引号引起来，每个双标签务必加对应的结束标签单标签不遵循此标准，仍按原标准，即不需要以结束。视情况为链接添加，图要添加及。明确指定图的和。 前言 作为一个前端工程师，我们可能每天都要写html、css、javascript，每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则，下面和大家分享一下我的习惯和准则。 html 首先我们要对文...
阅读 2073·2021-11-15 17:57
阅读 738·2021-11-11 16:54
阅读 2588·2021-09-27 13:58
阅读 4066·2021-09-06 15:00
阅读 949·2021-09-04 16:45
阅读 3504·2019-08-30 15:56
阅读 1783·2019-08-30 15:53
阅读 1602·2019-08-30 14:12
