HTML에서 태그 중첩 문제를 해결하는 방법

不言
풀어 주다: 2018-08-08 14:45:16
원래의
2754명이 탐색했습니다.

이 문서의 내용은 HTML에서 태그 중첩 문제를 해결하는 방법에 대한 것입니다. 특정 참조 값이 있으므로 도움이 될 수 있습니다.

문제 설명

예상 스타일:

HTML에서 태그 중첩 문제를 해결하는 방법

단일 정확도 표시: "정확도 수준: xxxxx"

비 단일 정확도 표시: "정확도 수준: xxxxx ~ xxxxx"

오류 구현

다음은 설명 목적으로만 사용된 오류 데모입니다.

<p>
    </p><p>
        准确度等级:{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }}
    </p>
    <p>
        准确度等级:{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + ' ~ ' + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }}
    </p>
로그인 후 복사

코드를 보면 문제가 없는 것처럼 보이지만 렌더링을 해보면 이렇게 보이고 데이터도 없습니다.

HTML에서 태그 중첩 문제를 해결하는 방법

원인 분석

콘솔을 열고 DOM 구조를 살펴보고 원래 중첩된 p 태그가 3개의 독립적인 p 태그. DOM结构,发现我们原来的嵌套p标签被渲染为3个独立的p标签。

HTML에서 태그 중첩 문제를 해결하는 방법

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

渲染猜想

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

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

HTML에서 태그 중첩 문제를 해결하는 방법

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

HTML에서 태그 중첩 문제를 해결하는 방법

同理,最后,浏览器会认为开发者少写了一个p的开始标签。

HTML에서 태그 중첩 문제를 해결하는 방법

所以最后会呈现出如上图所示的DOM结构。

总结

归根结底,就是p标签中不能嵌套块级元素。

内联元素不能嵌套块级元素,p

구조를 보면 우리의 정확도 수준이 ng-repeat로 수정된 p 태그에 있지 않아 데이터를 얻을 수 없고 오류가 발생합니다. 표시됩니다.

렌더링 추측

다음 내용은 모두 개인적인 추측입니다. 틀렸다면 비판하고 정정해 주시기 바랍니다.
p 태그는 블록 수준 요소를 중첩할 수 없기 때문에 중첩된 p 태그를 작성한다고 가정합니다. C 2677297159-5bbbb 6A5C4EC47AE_ARTICLEX.PNG

🎜🎜그래서 브라우저가 두 번째 줄을 렌더링하고 블록 수준 요소를 찾으면 첫 번째 줄의 p 태그가 완료된 것으로 생각하므로 브라우저는 개발자가 A p 닫는 태그를 적게 작성했습니다. 🎜🎜🎜2888842224-5b6a5d022114e_articlex.p ng 🎜🎜🎜마찬가지로, 결국 브라우저는 개발자가 p 시작 태그를 놓쳤다고 생각할 것입니다. 🎜🎜🎜HTML에서 태그 중첩 문제를 해결하는 방법 🎜🎜🎜그러면 드디어 위 그림과 같은 DOM 구조가 등장하게 됩니다. 🎜

요약

🎜결론은 블록 수준 요소가 p 태그에 중첩될 수 없다는 것입니다. 🎜🎜인라인 요소는 블록 수준 요소에 중첩될 수 없으며, 블록 수준 요소는 p 태그에 중첩될 수 없습니다. 우리는 이것에 대해 어느 정도 들어봤을지 모르지만 단지 그것을 표준으로 여깁니다. 🎜🎜추천 기사: 🎜🎜🎜상위 요소 태그의 기본 동작과 클릭 이벤트 간의 상호 작용🎜🎜🎜🎜링크 태그 링크 CSS와 @import 로딩의 차이점은 무엇인가요? 🎜 🎜🎜

위 내용은 HTML에서 태그 중첩 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿