初心者向けのHTMLタグネストルールの詳細なまとめ

最近、HTML を再度学習しており、これは HTML に対する新たな理解と言えます。これを過小評価しないでください。すべての Web ページはこれに基づいています。以下にHTMLタグのネストルールを詳しくまとめておきます。皆様のお役に立てれば幸いです。

XHTML には、div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、strong など、多くのタグがあります。これらのタグを使用してページ構造を構築すると、タグを無限にネストできます。ただし、ネストには一定のルールも必要であり、個人の習慣でランダムにネストすることはできません。結局のところ、XHTML は XML ではありません。

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

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

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

コードをコピー

コードは次のとおりです。

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

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

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

コードをコピー

コードは次のとおりです。

ブラウザのレンダリング効果:
スパン1 スパン2

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

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

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

アドレス、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

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

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var

ブロック要素とインライン要素は相互に変換できます。変換コードは次のとおりです。
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> — 間違い

<<: MySQL でサーバーのインストールを開始できない場合の解決策について簡単に説明します。

>>: Vue の基本 MVVM、テンプレート構文、データバインディング