Ausführliche Erläuterung der grundlegenden Verwendung des IMG-Bild-Tags bei der Erstellung von HTML-/XHTML_HTML-/Xhtml_Webseiten

Das Bild-Tag wird verwendet, um ein Bild auf einer Webseite anzuzeigen.
HTML/XHTML-Bild -Tag
In XHTML wird das -Tag verwendet, um ein anzuzeigendes Bild zu definieren. ist ein ungepaartes Tag.

Grundlegende Syntax:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <img src="url" />

Das

-Tag bestimmt die Quelle des Bildes über das src-Attribut und die URL ist eine relative oder absolute Bildadresse.

Bild-Tag-Attribute:
src: Bildquelle, erforderlich. Geben Sie die Quelladresse des angezeigten Bildes an. Dabei kann es sich um eine relative oder eine absolute Adresse handeln.
alt: Alternativtext, kann weggelassen werden. Es wird verwendet, um den angezeigten Text zu ersetzen, wenn das Bild nicht angezeigt werden kann oder der Browser das Bild blockiert.
Titel: Bildaufforderungstext, kann weggelassen werden. Wenn Sie mit der Maus über das Bild fahren, wird der entsprechende Text angezeigt.
Breite: Die Breite der Bildanzeige, kann weggelassen werden. Einheiten sind Pixel.
Höhe: Die Höhe der Bildanzeige, die weggelassen werden kann. Einheiten sind Pixel.

Textersetzungsattribut (alt)
Textersetzungsattribut des Bild-Tags alt Obwohl es kein erforderliches Attribut ist, ist es ein sehr wichtiges Attribut. Wenn der Browser das Bild aus irgendeinem Grund nicht lesen kann, wird dieser alternative Text angezeigt, um das Originalbild zu ersetzen und die verlorenen relevanten Bildinformationen bereitzustellen. Dieses Attribut hilft auch Benutzern, die Nur-Text-Browser verwenden, den Inhalt der Seite zu verstehen.
Daher empfiehlt es sich, jedem Bild ein aussagekräftiges Alt-Text-Ersetzungsattribut hinzuzufügen.

Tag-Verwendungspraxis
Erstellen Sie einen Bilderordner unter dem e:html-Ordner, um Bilddateien zu speichern. Klicken Sie mit der rechten Maustaste auf das Bild unten und wählen Sie „Bild speichern unter“, um das Bild zur späteren Verwendung im Bilderordner zu speichern.

Bearbeiten Sie unser kleines XHTML-Beispiel 1.html und nehmen Sie die folgenden Änderungen im div-Tag mit id="main-content" vor:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <h3>Artikeltitelh3 >
2. <p>Detaillierter Inhalt des Artikels p>
3. <p><img src="images/flower_1.jpg" alt= "Blumen" />p>

Auf diese Weise zeigen wir ein Bild auf der Webseite an.

Geben Sie die Bildanzeigegröße an
Sie können dem -Tag Breiten- oder Höhenattribute hinzufügen, um die Bildanzeigegröße manuell festzulegen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <img src="images/flower_1.jpg " alt="Blume" Breite= "350" Höhe="270" />

Tipps
Unter normalen Umständen wird das Bildgrößenattribut ignoriert und standardmäßig die Originalbildgröße angezeigt oder der Browser passt die Größenanzeige an. Die Angabe einer ungeeigneten Bildanzeigegröße kann dazu führen, dass das Bild verzerrt erscheint.
Da das Laden von Bildern eine gewisse Zeit in Anspruch nimmt, sollten Sie versuchen, die Größe des Bildes zu reduzieren und gleichzeitig die Bildqualität sicherzustellen, um ein gutes Benutzerzugriffserlebnis zu erzielen.

Erweiterte Lektüre
Pixel: Wir können uns ein Pixel als den kleinsten Punkt vorstellen, den ein Computer beispielsweise oft mit 1024*768 anzeigen kann Der Bildschirm hat horizontal 1024 (Pixel) Punkte und vertikal 768 (Pixel) Punkte. Wenn es als Einheit verwendet wird, wird es im Allgemeinen standardmäßig als pix geschrieben.