HTMLのネストルールの詳しい説明

まず基本について話しましょう。 HTML タグには 2 つのタイプがあります:

1. ブロックレベルの要素

p、h1~h6、address、blockquote、center、

dir、dl、dt、 dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul...

特徴: 常に新しい行で始まり、高さ、行の高さ、上下の余白は変更可能制御されている場合、幅が設定されていない限り、幅はデフォルトでコンテナの 100% になります。

機能: 主にウェブサイトの構造、

ページレイアウトを構築し、コンテンツを運ぶために使用されます。

2.インライン要素

span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、

font、i、img、input、kbd、label、q、s、 samp、select、small、strike、strong、sub、sup、textarea、tt、u、var...

特徴: これらはすべて他の要素と同じ行にあり、高さ、行の高さ、上下の余白は指定できません。変更可能で、幅はそのテキストまたは

画像の幅は変更できません。

機能: コンテンツの表示を強化し、太字、斜体などの詳細を制御するために使用されます。

HTMLタグはたくさんあり、ページを作るときに無限に入れ子にすることができますが、入れ子にはルールがあり、勝手に入れ子にすることはできません。

一部のタグには固定の入れ子ルールがあり、たとえば、ul には li が含まれ、ol には li が含まれ、dl には dt と dd が含まれ、多くは独立したタグです。より良いページを書くためには、一般に次のルールに従います:

1. ブロックレベルの要素はブロックレベルの要素と同じレベルにあり、

インライン要素はインライン要素と同じレベルにあります。ブロックレベル要素には、インライン要素または一部のブロックレベル要素を含めることができますが、インライン要素にはブロックレベル要素を含めることはできず、他のインライン要素のみを含めることができます。インライン要素はもう含めることができません。

<p><span></span></p><p></p>  //span是内行元素，p是块级元素，所以这个是错误的嵌套
<p><span></span><a></a></p>  //这个是正确的嵌套

4. ブロックレベルの要素は p タグ内に配置できません。 5. li タグと p タグの両方を含めることができます。コンテンツのコンテナです。

要約: ブラウザのレンダリング効率を向上させるには、ネストされたタグを最小限に抑え、フラット化する必要があります。

HTML5

新機能について

HTML5では、要素は

display

attributesによって区別されなくなりましたが、コンテンツmodel

によって区別されます:

メタデータコンテンツはパフォーマンスを記述するために使用できる要素です他のコンテンツの動作、または現在のドキュメントと他のドキュメント間の接続を確立するための要素です。 ヘッダー コンテンツは、セクション/セクションのタイトルを定義します。ドキュメント フロー コンテンツは、アプリケーションとドキュメントの本体で使用される要素のほとんどです。 フレージング コンテンツは、段落レベルのテキストをマークするために使用される要素です。

埋め込みコンテンツは、ドキュメント内の他のリソースを参照するか、そこに挿入される要素です。 ;

インタラクティブなコンテンツは、ユーザーと対話するために特別に設計された要素です。

どのカテゴリにも属さない要素は貫通と呼ばれ、複数のカテゴリに属する​​可能性のある要素は混合と呼ばれます。

以下は、よく使用されるタグのネストルールの概要です

1.

、

、

、

、

、

の子要素はステートメント要素です

2.

、

、

3. の子要素は次のとおりです。透明（親要素の許可された子要素に従う）、ただしインタラクティブ要素（インタラクティブコンテンツ）は除く

4.

をネストすることはできません

5. の子要素は、ステートメント Type 要素、インタラクティブ コンテンツ要素 (インタラクティブ コンテンツ) はネストできません

6. はネストできません

7.

、

、

はネストできませんフッター>、セクションコンテンツ、見出しコンテンツ

追伸：上記の内容はインターネットからまとめたものです、誤りや脱落があればご指摘ください。

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