So fügen Sie Bilder zu HTML hinzu

HTML ist eine Auszeichnungssprache, die zum Erstellen von Text, Bildern, Videos und anderen Inhalten auf Webseiten verwendet wird. Bilder sind eines der wesentlichen Elemente bei der Webseitenerstellung. Das richtige Einfügen von Bildern ist eine Fähigkeit, die jeder Webseitenersteller beherrschen muss.

1. Grundlegende Syntax

Verwenden Sie das img-Tag, um Bilder in HTML einzufügen. Der vollständige Name von img ist „image“, was Bild bedeutet. Das Folgende ist die grundlegende Syntax des img-Tags:

<img src="图片文件路径" alt="图片描述">

Das img-Tag hat zwei Hauptattribute: src und alt. src bezieht sich auf den Pfad der Bilddatei und alt auf die Textbeschreibung, die angezeigt wird, wenn die Seite das Bild nicht normal anzeigen kann.

Unter diesen muss das src-Attribut ausgefüllt werden, während das alt-Attribut optional ist. Wenn der Bildpfad falsch ist, wird das Bild nicht angezeigt. Wenn das Alt-Attribut nicht festgelegt ist, wird möglicherweise eine Zeichenfolge mit bedeutungslosem Text auf der Seite angezeigt, auf der das Bild nicht normal angezeigt werden kann.

Der Bildpfad kann ein lokaler Pfad oder ein Netzwerkpfad sein. Der lokale Pfad bezieht sich auf den Pfad der Bilddatei, die auf dem lokalen Computer gespeichert ist. Der Netzwerkpfad bezieht sich auf den Pfad der Bilddatei, auf die über das Netzwerk zugegriffen wird, beispielsweise aus dem Internet heruntergeladene Bilder.

2. Der Pfad lokaler Bilder

Die Pfade lokaler Bilder sind in absolute Pfade und relative Pfade unterteilt. Der absolute Pfad gibt den Speicherort des Bildes im gesamten Dateisystem an, und Sie müssen den vollständigen Pfad schreiben. Der relative Pfad ist die Pfadbeschreibung, beginnend mit der HTML-Datei, und Sie müssen nur den Speicherort des Bildes relativ zu schreiben die HTML-Datei.

Im Folgenden finden Sie zwei Möglichkeiten zum Schreiben lokaler Bildpfade.

1. Absoluter Pfad

Der absolute Pfad bezieht sich auf den Speicherort des Bildes im gesamten Dateisystem. Je nach Betriebssystem unterscheidet sich der absolute Pfad geringfügig. In Windows-Systemen beginnen absolute Pfade mit dem Laufwerksbuchstaben, zum Beispiel:

C:\Users\Administrator\Pictures\test.jpg

In Mac OS Der Dateipfad. Wenn sich der Speicherort der Datei ändert, muss der Code geändert werden.

2. Der relative Pfad bezieht sich auf die Position des Bildes relativ zur HTML-Datei. Je einfacher die Verzeichnisstruktur, desto einfacher ist die Verwendung relativer Pfade. In einer HTML-Datei stellt „.“ das Verzeichnis dar, in dem sich die aktuelle Datei befindet, und „..“ stellt das Verzeichnis oberhalb des Verzeichnisses dar, in dem sich die aktuelle Datei befindet, relativ Es können Pfade verwendet werden, zum Beispiel:

/Users/username/Documents/test.jpg

Wenn das Bild im Bilderordner in dem Verzeichnis gespeichert ist, in dem sich die HTML-Datei befindet, lautet der Pfad „./images/test.jpg“.

3. Internetbilder

Internetbilder beziehen sich auf Bilder, die aus dem Internet stammen. In HTML können Sie das img-Tag verwenden, um Netzwerkbilder genauso wie lokale Bilder einzufügen.

Netzwerkbilder werden normalerweise durch eine URL (Uniform Resource Locator) dargestellt, eine Zeichenfolge bestehend aus Protokollname, Hostname, Dateipfad und Dateiname. Die URL für den Zugriff auf Baidu-Bilder lautet beispielsweise:

<img src="./images/test.jpg" alt="测试图片">

Darunter ist „https://“ der Protokollname, der angibt, dass das HTTPS-Protokoll für die Datenübertragung verwendet wird; „www.baidu.com“ ist der Hostname ; "img/bd_logo1.png" Dies ist der Dateipfad und der Dateiname.

Beim Hinzufügen von Netzwerkbildern kopieren Sie einfach die URL des Netzwerkbildes in das src-Attribut des img-Tags, zum Beispiel:

https://www.baidu.com/img/bd_logo1.png

Internetbilder sind bequemer, machen Sie sich keine Sorgen über das Pfadproblem, solange die URL vorhanden ist des Bildes ist in Ordnung, Sie können es verwenden. Das img-Tag fügt Bilder direkt in HTML ein.

4. Bildanpassung

Bei der Erstellung von Webseiten besteht eine häufige Anforderung darin, die Bildgröße anzupassen, damit sie auf verschiedenen Geräten und Bildschirmen bessere Anzeigeeffekte erzielen kann. Zu den häufig verwendeten Methoden gehört die Verwendung von CSS zum Festlegen von Attributen wie Breite, Höhe und maximale Breite.

1. Die Breiten- und Höhenattribute in CSS können die Breite bzw. Höhe des Bildes festlegen, zum Beispiel:

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

Unter diesen bedeutet das Festlegen der Breite auf 100 %, dass die Breite Die Größe des Bildes vergrößert sich mit dem verfügbaren Platz. Wenn Sie die Höhe auf „Auto“ setzen, wird die Höhe automatisch an die Proportionen der Breite angepasst, wobei die ursprünglichen Proportionen erhalten bleiben.

2. Durch die Verwendung des Attributs „max-width“ kann das Bild automatisch proportional verkleinert werden, wenn es eine bestimmte Breite überschreitet, es wird jedoch nicht kleiner als seine Originalgröße. Zum Beispiel:

<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

Unter diesen ist max-width auf 100 % eingestellt, was bedeutet, dass die maximale Breite des Bildes den verfügbaren Platz nicht überschreitet und die Originalgröße nicht überschritten wird Die Höhe wird automatisch entsprechend dem Verhältnis zur Breite angepasst, wobei das ursprüngliche Verhältnis erhalten bleibt.

Kurz gesagt, wenn Sie Bilder zu Webseiten hinzufügen, müssen Sie den Bildpfad, die Bildbeschreibung, die Bildgröße und -anpassung usw. berücksichtigen. Solange Sie die grundlegende Syntax und gängige Methoden beherrschen, können Sie das img-Tag in HTML flexibel verwenden, um die Webseite bunter zu gestalten.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Bilder zu HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!