HTML要素の分類の詳細な紹介

HTMLの要素の分類

1. ブロックレベル要素またはインライン要素による分類

ブロックレベル要素（block-level）とインライン要素（inline-level、「インライン」とも呼ばれます） " "要素）。

a. ブロックレベル要素 (1 行のみ)

ブロックレベル要素: 最も明白な特徴は、デフォルトで親要素のコンテンツ領域を水平方向に埋めることです。左側と右側の要素、つまりブロック レベル要素は、デフォルトでは 独自の行 にあります。 典型的なブロックレベル要素は、

、

、

~

、

などです。

b. インライン要素 (他の要素と行を共有できます)

インライン要素: インライン要素は新しいコンテンツ ブロックを形成しません。つまり、、 などはすべて典型的なインライン レベルの要素です。 displayattributeが「inline」に等しい要素はすべてインライン要素です。ほとんどすべての置換可能な要素は、、 などのインライン要素です。

追記：（ブロックレベルとインラインは相互に変換できます）：CSSのdisplay属性を設定することで、インライン要素をブロックレベル要素に変えることができます。インライン要素:display:inline に変換されます。

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

1.ブロックレベル要素は排他的な行を占有し、その幅は自動的に埋められます。親要素の幅。インライン要素は、単独で行を占有することはありません。隣接するインライン要素は、1 行に収まらなくなるまで折り返されません。要素

2. 通常の状況では、ブロック レベル要素は

width 属性と height 属性で設定できますが、インライン要素は幅と高さの設定に影響しません。

3. ブロックレベル要素は

marginとpaddingで設定できます。padding-left、padding-right、margin-left、margin-rightの水平方向。インライン要素はすべてマージン効果を生成しますが、垂直方向のpadding-top、padding-bottom、margin-top、margin-bottomはマージン効果を生成しません。 (水平方向では有効、垂直方向では無効)。

2. 置換可能要素と非置換要素による分類

もちろん、ブロックレベル要素やインライン要素以外にも、置換可能要素かどうかで分類することもできます。

a. 要素の置換 (この要素は、特定の属性の変更に基づいてさまざまな表示効果を生成できます)

要素の置換: ブラウザは、要素のタグと属性に基づいて要素の特定の表示コンテンツを決定します。要素。

例: ブラウザは image 情報を読み取り、 タグの src 属性 の値に基づいて表示しますが、(X) HTML コードを表示すると、実際のコンテンツは、 の type 属性 に基づいて、入力ボックスを表示するか、ラジオ ボタンを表示するかを決定する例です。 HTML の

(X)、、、<select>、object<span style="max-width:90%">> はすべて置換要素です。これらの要素には、多くの場合、実際のコンテンツがありません。つまり、空の要素です<a href="http://www.php.cn/wiki/60.html" target="_blank"></a></span></select>

b. 置換不可能な要素

置換不可能な要素: (X) HTML のほとんどの要素は置換不可能な要素です。コンテンツはユーザー側に直接表示されます。

ps: 一般に、インライン要素の幅と高さを設定するのは無意味ですが、なぜ input や img などの一部のインライン要素は幅と高さを設定できるのでしょうか?

input、imgなどはすべて置換要素であるため、置換要素は通常、固有のサイズを持っているため、設定可能な幅と高さがあり、これは非常に特殊です。幅と高さを設定しない場合、ブラウザはデフォルトの幅と高さを与えます。例: テキスト入力ボックス形式の入力では、デフォルトの幅と高さが指定されます。ただし、幅と高さを変更することはできます。

以上がHTML要素の分類の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。