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>

コードを見ると問題がないように見えますが、レンダリングされると次のようになり、データがありません。

原因分析

コンソールを開いて DOM 構造を確認し、元のネストされた p タグが 3 つの独立した にレンダリングされていることを確認します。 >p タグ。 DOM结构，发现我们原来的嵌套p标签被渲染为3个独立的p标签。

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

渲染猜想

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

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

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

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

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

总结

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

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

構造を見ると、ng-repeat によって変更された p タグに精度レベルが含まれていないため、データを取得できず、エラーが発生します。表示されます。

推測

以下はすべて個人的な推測です、間違いがあればご批判、修正をお願いします。
p タグはブロックレベルの要素をネストできないため、ネストされた p タグを記述するとします。 C

🎜🎜そのため、ブラウザが 2 行目をレンダリングしてブロックレベルの要素を見つけると、1 行目の p タグが完了したと考えるため、ブラウザは開発者がp 終了タグを少なく記述しました。 🎜🎜🎜🎜🎜🎜同様に、最終的にブラウザは開発者が p 開始タグを欠いていると考えるでしょう。 🎜🎜🎜🎜🎜🎜ということで、最終的に上の図に示した DOM 構造が表示されます。 🎜

概要

🎜 結論としては、ブロックレベルの要素を p タグ内でネストすることはできないということです。 🎜🎜インライン要素はブロックレベルの要素にネストすることはできません。また、ブロックレベルの要素は p タグにネストすることはできません。私たちは多かれ少なかれこれらのことを聞いたことがあるかもしれませんが、それが標準であると考えています。 🎜🎜おすすめ記事: 🎜🎜🎜親要素タグのデフォルトの動作とクリックイベント間の相互作用🎜🎜🎜🎜リンクタグリンクCSSと@import読み込みの違いは何ですか? 🎜🎜🎜

以上がHTMLでのタグのネストの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。