Apropos Bilder: Ich glaube, jeder kennt sie, denn in unserem täglichen Leben und Gebrauch können wir Bilder immer sehen, und Bilder sind ausdrucksvoller und ansprechender als Worte, wenn wir sie richtig verwenden, können wir Menschen zur Webseite machen ist schöner und intuitiver, vor allem der erste Blick auf die Webseite ist sehr wichtig.
1. src-Attribut
Symbol: Bild
Merkmale: Einzeletikett
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML-Bild einfügen</title></head><body><p>Anzuzeigendes Bild:</p><imgsrc=fish .jpg></body></html>
Zusammenfassung: Das Einfügen des Bildes kann durch Einfügen des src-Attributnamens in das img-Tag abgeschlossen werden, wobei der Attributwert von src „Dateiname“ oder „Pfad./Dateiname“ ist. Hinweis: Das einzufügende Bild muss im enthalten sein gleiche Datei wie das HTML-Projekt Caught! In diesem Abschnitt finden Sie wichtige Erläuterungen.
2. Andere Attribute
3. Alt-Nutzung
Beschreibung: Wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann, wird der Attributwert angezeigt, der dem Alt-Attribut entspricht.
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML-Bild einfügen</title></head><body><p>Anzuzeigendes Bild:</p><imgsrc=potato .jpgwidth=500alt=Potato></body></html>
Unten dargestellt:
4. Titelverwendung
Hinweis: Wenn das Bild normal angezeigt wird und Sie mit der Maus über das Bild fahren, wird der Inhalt angezeigt, der dem Attributwert des Titelattributs entspricht.
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML-Bild einfügen</title></head><body><p>Anzuzeigendes Bild:</p><imgsrc=fish .jpgwidth=500alt=fish title=Dies ist ein gekochter Fisch></body></html>
Wirkung: Wenn das Bild normal angezeigt werden kann und Sie mit der Maus über das Bild fahren, werden die Worte „Dies ist ein gekochter Fisch“ angezeigt.
Wird wie gezeigt angezeigt:
5. Attributmerkmale
Die Attributeigenschaften von Bild-Tags gelten für die meisten HTML-Tags:
1. Die Attribute des Tags werden in das Start-Tag geschrieben.
2. Im Tag können mehrere Attribute gleichzeitig vorhanden sein
3. Trennen Sie Attribute durch Leerzeichen.
4. Tag-Namen und Attribute müssen durch Leerzeichen getrennt werden.
5. Es gibt keine Reihenfolge zwischen den Attributen.
6. Pfaderklärung und ebenenübergreifendes Einfügen von Bildern
(1) Pfadeinführung
1. Absoluter Pfad
Die absolute Position unter dem Verzeichnis kann direkt zum Zielspeicherort führen und bezieht sich normalerweise auf den Pfad, der mit dem Laufwerksbuchstaben oder der vollständigen URL beginnt. Beim Einfügen von HTML-Bildern werden im Allgemeinen keine absoluten Pfade verwendet, sondern eher relative Pfade.
2. Relativer Pfad
Der Prozess, die Zieldatei ausgehend von der aktuellen Datei zu finden, wird häufig verwendet.
(2) Bilder über Ebenen hinweg einfügen
1. Gleiches Niveau
Wenn sich das einzufügende Bild auf derselben Ebene wie die erstellte HTML-Datei befindet, kann es direkt eingefügt werden. Der Attributwert von src ist „Zieldateiname. Suffix“ oder „./Zieldateiname. Suffix“. Wenn Sie den Compiler zum Codieren verwenden und den ersten Buchstaben des Dateinamens derselben Ebene eingeben, springt der Compiler häufig automatisch aus dem Rest des Inhalts heraus.
Codeanzeige: (vorausgesetzt, das Bild heißt Bild und liegt im JPG-Format vor)
<imgsrc=picture.jpg> oder <imgsrc=./picture.jpg>
2. Untergeordnet
Wenn sich die HTML-Datei auf derselben Ebene wie der Dateiordner befindet und sich das einzufügende Bild im Dateiordner befindet, handelt es sich beim Einfügen des Bildes in die HTML-Datei um einen ebenenübergreifenden Bildzugriffsvorgang. Der Code lautet wie folgt:
<imgsrc=file/picture.jpg>
3. Überlegen
Wenn sich im Ordner „total“ und im Ordner „test“ ein Bild befindet und sich die HTML-Datei im Testordner befindet, gehört das Einfügen des Bildes in die HTML-Datei zum Zugriff auf den übergeordneten Ordner. Der Code lautet wie folgt:
<imgsrc=../picture.jpg>
Wenn Sie auf die Bilder in den oberen zwei Ebenenordnern zugreifen müssen, lautet der Code:
<imgsrc=../../picture.jpg>
4. Umfassende Anwendung
Wenn es zwei Ordner gibt, Datei1 und Datei2, speichert Datei1 die HTML-Datei und Datei2 das einzufügende Bild-Flag im JPG-Format. Dann lautet der Code zum Einfügen des Flag-Bildes in die HTML-Datei wie folgt:
<imgsrc=../file2/flag.jpg>
(Kehren Sie zuerst zum vorherigen Level zurück und besuchen Sie dann das nächste Level.)