Was sind die Attribute des HTML-IMG-Tags? Erfahren Sie, wie Sie das IMG-Tag verwenden

Was sind die Attribute des HTML-IMG-Tags? Wissen Sie, wie man IMG verwendet? Dieser Artikel bietet eine umfassende Erklärung aller HTML-IMG-Tag-Attribute. Ich hoffe, dass jeder mit HTML und dem img-Tag vertraut ist.

In HTML werden Bilder durch das -Tag definiert.

ist ein leeres Tag, was bedeutet, dass es nur Attribute enthält und kein schließendes Tag hat.

Um ein Bild auf der Seite anzuzeigen, müssen Sie das Quellattribut (src) verwenden. src bezieht sich auf „Quelle“. Der Wert des Quellattributs ist die URL-Adresse des Bildes.

Die Syntax zum Definieren eines Bildes lautet:

<img src="url" alt="some_text">

URL bezieht sich auf den Speicherort, an dem das Bild gespeichert ist. Wenn sich ein Bild mit dem Namen „pulpit.jpg“ im Bilderverzeichnis von www.runoob.com befindet, lautet seine URL http://www.runoob.com/images/yidian.jpg.

Der Browser zeigt das Bild im Dokument überall dort an, wo das Bild-Tag erscheint. Wenn Sie ein Bild-Tag zwischen zwei Absätzen platzieren, zeigt der Browser zuerst den ersten Absatz, dann das Bild und schließlich den zweiten Absatz an.

Definition und Verwendung

Das img-Element bettet ein Bild in eine Webseite ein.

Bitte beachten Sie, dass das -Tag technisch gesehen kein Bild in die Webseite einfügt, sondern das Bild von der Webseite verlinkt. Das -Tag erstellt einen Platzhalter für das referenzierte Bild. Das

-Tag verfügt über zwei erforderliche Attribute: src-Attribut und alt-Attribut.

src-Attribut: Gibt die URL des anzuzeigenden Bildes an. Das Attribut

alt wird verwendet, um eine Zeichenfolge mit vorbereitetem Alternativtext für das Bild zu definieren.

Der Wert des Ersetzungstextattributs ist benutzerdefiniert.

<img src="boat.gif" alt="Big Boat">

Wenn der Browser das Bild nicht laden kann, teilt das Ersatztextattribut den Lesern mit, welche Informationen sie verloren haben. An dieser Stelle zeigt der Browser diesen alternativen Text anstelle des Bildes an. Es empfiehlt sich, allen Bildern auf der Seite das Alt-Text-Attribut hinzuzufügen. Dies trägt zur besseren Anzeige von Informationen bei und ist sehr nützlich für diejenigen, die Nur-Text-Browser verwenden.

Skalierung des HTML-img-Attributs

HTML-Teil:

<div class="tu"><img src=“suofang.jpg”>

CSS-Steuerbildskalierung:

.tu img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
}

Hinweis: Das Bild ist größer als 640. Wird automatisch auf 640 Pixel skaliert. Wenn die Höhe größer als 720 Pixel ist, wird sie auf 720 Pixel skaliert. Hinweis: Im Allgemeinen wird die Größe von Bildern nicht kontrolliert.

Zentrierte Darstellung des Bildes: (mit allen Ausrichtungsattributwerten)

links: Richtet das Bild links aus

rechts: Richtet das Bild aus nach rechts

Mitte: Bild in der Mitte ausrichten

oben: Bild nach oben ausrichten

unten: Bild nach unten ausrichten

height, width-Attribut

height (height) und width (width)-Attribute werden verwendet, um die Höhe und Breite des Bildes festzulegen.

Die Standardeinheit für Attributwerte ist Pixel:

<img src="pulpit.jpg" alt="Pulpit rock" width="404" height="258">

Tipp: Es empfiehlt sich, die Höhe und Breite des Bildes anzugeben. Wenn ein Bild eine bestimmte Höhe und Breite hat, werden die angegebenen Abmessungen beim Laden der Seite beibehalten. Wenn die Größe des Bildes nicht angegeben wird, kann das Gesamtlayout der HTML-Seite beim Laden der Seite zerstört werden.

Grundlegende Hinweise – Hilfreiche Tipps:

Hinweis: Wenn eine HTML-Datei zehn Bilder enthält, müssen zur korrekten Anzeige der Seite 11 Dokumente geladen werden. Das Laden von Bildern nimmt Zeit in Anspruch. Unser Rat lautet daher: Verwenden Sie Bilder mit Vorsicht.

Hinweis: Achten Sie beim Laden der Seite auf den Pfad zum Einfügen des Seitenbildes. Wenn die Position des Bildes nicht korrekt festgelegt werden kann, kann der Browser das Bild nicht laden und das Bild-Tag wird als fehlerhaft angezeigt Bild.

HTML-Bild-Tag:

Bild definieren

Unterschiede zwischen HTML und XHTML:

In HTML hat das -Tag kein schließendes Tag.

In XHTML muss das -Tag ordnungsgemäß geschlossen werden.

In HTML 4.01 sind die Attribute „align“, „border“, „hspace“ und „vspace“ des Bildelements veraltet.

In XHTML 1.0 Strict DTD werden die Attribute „align“, „border“, „hspace“ und „vspace“ des Bildelements nicht unterstützt.

[Wissensergänzung] Optionale Attribute in

img:

• align: Gibt an, wie das Bild entsprechend dem umgebenden Text angeordnet werden soll.

• Rand: Definiert den Rand um das Bild.

• Höhe: Definiert die Höhe des Bildes.

• hspace: Definieren Sie den Leerraum auf der linken und rechten Seite des Bildes.

• ismap: Definiert das Bild als serverseitige Imagemap.

• longdesc: Verweist auf eine URL, die ein langes Bildbeschreibungsdokument enthält.

• usemap: Definieren Sie das Bild als Client-Image-Map.

• vspace: Definiert den Leerraum oben und unten im Bild.

• Breite: Legen Sie die Breite des Bildes fest.

[Verwandte Empfehlungen]

Grundlegende Elemente von HTML, sodass Sie HTML von Grund auf lernen können

Was ist eine HTML-Datei? Ein vorläufiges Verständnis von HTML-Dateien

Das obige ist der detaillierte Inhalt vonWas sind die Attribute des HTML-IMG-Tags? Erfahren Sie, wie Sie das IMG-Tag verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!