HTMLのimgタグの使い方

青灯夜游
リリース: 2018-12-17 09:18:34
オリジナル
10899 人が閲覧しました

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

HTMLのimgタグの使い方

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

img タグの属性

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

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

1. src 属性

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

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

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

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

HTMLのimgタグの使い方

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

<div class="demo">
	<h1>img标签</h1>
	<img  src="HTMLのimgタグの使い方" / alt="HTMLのimgタグの使い方" >
</div>
ログイン後にコピー

Rendering:

HTMLのimgタグの使い方

# 2)

HTMLのimgタグの使い方

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

<div class="demo">
	<h1>img标签</h1>
	<img  src="img/HTMLのimgタグの使い方" / alt="HTMLのimgタグの使い方" >
</div>
ログイン後にコピー

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

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

< img src="E:/img/HTMLのimgタグの使い方">
ログイン後にコピー

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

<img  src="img/HTMLのimgタグの使い方"     style="max-width:90%" height="300px"/ alt="HTMLのimgタグの使い方" >
ログイン後にコピー

レンダリング:


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

img{
   width:450px;
   height:300px;
}
ログイン後にコピー

3. alt 属性

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

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

img标签

<img src="img/HTMLのimgタグの使い方" style="max-width:90%" height="300px"/ alt="HTMLのimgタグの使い方" >
ログイン後にコピー
レンダリング:


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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート