Heim > Artikel > Web-Frontend > HTML-Bild-Tags
HTML-Bild-Tags
- WBOYOriginal
- 2024-09-04 16:20:161310Durchsuche
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:
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!