HTML要素の入れ子の問題

HTML 要素の入れ子の問題

要素の入れ子

ブロック要素にはインライン要素または 特定の ブロック要素を含めることができますが、インライン要素にはブロック要素を含めることはできず、他のインライン要素のみを含めることができます。 某些块元素，但内联元素却不能包含块元素，只能包含其他的内联元素。

P元素嵌套问题

<p>
  </p><p></p>

在P元素中嵌套p等块级元素，在浏览器中解析如下：

可以看到在元素最后会多出一个空的<p></p>。

通过查询，发现原来p元素内无法包裹块级元素。
因为我们使用的DTD中规定了块级元素是不能放在<p></p>里面的，再加上一些浏览器纵容这样的写法：

<p>这是一个段落的开始
</p><p>这是另一个段落的开始</p>

当一个<p></p>标签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：

<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>

这也就解释了，为何浏览器中最后会多出1个空的<p></p>。

块级元素嵌套问题

可以先把所有的块元素再次划分成几个级别的，我们已经知道是在最外层，下一级里面只会有、、<frameset>、<noframes></noframes> </frameset>，而我们已经知道了可视的元素只会出现在里，所以我们把划在第一个级里面。接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption></caption> </h6> </h5> </h4> </h3> </h2> </h1>；段落标记的<p></p>；分隔线<hr>和一个特别的元素<dt></dt>(它只存在于列表元素<dl></dl>的子一级)。

三级元素就是指，只能嵌套内联元素的块级元素。p也恰好是其中之一。

为什么第二级的元素可以自由嵌套

我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把<ul></ul>嵌在<p></p>里面，也可以把<p></p>嵌在<li>里面。

在HTML里有几个元素是比较特别的：

、

、

、，它们的子一层必须是指定元素，

、

>的子一级必须是<li>；<dl></dl>的子一级必须是<dt></dt>或者<dd></dd>；<table>的子一层必须是<code><caption></caption>或<thead>、</thead> <tfoot>、</tfoot> <tbody>等，而再子一层必须是<code><tr>（<code><tr>只存在于<code><thead>、</thead> <tfoot>、</tfoot> <tbody>中），之后才是可放内容的<code><td>或者<code><th>。　<h2>内联元素</h2> <p>其实在内联元素中，还是可以再区分一下的，有几个元素（<code><img alt="HTML要素の入れ子の問題" >、<input>等）比较特别，它们可以定义宽高。虽然在IE浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C
P 要素の入れ子の問題
rrreee

P 要素内の p およびその他のブロックレベル要素の入れ子は、ブラウザーで次のように解析されます:



それは最後に表示されます。要素 余分な空の <p></p> が存在します。

🎜クエリを実行した結果、元の p 要素 は block-level 要素 をラップできないことがわかりました。 🎜なぜなら、私たちが使用する DTD では、ブロックレベル要素 を <p></p> 内に配置できないと規定しており、一部のブラウザではそのような記述を容認しているからです。

タグは終了していません。次のブロック要素に遭遇すると自動的に終了します。実際、ブラウザは次のように処理します: 🎜rrreee🎜これは、なぜ余分な空の があるのか​​についても説明しています。最後にブラウザで <p></p> をクリックします。 🎜🎜ブロックレベル要素のネスト問題🎜🎜 まず、すべてのブロック要素を再度複数のレベルに分割できます。 が最外層の にあることはすでにわかっています。 次のレベルには 、、<frameset>、<noframes></noframes> </frameset> のみがあり、表示される要素はのみであることがすでにわかっています。 に出現するため、 を最初のレベルに置きます。次に、自由にネストできない要素を第 3 レベルに、その他を第 2 レベルに配置します。自由にネストできないいわゆる要素には、インライン要素のみを含めることができます。これには、タイトル タグ <h1>、<h2>、<h4>、<h5> が含まれます。 ;、<h6>、<caption></caption> </h6> </h5> </h4> </h2> </h1>; 段落タグ <p></p>; 区切り文字 <hr> および特殊要素 (リスト要素 <dl></dl> の子レベルにのみ存在します)。 🎜🎜第 3 レベルの要素 は、インライン要素のみをネストできるブロックレベルの要素を指します。 p もその 1 つです。 🎜🎜第 2 レベルの要素が自由に入れ子にできる理由🎜🎜これらをいくつかのコンテナ (またはボックス) として考えることができ、これらのコンテナのサイズは自由に変更できます。たとえば、

を置くことができます。 は <p></p> に埋め込まれます。または、<p></p> は <li> に埋め込むことができます。 🎜🎜 HTML にはいくつかの特別な要素があります:
、
、

、

、それらのサブレベルは指定された要素である必要があります。

、

> は <li> の子レベルである必要があります。 レベルは次のとおりです。 <dt></dt> または <dd></dd>; <table> のサブレベルは <code><caption></caption> である必要があります。 > または <thead>、</thead> <tfoot>、</tfoot> <tbody> など。次のサブレベルは <code><tr> である必要があります (<code> <tr> は、<code><thead>、</thead> <tfoot>、</tfoot> <tbody> にのみ存在し、その後、コンテンツを配置できる <code><td> にのみ存在します。 /code> または <code><th>。 🎜🎜インライン要素🎜🎜実際、インライン要素は依然として区別でき、幅を定義できる特別な要素がいくつかあります。身長。 <code>IE ブラウザではすべての要素で幅と高さを定義できますが、これは IE 独自の標準であり、すべてのブラウザが W3C をサポートしているわけではありません。 >これらを置換要素と呼びます。実際、これらの要素はインラインですが、特定のブロックを持っています (幅と高さを設定することもできます)。 :inline -ブロック。 🎜要素自体に inline-block が含まれていてはなりません。 🎜🎜HTML 要素のネストの問題の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。 🎜🎜🎜🎜🎜