初心者フレンドに適したHTMLタグの入れ子ルール詳しくまとめ_HTML/Xhtml_Webページ制作

私は最近 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 つはブロックレベル要素 (ブロック) と呼ばれます。 type はインライン要素（インライン、インライン、インライン、ラインレベルなどと呼ぶ人も多い）と呼ばれます。

ブロックレベル要素とインライン要素を分ける基準は非常に簡単で、以下の2つを入れてください。 body タグにコード行を追加します:

コードをコピー

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

div1

div2

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

ページ上に表示される 2 つの div は、フロートされるか他の設定が行われない限り、2 行のスペースを占有します。それらは両方とも横暴であり、独自のスペースを占有しています。タグ内でこの現象が見られる場合は、次のように呼び出すことができます。 body タグに 2 行のコードを挿入します。

コードをコピーしますコードは次のとおりです:

span1

span2



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

今回は、2 つのスパンが連続して並べられており、友好的で、友好的で、調和しています。このようなラベルの動作により、インライン要素、

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

· ブロックレベル要素は、通常、Web サイトのアーキテクチャ、レイアウト、コンテンツの実行に使用されます。 .. …これらの主要な物理タスクはすべてブロックレベルの要素であり、次のタグが含まれます:

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

・インライン要素は通常、「スタイル、上付き文字、下付き文字、アンカー ポイントなど、次のタグはすべてインライン要素です:

a、abbr、頭字語、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. ブロック要素にはインライン要素または特定のブロック要素を含めることはできません。ブロック要素には、他のインライン要素のみを含めることができます:

—— はい
—— はい

—— 間違っています>
2. ブロックレベルの要素は

内に配置できません:

ol> — 誤り

gt;

—— 誤り

3. いくつかの特殊なブロックレベル要素があります。インライン要素のみを含めることができます。これらの特殊タグは次のとおりです:
h1、h2、h3、h4、h5、h6、p、dt

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

Li タグと div タグはどちらもコンテンツをロードするためのコンテナであり、同等のステータスを持ちます。レベルの区別 (例: h1 や h2^_^ などの厳密な階層) li タグは親の ul または ol にも対応できることを知っておく必要があります。なぜ li は div に対応できないと考えるのでしょうか。 li がとてもケチだとは思わないでください。li はかなり痩せているように見えますが、実際には大きな心を持っています...

5. ブロックレベルの要素は、ブロックレベルの要素と並列され、インラインで配置されます。要素はインライン要素と並列します:


gt;

—— 右

—— 右


;< ;/div> —— 違います