So verwenden Sie das img-Tag von HTML

Verwendung des img-Tags: Zeigen Sie das erhaltene Bild über das src-Attribut des img-Tags an. Wenn das Bild nicht angezeigt werden kann, verwenden Sie das alt-Attribut Alternativtext. Das img-Tag von

html kann zum Anzeigen von Bildern auf einer Webseite verwendet werden. Es ist ein leeres Tag, das nur Attribute und kein schließendes Tag > enthält ;.

Attribute des img-Tags

Das img-Tag kann Folgendes enthalten: src-Attribut, Höhen- und Breitenattribute und alt-Attribut. Das src-Attribut und das alt-Attribut sind wichtige Attribute des HTML-img-Tags.

Sehen wir uns diese Attribute des img-Tags genauer an:

1. Das src-Attribut ist die Beschreibung. Erforderliches Attribut der Bildquelle oder des Bildpfads, das dem Browser anweist, wo das Bild auf dem Server zu finden ist.

Also, verstanden? Es gibt zwei Situationen:

1), das Bild im selben Ordner abrufen Wenn sich die HTML-Datei und das Bild im selben Ordner befinden, wie folgt:

Wir können den Bildnamen direkt in das src-Attribut eingeben, wie zum Beispiel:

<div class="demo">
	<h1 id="img标签">img标签</h1>
	<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/685/491/135/1544867308967602.jpg"  class="lazy"   / alt="So verwenden Sie das img-Tag von HTML" >
</div>

Rendering:

2) , in einem anderen Verzeichnis/Ordner, wie zum Beispiel:

, können Sie wie folgt auf das Bild zugreifen:

<div class="demo">
	<h1 id="img标签">img标签</h1>
	<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/248/661/674/1544867620251244.jpg"  class="lazy"   / alt="So verwenden Sie das img-Tag von HTML" >
</div>

Der Effekt ist wie oben gezeigt .

Wenn es komplizierter ist: Wenn wir das So verwenden Sie das img-Tag von HTML-Bild im Ordner E ------> img der lokalen Festplatte ablegen, können wir das Bild wie folgt anzeigen:

< img src="E:/img/So verwenden Sie das img-Tag von HTML">

2. Höhen- und Breitenattribute

Die Höhen- und Breitenattribute des img-Tags können verwendet werden, um die Höhe und Breite des Bildes festzulegen, zum Beispiel:

<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/024/5c14d1bf3d0d7788.jpg"  class="lazy"       style="max-width:90%" height="300px"/ alt="So verwenden Sie das img-Tag von HTML" >

Rendering:

Die Höhe und Breite des IMG-Tag-Bildes kann auch über CSS eingestellt werden, zum Beispiel:

img{
   width:450px;
   height:300px;
}

3. Alt-Attribut

Wenn das Bild nicht im Browser angezeigt werden kann, können Sie das Alt-Attribut verwenden, um alternativen Text anzuzeigen.
Beispiel: Sie möchten ein So verwenden Sie das img-Tag von HTML-Bild anzeigen, aber es gibt kein

<h1 id="img标签">img标签</h1>
<img  src="img/So verwenden Sie das img-Tag von HTML"     style="max-width:90%" height="300px"/ alt="So verwenden Sie das img-Tag von HTML" >

Rendering im Ordner:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das img-Tag von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!