So führen Sie Bilder in HTML ein (zwei Methoden)

HTML (Hypertext Markup Language) ist eine der Grundsprachen von Webseiten, egal ob Sie eine statische oder eine dynamische Seite erstellen, HTML ist ein unverzichtbarer Bestandteil. Bilder sind eines der sehr wichtigen und am häufigsten verwendeten Elemente beim Erstellen von Webseiten. Daher müssen wir wissen, wie man Bilder in HTML einfügt.

HTML kann mehrere Arten von Bildern einführen, z. B. GIF, JPEG, PNG und andere Formate. Bevor wir Bilder einführen, müssen wir einen Bildordner für das HTML-Dokument erstellen, um alle Bilddateien zu speichern. Normalerweise wird der Bildordner im selben Verzeichnis wie die HTML-Datei abgelegt, damit die HTML-Datei problemlos darauf zugreifen kann.

In HTML können wir die folgenden zwei Methoden verwenden, um Bilder in Webseiten zu referenzieren.

1. Bilder in -Tags verwenden

Die häufigste Methode ist die Verwendung des img-Tags (Bild) in HTML-Dokumenten. Es ist sehr einfach und benutzerfreundlich. Das Folgende ist die grundlegende Syntax des Tags:

<img src="image filename">

Darunter wird das src-Attribut verwendet, um dem Browser mitzuteilen, woher das Bild geladen werden soll, und Bilddateiname ist der Name der Bilddatei (beachten Sie, dass der relative Pfad sein sollte hier angegeben, nicht der absolute Pfad).

Wenn sich beispielsweise unser Bildordner und unsere HTML-Datei im selben Verzeichnis befinden und wir ein Bild mit dem Namen „example.gif“ in eine Webseite einfügen möchten, sieht der Code so aus:

<img src="example.gif">

Das wird in sein Auf der Seite wird ein Bild mit dem Namen „example.gif“ angezeigt.

Wenn wir dem Bild weitere Attribute hinzufügen möchten, z. B. die Verknüpfung mit anderen Webseiten ermöglichen, Titel hinzufügen, Breite und Höhe ändern usw., können wir die folgenden Tags verwenden:

<img src="image filename" alt="Image title" title="Image tooltip" height="number" width="number" border="number" align="left/right/center">

Dazu gehört das Alt-Attribut wird zum Hinzufügen des Bildnamens verwendet. Er wird angezeigt, wenn das Bild nicht angezeigt werden kann. Mit den Attributen „Höhe“ und „Breite“ wird die Größe des Bildes hinzugefügt Rahmenbreite; das Attribut align wird verwendet, um die Ausrichtung des Bildes mit anderem Text zu steuern.

Wenn wir beispielsweise ein Bild mit einer Breite von 200 Pixeln und einer Höhe von 100 Pixeln hinzufügen und es mit einer anderen Seite verknüpfen wollten, würde der Code so aussehen:

<a href="https://www.example.com/"><img src="example.gif" alt="Example Image" title="Click this image to go to example.com" height="100" width="200" border="1" align="center"></a>

2. Mit CSS das Bild erstellen der Hintergrund

Mit CSS (Cascading Style Sheets), einer weiteren gängigen Methode, können wir auch Bilder in den Hintergrund von Webseiten einfügen. Im Gegensatz zum -Tag verwendet diese Methode das Bild als Hintergrund der gesamten Webseite und nicht als separates Element.

So fügen Sie mithilfe von CSS ein Bild im Hintergrund hinzu:

body {
    background-image: url('image filename');
}

Unter anderem wird das Attribut „Hintergrundbild“ verwendet, um dem Browser mitzuteilen, welches Bild im Hintergrund angezeigt werden soll. Es kann auch andere Optionen haben , wie z. B. das Festlegen der Hintergrundfarbe und der Kachelmethoden usw.

Wenn wir beispielsweise ein Bild mit dem Namen „example.gif“ im Hintergrund einer Webseite anzeigen und es horizontal und vertikal wiederholen möchten, würde der Code so aussehen:

body {
    background-image: url('example.gif');
    background-repeat: repeat;
}

Dies würde den Hintergrund von erstellen Die gesamte Seite wird mit dem Bild „example.gif“ gefüllt.

Bei dieser Methode müssen wir besonders auf die Größe der Bilder achten, um sicherzustellen, dass sie auf verschiedenen Gerätetypen korrekt angezeigt werden.

Zusammenfassung

Ganz gleich, ob Sie Bilder im -Tag verwenden oder Bilder mithilfe von CSS in den Hintergrund einfügen, HTML bietet verschiedene Möglichkeiten, Bilder einzuführen. Bei der Verwendung dieser Methoden müssen wir auf Größe, Pfad und Format der Bilder achten, um sicherzustellen, dass sie korrekt auf der Webseite angezeigt werden können. Durch die Verwendung von Bildern in HTML können wir Webseiten ganz einfach personalisierte Elemente hinzufügen und sie so reichhaltiger und attraktiver machen.

Das obige ist der detaillierte Inhalt vonSo führen Sie Bilder in HTML ein (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!