Frage zur Webseitenerstellung: Bilddateipfad
|
Dieser Artikel stammt ursprünglich von 123WORDPRESS.COM Lightninger. Sie können diesen Satz beim erneuten Drucken entfernen, aber ändern Sie den Inhalt des Artikels unter keinen Umständen und auf keine Weise, sonst handeln Sie auf eigene Gefahr! Bei Nachdruck bitte Autor und Quelle angeben. Vor langer Zeit bis heute haben mir viele Internetnutzer ähnliche Fragen gestellt. Insbesondere nach dem Kopieren einiger Codes für Spezialeffekte von Grafikbildern von dieser Site treten immer wieder Probleme auf, beispielsweise dass Bilder nicht angezeigt werden. Hier schreibe ich ein relevantes Tutorial speziell für diese Anfänger. Wenn Sie diesbezüglich keine Fragen haben, gehen Sie bitte weg! Was die Anwendung von Bildern in Webseiten, also die Anwendung von Bild-Tags in Webseiten betrifft, möchte ich es im Folgenden für Sie zusammenfassen. 1) Übersicht über die Bildbeschriftung. Wenn eine Webseite nur Text und keine Bilder enthält, scheint sie viel an Vitalität zu verlieren. Bilder sind ein sehr wichtiger Aspekt bei der Erstellung von Webseiten. HTML bietet professionell das <IMG>-Tag, um Bilder auf Webseiten auszugeben. Dieses Tag hat die Attribute SRC, ALT, ALIGN, BORDER, WIDTH und HEIGHT. 2) Einführung in die Attribute. SRC-Attribut. Für das <IMG>-Tag ist sein SRC-Attribut ein notwendiges Attribut, d. h. SRC muss im <IMG>-Tag ein Wert zugewiesen werden und ist ein unverzichtbarer Bestandteil des Tags. Derzeit sollte IMG im folgenden Format geschrieben werden: <IMG SRC="Parameterwert"> Der Parameterwert ist der vollständige Dateiname und Pfad des Bildes. Wir wissen, dass Bilddateien im Allgemeinen viel mehr Platz beanspruchen als reine Textdateien wie HTML-Dokumente, und beim Webdesign müssen oft viele Bilder hinzugefügt werden, um die Attraktivität zu steigern. Wenn diese Bilddateien dem HTML-Dokument hinzugefügt werden, wird das HTML-Dokument sehr groß und die Übertragung über das Netzwerk wird zwangsläufig langsam. Das <IMG>-Tag fügt das Bild nicht tatsächlich dem HTML-Dokument hinzu, sondern teilt HTML mit: Um welche Bilddatei handelt es sich? Wo? Damit geht das HTML zum ursprünglichen Speicherort der Bilddatei, um diese aufzurufen. Die Funktion des SRC-Attributs besteht darin, diese beiden Fragen zu beantworten. Der Parameterwert des SRC-Attributs muss daher den vollständigen Dateinamen der Bilddatei enthalten, also den Dateinamen und die Erweiterung, z. B. logo.gif, was die Frage beantwortet, um welche Bilddatei es sich handelt. Sein Parameterwert muss außerdem den Pfad der Bilddatei enthalten, damit HTML weiß, wo die Bilddatei zu finden ist. Für Anfänger ist es oft ein Problem, den Pfad der Bilddatei in den Parameterwert des SRC-Attributs zu schreiben. Der Pfad zur Bilddatei kann ein relativer Pfad oder eine URL sein. Als sogenannter relativer Pfad bezeichnet man den Pfad, der sich aus der relativen Position der zu verknüpfenden bzw. einzubettenden Datei im aktuellen HTML-Dokument und der aktuellen HTML-Datei ergibt. Wenn sich die HTML-Datei und die Bilddatei (vorausgesetzt, der Name lautet logo.gif) im selben Verzeichnis befinden, kann der Code als <IMG SRC="logo.gif"> geschrieben werden. Wenn die Bilddatei in einem Unterverzeichnis des Verzeichnisses abgelegt wird, in dem sich die aktuelle HTML-Datei befindet (vorausgesetzt, das Unterverzeichnis heißt images), sollte der Code als <IMG SRC="images/logo.gif"> geschrieben werden. Wenn die Bilddatei im übergeordneten Verzeichnis des Verzeichnisses abgelegt wird, in dem sich die aktuelle HTML-Datei befindet (vorausgesetzt, das übergeordnete Verzeichnis heißt home), muss der relative Pfad eine Quasi-URL sein. Verwenden Sie also "../", um die Website des Entwicklers darzustellen, gefolgt vom Pfad der Bilddatei auf der Website des Entwicklers. Angenommen, „home“ ist ein Verzeichnis unter dieser Website, dann sollte der Code wie folgt lauten: <IMG SRC=“../home/logo.gif”>. Wenn „home“ ein Unterverzeichnis unter dem Verzeichnis „king“ unter der Website ist, dann sollte der Code wie folgt geschrieben werden: <IMG SRC=“../king/home/logo.gif”>. Andere Eigenschaften. Die Attribute ALT, ALIGN, BORDER, WIDTH und HEIGHT des <IMG>-Tags sind optional. Das ALIGN-Attribut ist die Ausrichtung des Bildes und seine Parameterwerte sind links, zentriert und rechts; BORDER ist der Rahmen des Bildes und sein Parameter ist größer oder gleich 0 und die Standardeinheit ist Pixel; die WIDTH- und HEIGHT-Attribute sind die Breite und Höhe des Bildes und die Standardeinheit ihrer Parameter ist Pixel; das ALT-Attribut ist der Text, der angezeigt wird, wenn die Maus über das Bild bewegt wird. Hier erinnern wir alle daran, dieses Attribut beim Erstellen von Webseiten zu verwenden. Was ist der Zweck davon? Wenn ein Bild aus irgendeinem Grund nicht angezeigt werden kann, kann ein Hinweistext angezeigt werden, was die Benutzerfreundlichkeit erhöht. |
<<: Starten Sie die auf Docker basierende nginxssl-Konfiguration
>>: Implementierung eines geplanten MySQL-Sicherungsskripts unter Windows
Artikel empfehlen
Detaillierte Erklärung der Single-Choice- und Multiple-Choice-Auswahl im HTML-Select-Tag
Das Auswahlelement erstellt ein Einzelauswahl- ode...
CSS, um horizontale Linien auf beiden Seiten des mittleren Textes zu erreichen
1. Die Eigenschaft „vertical-align“ erzielt folge...
JavaScript zum Erzielen eines Dropdown-Menüeffekts
Verwenden Sie Javascript, um ein Dropdown-Menü zu...
Detaillierte Erklärung zweier Tabellenkopieranweisungen: SELECT INTO und INSERT INTO SELECT (Unterschiede zwischen SQL-Datenbank und Oracle-Datenbank)
1. INSERT INTO SELECT-Anweisung Das Anweisungsfor...
Zwei Möglichkeiten zum Löschen von Floats in HTML
1. Methode 1 zum Löschen von Floating Legen Sie d...
jQuery-Plugin zur Implementierung des Dashboards
Das jQuery-Plug-In implementiert das Dashboard zu...
Analyse des Prozesses zum Veröffentlichen und Bereitstellen von Spring Boot-Anwendungen über Docker
Inhaltsverzeichnis Manuelle Bereitstellung 1. Ers...
Tipps zum MySQL-Abfragecache
Inhaltsverzeichnis Vorwort Einführung in QueryCac...
Vue implementiert Funktionen zum Hoch- und Herunterladen von Dateien
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der MySql-Datentyp-Tutorialbeispiele
Inhaltsverzeichnis 1. Kurzübersicht 2. Detaillier...
Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. 404 Seite 1. Ursach...
Analyse des Prinzips und der Funktion der MySQL-Datenbank-Master-Slave-Replikation
Inhaltsverzeichnis 1. Datenbank-Master-Slave-Klas...
So führen Sie SCSS in ein React-Projekt ein
Laden Sie zuerst die Abhängigkeiten herunter Garn...
So erstellen Sie ein React-Projekt mit Vite
Inhaltsverzeichnis Vorwort Erstellen Sie ein Vite...
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort vergessen?
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort ve...