ホームページ > 記事 > ウェブフロントエンド > HTML上に画像を挿入する方法
HTML上に画像を挿入する方法
- 清浅オリジナル
- 2018-12-04 15:55:0264172ブラウズ
HTML に画像を挿入する方法には、HTML コードに直接挿入する方法、CSS スタイルに挿入する方法、img の src 値を設定して JavaScript に画像を挿入する方法、および innerHTML に img 属性を挿入して画像を挿入する方法があります。
ページにテキストだけがあると非常に単調で退屈に見えますが、画像を追加すると見栄えが良くなります。今日はHTMLページに画像を挿入する方法を紹介します。
#[おすすめコース: HTML コース #、JavaScript コース ]
画像を HTML ページに挿入するには、html
<img src="" alt="">で a1f02c36ba31691bcfe87b2722de723b タグを使用する必要があります。
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>レンダリング: 
<body>
<img id="demo">
<script>
var demo=document.getElementById("demo");
demo.src="images/3.jpg";
demo.width="450";
demo.height="300";
</script>
</body>レンダリング: 
<div id="demo"></div>
<script>
var demo=document.ElementById("demo");
demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>レンダリング: 
以上がHTML上に画像を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。