XHTML タグのネスト規則の分析

XHTML 言語では、ul タグに li が含まれ、dl タグに dt と dd が含まれることは誰もが知っています。これらの固定タグのネスト ルールは非常に明確です。しかし、h1、div、p など、独立していてまとめられていないタグはまだたくさんあります。では、これらのタグのネスト ルールは何でしょうか。今日はこの話題についてお話ししましょう。

XHTML タグのネスト ルールについては、まず、XHTML タグには 2 つの種類があることを知っておく必要があります。1 つはブロックレベル要素 (block ) と呼ばれ、もう 1 つはインライン要素(inline、インライン、行レベルなどとも呼ばれる) と呼ばれます。

ブロックレベル要素とインライン要素の区別は簡単です。次の 2 行のコードを body タグに記述してください。

<div style=”border: 1px solid red;”>div1</div>
<div style=”border: 1px solid red;”>div2</div>

ブラウザのレンダリング効果:

ページ上の 2 つの div は 2 行のスペースを占めています。フロートまたは他の方法で設定されていない限り、これらは隣り合うことはありません。どちらも独自の行のスペースを非常に積極的に占めています。このような現象のあるタグを見かけたら、それをブロック要素と呼ぶことができます。

次に、次の 2 行のコードを body タグに挿入します。

<span style=”border: 1px solid red;”>span1</span>
<span style=”border: 1px solid red;”>span2</span>

ブラウザのレンダリング効果:

スパン1 スパン2

今回は、2 つのスパンが一列に並んでおり、互いに友好的で調和しています...このようなタグの動作をインライン要素と呼ぶことができます。

ブロックレベル要素とインライン要素の違い:

ブロックレベル要素は、通常、Web サイトの構造、レイアウトを構築し、コンテンツを送信するために使用されます。これらの重いタスクはすべてブロックレベル要素であり、次のタグが含まれます。

div、ul、li、dl、dt、dd、h1~h6、p、アドレス...

埋め込み要素は通常、Web サイトのコンテンツの詳細または一部で「強調、スタイルを区別、上付き文字、下付き文字、アンカー」などを行うために使用されます。次のタグはすべて埋め込み要素です。

a、span、strong、sub、sup、img... など

ブロック要素とインライン要素は相互に変換できます。変換コードは次のとおりです。

display: block; /* ブロック要素に変換*/

display: inline; /* インライン要素に変換*/

·ブロック要素とインライン要素の CSS呼び出しルールは異なります (この記事ではタグのネストについて説明するため、この知識ポイントについては詳しく説明しません)。

ブロック要素とインライン要素について簡単に紹介した後、 XHTML タグのネスト規則をリストします。

1. ブロック要素にはインライン要素または一部のブロック要素を含めることができますが、インライン要素にはブロック要素を含めることはできません。インライン要素に含めることができるのは、他のインライン要素のみです。

<div><h1></h1><p></p></div> —— はい
<a href=”#”><span></span></a> —— はい
<span><div></div></span> — 間違い

2. ブロックレベル要素は <p> 内に配置できません。

<p><ol><li></li></ol></p> —— 間違い

<p><div></div></p> — 間違い

3. インライン要素のみを含むことができ、ブロックレベル要素を含むことができない特殊なブロックレベル要素がいくつかあります。これらの特殊なタグは次のとおりです。

h1、h2、h3、h4、h5、h6、p、dt。

4. li には div タグを含めることができます- これは別々にリストする必要はありませんが、インターネット上では多くの人が混乱しているので、ここで簡単に説明します。

li タグと div タグはどちらもコンテンツを読み込むためのコンテナです。どちらも同等のステータスを持ち、階層はありません (たとえば、h1 と h2 の厳密な階層など)。li タグは親の ul または ol にも対応できることを知っておく必要があります。li は div に対応できないと考える人がいるのはなぜでしょうか。リーはそんなにケチだと思わないでください。リーは痩せていて小さく見えますが、実は心が広いのです...

5. ブロックレベル要素はブロックレベル要素と並べて配置され、インライン要素はインライン要素と並べて配置されます。

<div><h2></h2><p></p></div> —— はい
<div><a href=”#”></a><span></span></div> —— はい

<div><h2></h2><span></span></div> — 間違い