Detaillierte Erläuterung der grundlegenden Verwendung des img-Image-Tags

In diesem Artikel wird hauptsächlich die grundlegende Verwendung des img-Bild-Tags in HTML/XHTML vorgestellt. Der Artikel listet einige häufig verwendete Attribute des img-Tags auf dazu

Der Image-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/HTMLCodeInhalt in die Zwischenablage kopieren

1. <img src="url" />

-Tag verwendet das src-Attribut, um die Bildquelle zu bestimmen, und URL ist eine relative oder absolute Bildadresse.

Bild-Tag-Attribut:
src: Bild Quelle, 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 sich nicht um ein erforderliches Attribut handelt, 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-Verwendung Übung
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 p-Tag mit id="main-content" vor:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. < h3 >Artikeltitelh3>

2. <p>Detaillierter Inhalt des Artikelsp>

3. <p><img src="images/flower_1.jpg" alt="Flowers" /> p>

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

Geben Sie die Bildanzeigegröße an
Sie können das Breiten- oder Höhenattribut zum 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 die Originalbildgröße wird standardmäßig oder angezeigt 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 anschaulich als den kleinsten Punkt vorstellen, den ein Computer anzeigen kann. Beispielsweise sagen wir oft, dass die Bildschirmauflösung 1024 * 768 beträgt dass der Bildschirm horizontal 1024 (Pixel) Punkte und vertikal 768 (Pixel) Punkte hat. Wenn es als Einheit verwendet wird, wird es im Allgemeinen standardmäßig als pix geschrieben.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der grundlegenden Verwendung des img-Image-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!