HTML IMG タグの属性は何ですか? IMGタグの使い方を学ぶ

HTML IMG タグの属性は何ですか? IMGの使い方を知っていますか？この記事では、HTML の img タグのすべての属性について包括的に説明します。皆さんも HTML と img タグについてよく知っていると思います。

HTML では、画像は タグで定義されます。

は空のタグです。つまり、属性のみが含まれており、終了タグがありません。

ページに画像を表示するには、source 属性 (src) を使用する必要があります。 src は「ソース」を指します。 source 属性の値は、画像の URL アドレスです。

画像を定義するための構文は次のとおりです:

<img src="/static/imghwm/default1.png"  data-src="url"  class="lazy"   alt="some_text">

URL は画像が保存されている場所を指します。 「pulpit.jpg」という名前の画像が www.runoob.com の画像ディレクトリにある場合、その URL は http://www.runoob.com/images/yidian.jpg です。

ブラウザは、イメージタグが表示されるドキュメント内のイメージを表示します。 2 つの段落の間にイメージ タグを配置すると、ブラウザでは最初に最初の段落が表示され、次にイメージが表示され、最後に 2 番目の段落が表示されます。

定義と使用法

img 要素は、Web ページに画像を埋め込みます。

技術的には、 タグは Web ページに画像を挿入するのではなく、Web ページから画像をリンクすることに注意してください。 タグは、参照された画像のプレースホルダーを作成します。

タグには、src 属性と alt 属性の 2 つの必須属性があります。

src属性: 画像を表示するURLを指定します。

alt 属性は、画像に対して準備された代替テキストの文字列を定義するために使用されます。

置換テキスト属性の値はユーザー定義です。

<img src="/static/imghwm/default1.png"  data-src="boat.gif"  class="lazy"   alt="Big Boat">

ブラウザが画像を読み込めない場合、置換テキスト属性により、失われた情報が読者に伝えられます。この時点で、ブラウザには画像の代わりにこの代替テキストが表示されます。ページ上のすべての画像に alt テキスト属性を追加することをお勧めします。これは、情報をより適切に表示するのに役立ち、テキストのみのブラウザを使用する場合に非常に便利です。

HTML img 属性のスケーリング

HTML 部分:

<div class="tu"><img  src="/static/imghwm/default1.png"  data-src="pulpit.jpg"  class="lazy"  src=“suofang.jpg” alt="HTML IMG タグの属性は何ですか? IMGタグの使い方を学ぶ" >

css 制御画像スケーリング:

.tu img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
}

説明: 画像が 640 ピクセルより大きい場合は、自動的に 640 ピクセルにスケーリングされます。640 ピクセルより小さい場合は、実際のサイズ。720px より大きい場合、高さは 720px に拡大縮小されます。720px 未満は実際のサイズです。注: 通常、画像のサイズは制御されません。

画像の中央揃え表示: (すべての配置属性値が付加された状態)

left: 画像を左に配置

right: 画像を右に配置

middle: 画像を中央に配置

top: 上揃えで画像を揃えます

bottom: 画像を下に揃えます

高さ、幅属性

高さ (高さ) と幅 (幅) 属性は、画像の高さと幅を設定するために使用されます。画像。

属性値のデフォルトの単位はピクセルです:

<img src="/static/imghwm/default1.png"  data-src="pulpit.jpg"  class="lazy"   alt="Pulpit rock"    style="max-width:90%"  style="max-width:90%">

ヒント: 画像の高さと幅を指定することをお勧めします。画像の高さと幅が指定されている場合、ページの読み込み時に指定されたサイズが保持されます。画像のサイズが指定されていない場合、ページが読み込まれるときに HTML ページ全体のレイアウトが崩れる可能性があります。

基本的なメモ - 役立つヒント:

注: HTML ファイルに 10 個の画像が含まれている場合、ページを正しく表示するには、11 個のファイルをロードする必要があります。画像の読み込みには時間がかかるため、画像の使用には注意が必要です。

注: ページをロードするときは、ページ画像を挿入するパスに注意してください。画像の位置が正しく設定できない場合、ブラウザは画像をロードできず、画像タグに壊れた画像が表示されます。

htmlイメージタグ：

＆lt; img＆gt;画像を定義する画像＆lt;マップ＆gt;画像マップ＆lt;領域＆gt;画像マップのクリック可能な領域を定義する

HTMLとXHTMLの間の差別HTML では、 タグには終了タグがありません。

XHTML では、 タグを正しく閉じる必要があります。

HTML 4.01 では、image 要素の「align」、「border」、「hspace」、「vspace」属性は非推奨になりました。

XHTML 1.0 Strict DTD では、image 要素の「align」、「border」、「hspace」、「vspace」属性はサポートされていません。

【知識補足】

imgのオプション属性:

align: 周囲のテキストに合わせて画像を配置する方法を指定します。

border: 画像の周囲の境界線を定義します。

• 高さ: 画像の高さを定義します。

• hspace: 画像の左側と右側の空白を定義します。

• ismap: 画像をサーバー側の画像マップとして定義します。

• longdesc: 長い画像説明ドキュメントを含む URL を指します。

• usemap: イメージをクライアント イメージ マップとして定義します。

• vspace: 画像の上部と下部の空白スペースを定義します。

• width: 画像の幅を設定します。

【関連おすすめ】

HTMLをゼロから学べるHTMLの基本要素

HTMLファイルとは何ですか？ HTML ファイルについての予備的な理解

以上がHTML IMG タグの属性は何ですか? IMGタグの使い方を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。