HTMLタグのネストの詳細ルール

今回は、HTMLタグのネストの詳細なルールと、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 つのタイプはインライン要素 (インライン、多くの人はインライン) と呼ばれますinline 、 inline 、 line level などとも呼ばれます)

ブロックレベル要素と inline 要素の分類基準は非常に簡単です。 次の 2 行のコードを body タグに記述してください:

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

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

ブラウザのレンダリング効果:
div1
div2
ページに表示される 2 つの div は、float (フロート) にされない限り、または他の設定が行われない限り、隣には存在しません。他のものはすべて横暴に独自の行を占有します - タグ内でこの現象が見られる場合は、いつでもそれを呼び出すことができます。
次の 2 行のコードを body タグに挿入します。コードは次のとおりです:

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

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

span1 span2

今回は、2 つのスパンが 1 行に並置されています。それらは隣接しており、友好的で調和しています... この
behavior
のようなタグでは、次のことができます。インライン要素 (インライン) と呼びます。 ブロックレベルの要素とインライン要素の違い: · ブロックレベルの要素は、通常、Web サイトのアーキテクチャ、レイアウトを構築し、コンテンツを運ぶために使用されます。これらの主要な物理的なタスクはすべて次のとおりです。ブロックレベルの要素。次のタグが含まれます:

address、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><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 を対応できないと考える人がいるのですか? li がとてもケチだとは思わないでください。li はかなり痩せているように見えますが、実際には大きな心を持っています...

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

<div><h2></h2><p></p></div> —— 对 
<div><a href=”#”></a><span></span></div> —— 对 
<div><h2></h2><span></span></div> —— 错

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTMLでヘッダー構造を使用する方法

type="file"の入力ボックススタイルを操作する方法

HTMLリストでは、dl(dt,dd)、ul (li) と ol(li) はどう違いますか？

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