HTMLのimgタグの使い方

imgタグの使用：imgタグのsrc属性で取得した画像を表示します。 画像が表示できない場合は、alt属性を使用して画像のサイズを設定します。代替テキスト。

html の img タグは、Web ページに画像を表示するために使用できます。これは属性のみを含み、終了タグ > を含まない空のタグです。 ;。

img タグの属性

img タグには、src 属性、高さと幅の属性、および alt 属性を含めることができます。 src 属性と alt 属性は、HTML img タグの重要な属性です。

img タグの次の属性を詳しく見てみましょう:

1. src 属性

src 属性これは、サーバー上の画像を見つける場所をブラウザに指示する、画像ソースまたはパスの description 必須属性です。

それでは、イメージが分かりましたか?状況は 2 つあります:

1)、同じフォルダー内の画像を取得する

HTML ファイルと画像が同じフォルダーにある場合は、次のようになります。

src 属性にイメージ名を直接入力できます。例:

<div class="demo">
	<h1 id="img标签">img标签</h1>
	<img  src="/static/imghwm/default1.png"  data-src="HTMLのimgタグの使い方"  class="lazy"   / alt="HTMLのimgタグの使い方" >
</div>

Rendering:

# 2)

などの別のディレクトリ/フォルダーで、次のように画像にアクセスできます:

<div class="demo">
	<h1 id="img标签">img标签</h1>
	<img  src="/static/imghwm/default1.png"  data-src="img/HTMLのimgタグの使い方"  class="lazy"   / alt="HTMLのimgタグの使い方" >
</div>

効果は上に示したとおりです。

さらに複雑な場合は、HTMLのimgタグの使い方 画像をローカル ディスク E --> img フォルダーに置くと、次のように画像を表示できます:

< img src="E:/img/HTMLのimgタグの使い方">

2. 高さと幅の属性##img タグの高さと幅の属性は、画像の高さと幅を設定するために使用できます。例:

<img  src="/static/imghwm/default1.png"  data-src="img/HTMLのimgタグの使い方"  class="lazy"       style="max-width:90%" height="300px"/ alt="HTMLのimgタグの使い方" >

レンダリング:

img タグ画像の高さと幅は、CSS を通じて設定することもできます。例:

img{
   width:450px;
   height:300px;
}

3. alt 属性

#画像がブラウザ上で表示できない場合、alt 属性を使用して代替テキストを表示できます。

例: HTMLのimgタグの使い方 の画像を表示したいが、フォルダー内に画像がありません

img标签
<img  src="/static/imghwm/default1.png"  data-src="img/HTMLのimgタグの使い方"  class="lazy"       style="max-width:90%" height="300px"/ alt="HTMLのimgタグの使い方" >

レンダリング:

#概要：以上がこの記事の全内容です。皆様の学習に役立つことを願っています。

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