HTMLに画像を挿入する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLに画像を挿入する方法

青灯夜游

May 03, 2021 am 09:06 AM

html 画像の挿入

HTML では、src 属性を指定した img タグを使用して画像を挿入できます。構文形式は「」です。 img タグは、HTML ページ内の画像を定義し、参照される画像のプレースホルダーを作成するために使用され、src 属性は、画像が表示される URL を指定するために使用されます。

HTMLに画像を挿入する方法

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

HTML では、img タグを使用して画像 を挿入できます。構文:

<img  src="/static/imghw/default1.png"  data-src="图片文件路径"  class="lazy"   / alt="HTMLに画像を挿入する方法" >

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="HTMLに画像を挿入する方法" >
	</body>
</html>

ログイン後にコピー

レンダリング:

HTMLに画像を挿入する方法

HTML タグ

HTMLに画像を挿入する方法タグは、HTML ページ内の画像を定義します。

HTMLに画像を挿入する方法タグには、src と alt という 2 つの必須属性があります。

注: 技術的には、画像は HTML ページに挿入されるのではなく、HTML ページにリンクされます。 HTMLに画像を挿入する方法タグは、参照画像のプレースホルダーを作成します。

ヒント: タグ内に HTMLに画像を挿入する方法タグをネストして、別のドキュメントへのリンクを追加します。

属性値:

#srcURL#usemapvspace 画像の上下の余白を指定します。 width 推奨チュートリアル: 「html ビデオチュートリアル

属性	値	説明
align	top bottom middle left right	HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。周囲のテキストに対して画像をどのように配置するかを指定します。
loading	eager: すぐにロードします。 lazy: 遅延ロード	ブラウザが画像をすぐにロードするか、遅延してロードするかを指定します。
alt	text	画像の代替テキストを指定します。
border	ピクセル	HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。画像の周囲の境界線を指定します。
クロスオリジン	匿名 use-credentials	画像のクロスドメイン属性を設定します
height	pixels	画像の高さを指定します。
hspace	ピクセル	HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。画像の左側と右側の余白を指定します。
ismap	ismap	画像をサーバー側のイメージマップとして指定します。
longdesc	URL	#HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。画像の長い説明を含むドキュメントを指す URL。
	画像を表示する URL を指定します。
#mapname	イメージをクライアント側のイメージマップとして定義します。
ピクセル	HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。
pixels	画像の幅を指定します。