HTML-Bilder

Mit HTML können Bilder in Dokumenten angezeigt werden.

Beispiel

Bild einfügen
Dieses Beispiel zeigt, wie man Bilder auf Webseiten anzeigt.
Bilder aus verschiedenen Positionen einfügen
Dieses Beispiel zeigt, wie man Bilder aus anderen Verzeichnissen oder Servern auf Webseiten einfügt.

（Mehr Beispiele finden Sie am Ende dieser Seite)

Bildtag (<img>) und Quellattribut (Src)

In HTML werden Bilder durch das <img>-Tag definiert.

<img> ist ein leeres Tag, was bedeutet, dass es nur Attribute enthält und keine schließenden Tags hat.

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

Die Syntax zur Definition eines Bildes ist:

<img src="url" />

Die URL weist auf den Speicherort des Bildes hin. Wenn sich das Bild "boat.gif" im Verzeichnis "images" der Domain "www.codew3c.com" befindet, lautet die URL http://www.codew3c.com/images/boat.gif.

Der Browser zeigt das Bild an der Stelle im Dokument an, wo das Bildtag auftritt. Wenn Sie das Bildtag zwischen zwei Absätzen platzieren, zeigt der Browser zunächst den ersten Absatz, dann das Bild und schließlich den zweiten Absatz.

Ersatztexteigenschaften (Alt)

Die alt-Attribut wird verwendet, um eine Reihe von vorbereiteten alternativen Texten für das Bild zu definieren. Der Wert des Alternative Text-Attributs ist vom Benutzer definiert.

<img src="boot.gif" alt="Große Yacht">

Wenn der Browser ein Bild nicht laden kann, kann die Alternative Text-Attribut dem Leser die verlorenen Informationen mitteilen. In diesem Fall zeigt der Browser diesen alternativen Text an, anstatt des Bildes. Es ist eine gute Angewohnheit, Alternative Text-Attribute für alle Bilder auf der Seite hinzuzufügen, da dies dazu beiträgt, Informationen besser anzuzeigen und ist sehr nützlich für Benutzer, die reinen Textbrowser verwenden.

Basis注意事项 - Nützliche Tipps:

Wenn eine HTML-Datei zehn Bilder enthält, müssen 11 Dateien geladen werden, um die Seite korrekt anzuzeigen. Das Laden von Bildern dauert Zeit, daher empfehlen wir: Verwenden Sie Bilder mit Bedacht.

Mehr Beispiele

Hintergrundbild
Dieses Beispiel zeigt, wie ein Hintergrundbild zu einer HTML-Seite hinzugefügt wird.
Rangordnen Sie das Bild
Dieses Beispiel zeigt, wie Bilder im Text zugeordnet werden.
Schwenken Sie das Bild
Dieses Beispiel zeigt, wie Bilder links oder rechts im Absatz verschoben werden können.
Bildgröße anpassen
Dieses Beispiel zeigt, wie Bilder in verschiedene Größen angepasst werden können.
替代文本显示图片
Dieses Beispiel zeigt, wie替代文本为图片显示。当浏览器无法加载图像时，替代文本属性告诉读者他们失去的信息。为页面上的所有图像添加替代文本属性是个好习惯。
Erstellen Sie einen Bildlink
Dieses Beispiel zeigt, wie ein Bild als Link verwendet wird.
Erstellen Sie eine Bildmappe
Dieses Beispiel zeigt, wie eine Bildmappe mit klickbaren Bereichen erstellt wird. Jeder Bereich ist ein Hyperlink.
Bild in Bildmappe umwandeln
Dieses Beispiel zeigt, wie ein normales Bild als Bildmappe eingerichtet wird.

BilBTTag

Tag Beschreibung
<img> Definieren Sie das Bild.
<map> Definieren Sie das Bild.
<area> Definieren Sie den klickbaren Bereich im Bild.