HTML タグのネスト規則_html/css_WEB-ITnose

概要:

最近プロジェクトを整理していたときに、一部の同僚が作成したページ コードがネストされすぎていることに気付きました。また、

content。この機能は実装されていますが、ブラウザーのレンダリング エンジンのパフォーマンスに多少の影響を与えます。そこで、HTML タグの入れ子のルールを大まかに整理しました。間違いがあれば読者の皆様にご指摘いただければ幸いです。

ご存知のとおり、HTML タグには次の 2 種類があります:

1. ブロックレベル要素
   div、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、頭字語、b、bdo、big、br、cite、コード、dfn、em、フォント、i、img、入力、kbd、ラベル、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var...
   機能: およびその他の要素 高さ、行の高さ、上下の余白は変更できません。
   機能: コンテンツの表示を強化するために使用されます。太字や斜体などのコントロールの詳細 お待ちください

例:

ブロックレベル要素

one

two

表示効果は次のとおりです:

one

two

業界の要素

onetwo

表示効果は次のとおりです:

onetwo

ブロック-level 要素と inline 要素は静的ではなく、CSS を通じて変更できます。 その特徴

display: inline; //インライン要素

display: block //ブロックレベルの要素

HTML タグはたくさんありますが、ページ作成時に無限にネストできますが、ネストにはルールがあります。任意にネストすることはできません。一部のタグには、ul に li が含まれる、ol に li が含まれる、dl に dt と dd が含まれるなど、固定のネスト ルールがあります。独立したタグがたくさんあります。どのように使用してより良いページを作成できるでしょうか? 以下で説明します

1. ブロックレベルの要素はブロックレベルの要素と同じレベルであり、インライン要素はインライン要素と同じレベルです
   

//span はインライン要素であり、p はブロックレベル要素であるため、これは間違ったネストです

//そうですね

block 要素には inline 要素またはいくつかの block 要素を含めることができますが、inline 要素には block 要素を含めることはできません。他のインライン要素のみを含みます

gt;gt;gt;

gt;gt;gt; ;

インライン要素のみを含めることができ、ブロックレベル要素を含めることはできないいくつかの特殊なブロックレベル要素 h1、h2、h3、h4、h5、h6、p、dt

ブロックレベル要素はタグ p 内に配置できませんli タグと div タグは両方ともコンテンツをロードするためのコンテナであるため、

li タグには div タグを含めることができます

概要:

?タグをネストできますが、ブラウザのレンダリング効率を向上させるために、次のようにする必要があります。ネストされたタグを最小化します。