ホームページ > 記事 > ウェブフロントエンド > HTMLのネストルールの詳しい説明
HTMLのネストルールの詳しい説明
- 高洛峰オリジナル
- 2017-03-31 10:41:072008ブラウズ
まず基本について話しましょう。 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.
以上がHTMLのネストルールの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。