Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)

寻∝梦
Freigeben: 2018-08-27 19:08:15
Original
48892 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich das src-Attribut des img-Tags in HTML und einige seiner Definitionen vorgestellt. Anweisungen zur Verwendung des HTML-Attributs img src und einige Beispiele. Werfen wir als nächstes einen Blick darauf.

Werfen wir zunächst einen Blick auf die Definition des img-Tags:

Bilder sind auch das häufigste HTML-Element in Webseiten und sehr wichtig Teil. In HTML-Webseiten werden Bilder durch Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)-Tags definiert. Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang) ist ein leeres HTML-Tag oder ein einzelnes Tag. Es enthält nur Attribute und keine schließenden Tags.

Definition des src-Attributs des img-Tags:

Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang) Sein Wert ist die URL der Bilddatei, also der absolute oder relative Pfad zu der Datei, die auf das Bild verweist.

Tipp: Um die Dokumentenspeicherung zu organisieren, speichern Ersteller Bilddateien häufig in einem separaten Ordner und benennen diese Verzeichnisse normalerweise etwa „Bilder“ oder „Bilder“. Im W3School-Online-Tutorial speichern unsere Ingenieure die meisten häufig verwendeten Bilder in einem Ordner mit dem Namen „i“. „i“ ist die Abkürzung für „images“. Dies hat den Vorteil, dass der Pfad dadurch weitestgehend vereinfacht werden kann. .

Das src-Attribut ist die Adresse des importierten Bildes. Ohne es wäre das Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)-Tag bedeutungslos.

Das Format des src-Attributs des HTML-img-Tags:

<img src="图片地址" alt="图片描述">
Nach dem Login kopieren

Beschreibung: Bildadresse: Der Speicherort des Bildes: Eine Beschreibung von Die Bedeutung des Bildes. Wenn das Bild nicht angezeigt werden kann, wird die Beschreibung angezeigt.

Anweisungen zur Verwendung des src-Attributs des HTML-img-Tags:

Geben Sie dem src-Attribut direkt die Adresse einer serverseitigen Ressource, und die img-Steuerung wird dies automatisch tun Erhalten und analysieren Sie die Ressource.

Bilder und HTML-Text befinden sich im selben Verzeichnis: zum Beispiel index.html und img.jpg

Schreiben: Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)

Bild nicht im selben Verzeichnis wie HTML: Es gibt zwei Situationen:

1. Das Bild img.jpg befindet sich im Ordner images und die Ordner index.html und images befinden sich im selben Verzeichnis

So schreiben Sie:Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)

2. Das Bild img.jpg befindet sich im Ordner images, index.html befindet sich im Controller-Ordner und Die Bilder- und Controller-Ordner befinden sich im selben Ordner

im Verzeichnis wird geschrieben als: Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)

Wenn die Quelle kommt aus dem Internet muss der absolute Pfad verwendet werden

Schreiben: Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)

Falls vorhanden Ist kein Bild vorhanden, zeigt der Browser den Text stattdessen im Alt-Format an.

<img src="lib/img/imgDef.png" alt="暂无图片" />
Nach dem Login kopieren

So verwenden Sie den Bildpfad des src-Attributs in img:

1.HTML-Datei und *.jpg-Datei (f-Laufwerk). ) In verschiedenen Verzeichnissen:

<img  src="file:///f:/*jpg"    style="max-width:90%"  style="max-width:90%"/ alt="Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)" >
Nach dem Login kopieren

2.html-Dateien und *.jpg-Bilder im selben Verzeichnis:

<img  src=".jpg"    style="max-width:90%"  style="max-width:90%"/ alt="Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)" >;
Nach dem Login kopieren

3.html-Dateien und *.jpg-Bilder in verschiedenen Verzeichnissen:

a. Das Bild *.jpg befindet sich im Bildordner, *html befindet sich im selben Verzeichnis wie das Bild:

<img  src="image/*jpg/"   style="max-width:90%"  style="max-width:90%"/ alt="Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)" >
Nach dem Login kopieren

b. Das Bild *jpg befindet sich im Bildordner, *html befindet sich im Verzeichnis Ordner, Das Bild und die Verbindung befinden sich im selben Verzeichnis:

<img  src="../image/*jpg/"   style="max-width:90%"  style="max-width:90%"/ alt="Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)" >
Nach dem Login kopieren

4. Wenn das Bild aus dem Internet kommt, dann schreiben Sie den absoluten Pfad:

<img  src="http://image.php.cn/pcindexhot"/   style="max-width:90%"  style="max-width:90%"/ alt="Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)" >
Nach dem Login kopieren

Attribute des src-Attributs des HTML-img-Tags:

Wozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang)

[Empfehlung des Herausgebers]

Was über den Header-Inhalt in der HTML-Tabelle Zentriert? Eine detaillierte Einführung in das align-Attribut des Header-Tags

html Warum können P-Tags keine Divs verschachteln? Es gibt auch Beispiele für CSS-Stile für HTML-P-Tags

Das obige ist der detaillierte Inhalt vonWozu dient das src-Attribut des HTML-img-Tags? Analyse spezifischer Nutzungsmethoden (Beispiele im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage