Nach dem Kopieren einiger Grafik- und Bildspezialeffektcodes von einigen Websites treten immer Probleme auf, z. B. dass die Bilder nicht angezeigt werden. Hier ist ein entsprechendes Tutorial, das speziell für diese Anfänger geschrieben wurde! Lassen Sie mich die Anwendung von Bildern in Webseiten, also die Verwendung von Bild-Tags in Webseiten, für Sie zusammenfassen!
1) Übersicht über Bildmarkierungen.
Wenn eine Webseite nur Text, aber keine Bilder enthält, verliert sie viel an Lebendigkeit. Bilder sind ein sehr wichtiger Aspekt bei der Webseitenerstellung. HTML Professional stellt das <IMG>-Tag zur Verfügung, um Bilder auf der Webseite auszugeben. Dieses Tag verfügt über die Attribute SRC, ALT, ALIGN, BORDER, WIDTH und HEIGHT.
2) Einführung in Attribute.
SRC-Attribut. Für das <IMG>-Tag ist das SRC-Attribut ein notwendiges Attribut, das heißt, SRC muss im <IMG>-Tag ein Wert zugewiesen werden und ist ein unverzichtbarer Bestandteil des Tags. Zu diesem Zeitpunkt sollte IMG im folgenden Format geschrieben sein:
Das Folgende ist ein Zitatfragment:
<IMG SRC="Parameterwert">
Der Parameterwert ist unter anderem der vollständige Dateiname und der Pfad des Bildes.
Wir wissen, dass Bilddateien im Allgemeinen viel mehr Platz beanspruchen als reine Textdateien wie HTML-Dokumente und dass Webdesign häufig das Hinzufügen vieler Bilder erfordert, um die Attraktivität zu erhöhen. Wenn diese Bilddateien dem HTML-Dokument hinzugefügt werden, wird das HTML-Dokument sehr groß . Groß, die Übertragung im Netzwerk wird zwangsläufig sehr langsam sein.
Das <IMG>-Tag fügt das Bild nicht wirklich zum HTML-Dokument hinzu, sondern teilt HTML mit: Um welche Bilddatei handelt es sich? Wo? Damit HTML es vom ursprünglichen Speicherort der Bilddatei aufrufen kann. Die Funktion des SRC-Attributs besteht darin, diese beiden Fragen zu beantworten. Daher muss der Parameterwert des SRC-Attributs den vollständigen Dateinamen der Bilddatei enthalten, dh den Dateinamen und die Erweiterung, z. B. logo.gif, die die Frage beantwortet Frage, um welche Bilddatei es sich handelt; Der Parameterwert muss auch den Pfad zur Bilddatei enthalten, damit HTML weiß, wo die Bilddatei zu finden ist. Unter den Parameterwerten des SRC-Attributs ist das Schreiben des Pfads der Bilddatei für Anfänger oft ein Problem.
Der Pfad zur Bilddatei kann ein relativer Pfad oder eine URL sein. Der sogenannte relative Pfad bezieht sich auf den Pfad, der sich aus der relativen Position der Datei, die im aktuellen HTML-Dokument verlinkt oder eingebettet werden soll, und der aktuellen HTML-Datei ergibt. Wenn sich die HTML-Datei und die Bilddatei (vorausgesetzt, der Name lautet logo.gif) im selben Verzeichnis befinden, können Sie den Code als <IMG SRC="logo.gif"> schreiben, wenn die Bilddatei in einem Verzeichnis abgelegt wird Die aktuelle HTML-Datei befindet sich im Unterverzeichnis (vorausgesetzt, das Unterverzeichnis heißt „images“). Der Code sollte <IMG SRC="images/logo.gif"> lauten Wenn sich die Datei befindet (vorausgesetzt, das obere Verzeichnis trägt den Namen home), muss der relative Pfad eine Quasi-URL sein, d. h. „../“ wird verwendet, um die Website des Entwicklers darzustellen, gefolgt vom Pfad der Bilddatei auf der Website des Entwicklers . Angenommen, dass „home“ ein Verzeichnis unter dieser Website ist, sollte der Code „<IMG SRC=“../home/logo.gif“> sein. Wenn „home“ ein Unterverzeichnis unter dem Verzeichnis „king“ unter der Website ist, sollte der Code lauten geschrieben ist <IMG SRC="../king/home/logo.gif">.
Andere Attribute. Die Attribute ALT, ALIGN, BORDER, WIDTH und HEIGHT des <IMG>-Tags sind optional. Das ALIGN-Attribut ist die Ausrichtung des Bildes und die Parameterwerte sind links, zentriert und rechts. BORDER ist der Rand des Bildes. Sein Parameter ist größer oder gleich 0 und die Standardeinheit ist Pixel. Die Attribute WIDTH und HEIGHT sind die Breite und Höhe des Bildes, und die Standardeinheit seiner Parameter ist Pixel; das ALT-Attribut ist der Text, der angezeigt wird, wenn die Maus über das Bild bewegt wird Attribut beim Erstellen von Webseiten. Was ist der Zweck davon? Es kann einen Hinweistext anzeigen, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann, was die Benutzerfreundlichkeit erhöht.