ホームページ > 記事 > ウェブフロントエンド > HTML ページに画像を追加する 3 つの方法の詳細な図による説明
HTML ページに画像を追加する 3 つの方法の詳細な図による説明
- yuliaオリジナル
- 2018-10-08 10:24:5933480ブラウズ
ページをレイアウトするとき、多くの場合、ページに画像を挿入する必要があります。HTML に画像を追加する方法をご存知ですか?この記事ではHTMLページに画像を挿入する3つの方法を紹介しますので、興味のある方は参考にしていただければ幸いです。
方法 1. HTML で img タグを使用して画像を追加する
最も簡単で最も一般的に使用される方法は、img タグを直接使用することです。サイズを設定できます。コードは次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/picture1.jpg"/ style="max-width:90%" height="180px" alt="HTML ページに画像を追加する 3 つの方法の詳細な図による説明" > </body> </html>
レンダリング:
方法 2. JavaScript を使用して、img 要素を作成します。 import the image
まず img 要素を作成し、次に img 要素のパス、画像の長さと幅を設定し、最後にそれをページに挿入します。 コードは次のとおりです。 ##
<script type="text/javascript">
var Image1 = document.createElement("img");
Image1.src = "img/picture1.jpg";
Image1.width = 300;
Image1.height = 180;
document.body.appendChild(Image1);
</script>
方法 3. JavaScript で innerHTML を使用する 画像を動的に挿入する
引き続き JavaScript でメソッドを使用する 本質は方法 2 と似ていますが、記述方法が異なります。 img 要素を作成し、それを HTML ページに追加します。コードは次のとおりです。<script type="text/javascript"> document.body.innerHTML = '<img src="img/picture1.jpg" style="max-width:90%" style="max-width:90%" / alt="HTML ページに画像を追加する 3 つの方法の詳細な図による説明" >'; </script>Picture 効果は方法 1 と同じです。 上記では、HTML ページに画像を追加する 3 つの方法を紹介しました。通常は、img タグを使用して画像を追加しますが、動的に画像を挿入するために JavaScript を使用する場合もあります。プロジェクトのニーズ。初心者の方も自分で試してみてください。お役に立てれば幸いです。
以上がHTML ページに画像を追加する 3 つの方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。