ホームページ  >  記事  >  ウェブフロントエンド  >  html5のimgはブロックレベルの要素ですか?

html5のimgはブロックレベルの要素ですか?

青灯夜游
青灯夜游オリジナル
2021-12-16 16:15:563113ブラウズ

html5 img はブロックレベルの要素ではありません。 img はインライン要素であり、置換要素でもあり、幅と高さの属性が組み込まれているため、img タグで幅と高さを設定できます。 img はインライン置換要素で、高さ、幅、パディング、マージンがすべて利用可能で、効果はブロック要素と同等です。

html5のimgはブロックレベルの要素ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

# タグの基本的な使用方法

ブラウザのサポート

#すべての主要なブラウザがサポート
    <img>
  • タグ

タグの定義と使用手順

    <img>
  • タグは HTML ページ内の画像を定義します
  • <img>
  • タグには 2 つの必須属性があります: src と alt開発中のすべての画像で alt 属性を使用することを強くお勧めします。こうすることで、画像を表示できない場合でも、ユーザーは何が欠けているかに関する情報を確認できます。そして、障害のある人にとって、多くの場合、alt 属性は、画像が何についてのものかを知る唯一の方法です。

それは正確には何ですか

インライン要素ですか、それともブロックレベル要素ですか?

  • タグは専用行を占有しないのでインライン要素なので問題ありません

インライン要素なのになぜ幅や高さが設定できるのでしょうか?

この質問は次の部分につながります。
  • ラベルは置換要素であり、幅と高さが組み込まれています。属性を設定できるため、詳細な説明については以下を参照してください。
  • 要素の定義

要素自体の特徴から、置換不可能な要素と置換可能な要素に分類できます

要素関連の MDN 説明

置き換えられない要素

    (X)HTML
  • ほとんどの要素は置換不可能な要素です。つまり、そのコンテンツはユーザー (ブラウザなど) に直接表示されます。例:
  • I am the title

置換可能な要素

ブラウザは、タグと属性に基づいて要素の具体的な表示コンテンツを決定します。
  • たとえば、ブラウザは
  • <img>
  • タグの src 属性の値に基づいて画像情報を読み取り、表示します。 HTMLコードでは、実際の画像の内容を見ることができませんし、例えば、<input>タグのtype属性によって、入力ボックスを表示するかラジオボタンを表示するかが決まります。 (X)
  • <img>、、