首頁 >web前端 >html教學 >html中標籤嵌套的問題如何解決

html中標籤嵌套的問題如何解決

不言
不言原創
2018-08-08 14:45:162791瀏覽

這篇文章帶給大家的內容是關於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標籤。

html中標籤嵌套的問題如何解決

所以看結構,我們的準確度等級不在ng-repeat修飾的p標籤中,所以無法取得數據,就會顯示錯誤。

渲染猜想

以下皆為個人猜想,如果錯誤歡迎批評指正。

假如我們寫了一個嵌套的p標籤,因p標籤不能嵌套區塊級元素。

html中標籤嵌套的問題如何解決

所以瀏覽器渲染到第二行時,發現了一個區塊級元素,會認為第一行的p標籤已經完結了,所以瀏覽器認為是開發者少寫了一個p的結束標籤。

html中標籤嵌套的問題如何解決

同理,最後,瀏覽器會認為開發者少寫了一個p的開始標籤。

html中標籤嵌套的問題如何解決

所以最後會呈現如上圖所示的DOM結構。

總結

歸根結底,就是p標籤中不能嵌套區塊級元素。

內聯元素不能嵌套區塊級元素,p標籤中不能嵌套區塊級元素。這些我們可能都或多或少聽過,但是我們只是把它當作一種規範。

相關文章推薦:

父元素標籤的預設行為以及click事件之間的相互影響

##link標籤連結CSS和@import載入有什麼差別?
#

以上是html中標籤嵌套的問題如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn