Heim >Web-Frontend >HTML-Tutorial >HTML-Bild-Tags

HTML-Bild-Tags

WBOY
WBOYOriginal
2024-09-04 16:20:161343Durchsuche

HTML ist ein Nur-Text-Dokument, das es mehreren Formaten von Programmiersprachen ermöglicht, webbasierte Anwendungen zu implementieren, die Tags zur Beschreibung der Funktionalität der Webseiten verwenden. Ein solcher wesentlicher Tag ist der Image-Tag, der es den Entwicklern ermöglicht, Bilddateien in den Code einzubinden, um die entsprechenden Bilder auf der Webseite anzuzeigen. Diese Syntax lautet , wobei „Bild“ der Tag-Name ist und „src=“ die erforderliche Bild-URL zugewiesen haben sollte. In diesem Thema lernen wir etwas über HTML-Bild-Tags.

Bilder zu Webseiten hinzufügen

Sie können IMG zu einer HTML-Seite hinzufügen, indem Sie die Funktion verwenden. Tag im HTML-Dokument; Hier ist die Syntax:

<img src= enter the IMG URL here >

Hier teilt das IMG dem Browser mit, dass es bei dem Tag um das Hinzufügen eines IMG zum Dokument geht, und „src=“ gibt an, wo das Bild heruntergeladen werden soll.

Beispiel einer Seite mit einem Bild

Code:

<!DOCTYPE html>
<html>
<head>
<title> Example HTML IMG Tag </title>
</head>
<body>
<img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg"
alt = " Software development icon " height = " 150 " width = "140" />
</body>
</html>

Ausgabe:

HTML-Bild-Tags

Eine interessante Tatsache bei diesen HTML-Seiten ist, dass bei Verwendung des IMG-Tags das Bild nicht in die besagte Webseite eingefügt wird; Stattdessen wird ein Speicherplatz erstellt, in dem das Bild nach dem Herunterladen abgelegt wird.

Browserunterstützung und Kompatibilität mit Attributen

Wie zu erwarten ist, unterstützen alle modernen Browser Bilder und die Verwendung von IMG-Tags. Manchmal passen mobile Browser die Bildgröße an, damit sie auf den Bildschirm passt, wenn das Bild nicht als responsiv eingestellt ist.

Was die Kompatibilität von Attributen mit HTML 4.01 und neuerem HTML5 betrifft, funktionieren die meisten Tags, mit Ausnahme von aligning, border, hspace und space, die in letzterem einfach nicht unterstützt werden.

Bilder als Link:

Manchmal möchten Sie, dass ein Bild als Link zu einer anderen Seite fungiert. Sie können dies erreichen, indem Sie das IMG-Tag innerhalb des -Tags hinzufügen. Tag.

Ein Bild als Hintergrund einer Webseite festlegen

Mit der CSS-Eigenschaft „background-image“ im Body-Element der Seite können Sie ein Bild als Hintergrundbild einer Webseite zuweisen.

<body style="background-image:url(‘car.jpg');">
<h1>Background Image </h1>
</body>

Ein Bild so einstellen, dass es im Browser schwebt

Wir können die CSS-Eigenschaft „float“ verwenden, um ein Bild so einzustellen, dass es an einer beliebigen Stelle im Browserfenster schwebt. Schauen wir uns ein Beispiel an, das Ihnen das Verständnis erleichtert.

<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">

Hier schwebt das Bild des Autos auf der rechten Seite des Textes.

<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">

Hier schwebt das Bild des Autos auf der linken Seite des Textes.

Attribute des Bild-Tags

Im Folgenden sind die Attribute eines Bild-Tags aufgeführt.

1) Ausrichten

Mögliche Werte: Oben, Unten, Mitte, Links oder Rechts.

Das alight-Attribut wird verwendet, um die Ausrichtung eines Bildes auf der Webseite anzugeben.

2) Alt

Werttyp:Text

Alt wird verwendet, um den alternativen Text eines Webseitenbilds anzugeben. In Fällen, in denen die Anzeige eines IMG nicht möglich ist, zeigt der Browser dem Benutzer diesen Text an. Suchmaschinen wie Google und Bing verwenden diesen Alternativtext, um Ergebnisse in der Bildersuche anzuzeigen.

3) Rand

Werttyp:Pixel

Es wird verwendet, um einen Rand mit benutzerdefinierter Dicke um das Bild herum zu erstellen. Es funktioniert nicht in HTML5.

4) Cross-Origin

Werttyp:Anmeldeinformationen für anonyme Nutzung

Dieses Attribut wird verwendet, wenn wir angeben möchten, wie mit herkunftsübergreifenden Fotos umgegangen werden soll. Dies wird hauptsächlich in Fällen verwendet, in denen Canvas-Elemente von JavaScript-Webanwendungen verwendet werden.

5) Größe

Werttyp:Prozentsätze oder Pixel

Dieser wird verwendet, um die Höhe des Bildes auf der HTML-Webseite anzugeben.

6) hspace

Werttyp:Pixel

Das in HTML5 nicht unterstützte hspace-Attribut wird verwendet, um in Pixel anzugeben, wie viel Leerraum links und rechts vom eingefügten Bild hinzugefügt werden soll.

7) ismap

Werttyp:URL einer Seite

ismap haben wir verwendet, um das besagte Bild als serverseitige Bildkarte zu definieren. Wenn der Benutzer in das Bild klickt (oder tippt), senden die Browser die Klick- (oder Tipp-)Koordinaten als URL an den Webserver.

8) Longdesc

Werttyp:URL

Longdesc gibt eine detaillierte Beschreibung eines Bildes mithilfe einer URL. Die URL im Attribut wird als Beschreibung des Bildes verwendet.

9) src

Werttyp:URL

src steht für Quelle. Es wird verwendet, um die Adresse anzugeben, von der der Browser das Bild abruft. Diese URL kann auf ein Bild in einem Verzeichnis auf demselben Server angewendet werden. Es kann auch ein Bild auf einem Server eines Drittanbieters mit einem anderen Domänennamen speichern.

10) Usemap

Werttyp: #mapname

Das usemap-Attribut definiert das Bild für eine clientseitige Imagemap. Eine Usemap wird immer mit Karten- und Gebiets-HTML-Tags verwendet.

11) vspace

Werttyp:Pixel

Das in HTML5 nicht unterstützte Vspace-Attribut wird verwendet, um die Anzahl der Pixel festzulegen, die als Leerzeichen oben und unten im Bild auf der Webseite verwendet werden.

12) Breite

Werttyp:Pixel

Wie der Name schon sagt, wird das width-Attribut verwendet, um die Breite eines Bildes innerhalb der HTML-Webseite anzugeben.

Fazit – HTML-Bild-Tags

Nachdem wir uns nun angeschaut haben, wie Bilder zu HTML-Seiten hinzugefügt werden und wie ihre Attribute festgelegt werden, können wir in einem Webprojekt attraktiv aussehende Webseiten erstellen.

Bilder verleihen einer Webseite nicht nur visuelles Flair, sondern sind auch deshalb wertvoll, weil sie bei der Suchmaschinenoptimierung helfen. Das Hinzufügen geeigneter Alt-Tags und Beschreibungen zu Bildern hilft Suchmaschinen, den Inhalt einer Webseite besser zu verstehen und verbessert in vielen Fällen das Ranking einer Webseite.

Das obige ist der detaillierte Inhalt vonHTML-Bild-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:HTML-Objekt-TagNächster Artikel:HTML-Objekt-Tag