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

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML上に画像を挿入する方法

清浅

Dec 04, 2018 pm 03:55 PM

html

HTML に画像を挿入する方法には、HTML コードに直接挿入する方法、CSS スタイルに挿入する方法、img の src 値を設定して JavaScript に画像を挿入する方法、および innerHTML に img 属性を挿入して画像を挿入する方法があります。

ページにテキストだけがあると非常に単調で退屈に見えますが、画像を追加すると見栄えが良くなります。今日はHTMLページに画像を挿入する方法を紹介します。

#[おすすめコース: HTML コース #、JavaScript コース ]

画像を HTML ページに挿入するには、html

<img src="" alt="">

ログイン後にコピー

でタグを使用する必要があります。

img は「image」の略で、ページに表示される画像です。

src は「ソース」の略で、コードを記述するときは、先頭にサブディレクトリ名を使用するのが最善です。画像の名前の

#alt は「テキスト」を表し、画像が見つからない場合はテキストを表示するか、画像の上にマウスを置くと設定されたテキストがポップアップするようにブラウザに指示します。

# #Web 画像形式

#.gif: 一連のカラフルな画像要素または点で構成され、アニメーション画像となる画像に配置された単純な形式です。

.png: gif 形式に似ていますが、部分的な透明度のオプションがあり、可逆圧縮のみをサポートします。

.JPEG: JPEG 形式は、現在インターネット上で最も一般的な画像形式であり、ファイルを最小の形式に圧縮できる形式です。

HTML コードに画像を直接挿入

<img src="images/1.jpg">

ログイン後にコピー

レンダリング:

CSS スタイルに画像を挿入

<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>

ログイン後にコピー

レンダリング:

HTML上に画像を挿入する方法

#JavaScript 言語を使用して画像を挿入

<body>
<img id="demo">
<script>
	var demo=document.getElementById("demo");
	demo.src="images/3.jpg";
	demo.width="450";
	demo.height="300";
</script>
</body>

ログイン後にコピー

レンダリング:

HTML上に画像を挿入する方法

#挿入する innerHTML メソッドphotos

<div id="demo"></div>
<script>
	var demo=document.ElementById("demo");
	demo.innerHTML=&#39;<img src="images/4.jpg" width="450px" height="300px">&#39;;
</script>

ログイン後にコピー

レンダリング:

Image 5.jpg