Heim > Web-Frontend > HTML-Tutorial > So verwenden Sie das img-Tag von HTML

So verwenden Sie das img-Tag von HTML

青灯夜游
Freigeben: 2018-12-17 09:18:34
Original
10898 Leute haben es durchsucht

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

So verwenden Sie das img-Tag von HTML

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>img标签</h1>
	<img  src="So verwenden Sie das img-Tag von HTML" / alt="So verwenden Sie das img-Tag von HTML" >
</div>
Nach dem Login kopieren
So verwenden Sie das img-Tag von HTMLRendering:

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

So verwenden Sie das img-Tag von HTML

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

<div class="demo">
	<h1>img标签</h1>
	<img  src="img/So verwenden Sie das img-Tag von HTML" / alt="So verwenden Sie das img-Tag von HTML" >
</div>
Nach dem Login kopieren
So verwenden Sie das img-Tag von HTMLDer 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">
Nach dem Login kopieren

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="img/So verwenden Sie das img-Tag von HTML"     style="max-width:90%" height="300px"/ alt="So verwenden Sie das img-Tag von HTML" >
Nach dem Login kopieren
Rendering:


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

img{
   width:450px;
   height:300px;
}
Nach dem Login kopieren
So verwenden Sie das img-Tag von HTML

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

img标签

<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" >
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage