Heim > Artikel > Web-Frontend > Detaillierte grafische Erläuterung von drei Methoden zum Hinzufügen von Bildern zu HTML-Seiten
Detaillierte grafische Erläuterung von drei Methoden zum Hinzufügen von Bildern zu HTML-Seiten
- yuliaOriginal
- 2018-10-08 10:24:5933606Durchsuche
Während des Seitenlayouts ist es oft notwendig, Bilder in die Seite einzufügen. Wissen Sie, wie man Bilder in HTML hinzufügt? Dieser Artikel stellt Ihnen drei Methoden zum Einfügen von Bildern in HTML-Seiten vor. Ich hoffe, dass er Ihnen weiterhilft.
Methode 1. Verwenden Sie das img-Tag in HTML, um Bilder hinzuzufügen
Die einfachste und am häufigsten verwendete Methode ist die direkte Verwendung des img-Tags, und Sie können die Größe festlegen des Bildes nach Bedarf. Der Code lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/picture1.jpg"/ style="max-width:90%" height="180px" alt="Detaillierte grafische Erläuterung von drei Methoden zum Hinzufügen von Bildern zu HTML-Seiten" > </body> </html>
Rendering:
Methode 2. Verwenden Sie JavaScript, um ein img-Element zu erstellen Bilder importieren
Erstellen Sie zuerst ein img-Element, legen Sie dann den Pfad des img-Elements sowie die Bildlänge und -breite fest und fügen Sie es schließlich in die Seite ein. Der Code lautet wie folgt:
<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> Methode 3. Verwenden Sie innerHTML beim dynamischen Einfügen von Bildern
verwendet weiterhin die Methode in JavaScript, aber die Schreibmethode ist anders Element und fügen Sie es der HTML-Seite hinzu. Der Code lautet wie folgt:
<script type="text/javascript"> document.body.innerHTML = '<img src="img/picture1.jpg" style="max-width:90%" style="max-width:90%" / alt="Detaillierte grafische Erläuterung von drei Methoden zum Hinzufügen von Bildern zu HTML-Seiten" >'; </script>
Bild Der Effekt ist der gleiche wie bei Methode eins.
Das Obige stellt drei Methoden zum Hinzufügen von Bildern zu HTML-Seiten vor. Im Allgemeinen verwenden wir das IMG-Tag zum Hinzufügen von Bildern, manchmal verwenden wir jedoch auch JavaScript, um Bilder dynamisch einzufügen Bedürfnisse des Projekts. Neulinge können es selbst ausprobieren, ich hoffe, es kann Ihnen helfen!
Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung von drei Methoden zum Hinzufügen von Bildern zu HTML-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!