Ausführliche Erläuterung der grundlegenden Verwendung des img-Bild-Tags in HTML/XHTML

Der 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:

<img  src="/static/imghw/default1.png"  data-src="url"  class="lazy"   / alt="Ausführliche Erläuterung der grundlegenden Verwendung des img-Bild-Tags in HTML/XHTML" >

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 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-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 p-Tag mit id="main-content" vor:

<h3 id="文章题目">文章题目</h3>  
<p>文章具体内容</p>  
<p><img src="/static/imghw/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵" /></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 -Tag hinzufügen, um die Bildanzeigegröße manuell festzulegen:

<img src="/static/imghw/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵"    style="max-width:90%"  style="max-width:90%" />

Tipps
Unter normalen Umständen wird das Bildgrößenattribut ignoriert und die ursprüngliche Bildgröße wird standardmäßig angezeigt oder der Browser passt die an Größenanzeige. 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 Qualität des Bildes 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.

Ausführlichere Erläuterungen zur grundlegenden Verwendung des img-Bild-Tags in HTML/XHTML und verwandte Artikel finden Sie auf der chinesischen PHP-Website!