Detaillierte Erklärung der grundlegenden Verwendung des img-Bild-Tags in HTML/XHTML

Das Bild-Tag wird verwendet, um ein Bild auf einer Webseite anzuzeigen.
HTML/XHTML-Bild <img />-Tag
In XHTML wird ein Bild mit dem Tag <img /> definiert. <img /> ist ein unpaariges Tag.

Grundlegende Syntax:

Der <img />-Tag bestimmt über das src-Attribut die Bildquelle. 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. Wird für Ersatztext verwendet, der angezeigt wird, wenn das Bild nicht angezeigt werden kann oder der Browser das Bild blockiert.
Titel: Bildhinweistext, kann weggelassen werden. Wenn Sie mit der Maus über das Bild fahren, wird der entsprechende Text angezeigt.
Breite: Die Breite der Bildanzeige, die weggelassen werden kann. Die Einheit ist Pixel.
Höhe: Die Höhe der Bildanzeige, die weggelassen werden kann. Die Einheit ist Pixel.

Textalternative-Attribut (alt)
Das Textersetzungsattribut alt des Bild-Tags ist kein erforderliches Attribut, aber ein sehr wichtiges Attribut. Wenn der Browser das Bild aus irgendeinem Grund nicht lesen kann, wird anstelle des Originalbildes der alternative Text angezeigt, um die fehlenden relevanten Bildinformationen bereitzustellen. Dieses Attribut hilft auch Benutzern, die Nur-Text-Browser verwenden, den Inhalt der Webseite zu verstehen.
Daher empfiehlt es sich, jedem Bild ein aussagekräftiges Alternativtext-Ersetzungsattribut hinzuzufügen.

Praxis der Verwendung des <img />-Tags
Erstellen Sie unter dem Ordner „e:html“ einen Ordner „Bilder“, 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 XHTML example1.html und nehmen Sie die folgenden Änderungen im Div-Tag mit id="main-content" vor:

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

Festlegen der Bildanzeigegröße
Sie können dem Tag <img /> Breiten- oder Höhenattribute hinzufügen, um die Anzeigegröße des Bildes manuell festzulegen:

Hinweis
Im Allgemeinen wird das Bildgrößenattribut ignoriert und standardmäßig die Originalbildgröße oder die adaptive Browsergröße angezeigt. Die Angabe einer ungeeigneten Bildanzeigegröße kann zu einer Bildverzerrung führen.
Da das Laden von Bildern eine gewisse Zeit in Anspruch nimmt, sollten Sie versuchen, die Größe der Bilder zu reduzieren und gleichzeitig die Qualität der Bilder sicherzustellen, um eine gute Benutzererfahrung zu erreichen.

Weiterführende Literatur
Pixel: Wir können uns ein Pixel bildlich als den kleinsten Punkt vorstellen, den ein Computer anzeigen kann. Die Bildschirmauflösung wird beispielsweise oft mit 1024 x 768 angegeben, was bedeutet, dass der Bildschirm horizontal 1024 (Pixel) Punkte und vertikal 768 (Pixel) Punkte hat. Bei Verwendung als Einheit wird es im Allgemeinen standardmäßig als „Pix“ geschrieben.