Grundlegendes HTML-Verzeichnisproblem (Unterschied zwischen relativem und absolutem Pfad)

Grundlegendes HTML-Verzeichnisproblem (Unterschied zwischen relativem und absolutem Pfad)
Relativer Pfad – ein Verzeichnispfad, der basierend auf dem Speicherort der Webseite erstellt wird, die auf die Datei verweist. Wenn in unterschiedlichen Verzeichnissen gespeicherte Webseiten auf dieselbe Datei verweisen, sind die verwendeten Pfade daher unterschiedlich und werden als relativ bezeichnet.
Absoluter Pfad – ein Verzeichnispfad basierend auf dem Stammverzeichnis der Website. Er wird als absolut bezeichnet, da der verwendete Pfad derselbe ist, wenn alle Webseiten auf dieselbe Datei verweisen.
Tatsächlich besteht der Unterschied zwischen einem absoluten Pfad und einem relativen Pfad lediglich darin, dass bei der Beschreibung des Verzeichnispfads unterschiedliche Referenzpunkte verwendet werden. Da das Stammverzeichnis derselbe Referenzpunkt für alle Dateien auf der Website ist, wird die Pfadbeschreibungsmethode, die das Stammverzeichnis als Referenzpunkt verwendet, als absoluter Pfad bezeichnet.
Nachfolgend sind einige spezielle Symbole aufgeführt, die zum Festlegen von Pfaden verwendet werden, sowie deren Bedeutung.
"." – steht für das aktuelle Verzeichnis.
„..“ – steht für das übergeordnete Verzeichnis.
"/" – steht für das Stammverzeichnis.
Als nächstes gehen wir davon aus, dass die vom Reader erstellte Website den in der folgenden Abbildung gezeigten Verzeichnispfad hat.

Wenn Sie in der Datei Ref.htm auf die Datei BeRef.gif verweisen möchten, lautet der relative Pfad wie folgt:

./SubDir2/BeRef.gif

Im obigen Referenzpfad stellt „.“ das aktuelle Verzeichnis (Dir1) dar, sodass „./SubDir2“ SubDir2 im aktuellen Verzeichnis darstellt. Tatsächlich können Sie "./" auch weglassen und diese Methode direkt zum Zitieren verwenden.

SubDir2/BeRef.gif

Wenn Sie zur Referenzierung der Datei einen absoluten Pfad mit dem Stammverzeichnis als Bezugspunkt verwenden, lautet der Referenzpfad wie folgt:

/Dir1/SubDir2/BeRef.gif

Wenn die Verzeichnisstruktur der Website wie unten dargestellt ist

Was ist mit dem relativen Pfad der Datei BeRef.gif?

Wenn Sie in der Datei Ref.htm auf die Datei BeRef.gif verweisen möchten, lautet der relative Pfad wie folgt:

../SubDir2/BeRef.gif

Im obigen Referenzpfad steht „..“ für das übergeordnete Verzeichnis, sodass „/Dir2“ das Unterverzeichnis Dir2 unter dem übergeordneten Verzeichnis darstellt. Wenn ein absoluter Pfad als Referenz verwendet wird, lautet der Referenzpfad wie folgt:

/Dir2/BeRer.gif

Nehmen wir ein komplizierteres Beispiel, um die Verwendung von relativen und absoluten Pfaden zu vergleichen. Nehmen Sie an, dass die von Ihnen erstellte Website den Verzeichnispfad hat, wie in der folgenden Abbildung dargestellt.


Wir verwenden eine Tabelle, um den relativen und absoluten Pfad zu veranschaulichen, der verwendet werden sollte, wenn in der obigen Situation eine Datei auf eine andere Datei verweist.

Zitiert von
Zitiert von
Relativer Pfad
Absoluter Pfad
Ref1.htm BeRef1.gif ../SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif
Ref2.htm BeRef1.gif ../../Dir1/SubDir2/ BeRef1.gif /Dir1/SubDir2/ BeRef1.gif
Ref1.htm BeRef2.htm ../../Dir2/ BeRef2.htm /Dir2/BeRef2.htm
Ref2.htm BeRef2.htm ../BeRef2.htm /Dir2/BeRef2.htm

Was in der obigen Tabelle erklärt werden muss, ist die Bedeutung von „../../“.

„..“ steht für das übergeordnete Verzeichnis und „../../“ steht für das übergeordnete Verzeichnis des übergeordneten Verzeichnisses. Wie aus der obigen Tabelle ersichtlich ist, ist es daher praktischer, einen relativen Pfad zu verwenden, wenn die referenzierte Datei in einem Unterverzeichnis des aktuellen Verzeichnisses oder in einem anderen Unterverzeichnis des übergeordneten Verzeichnisses vorhanden ist. Wenn nicht, verwenden Sie einfach den absoluten Pfad, das ist bequemer. Aus der obigen Tabelle können wir auch erkennen, dass beim Verweisen auf dieselbe Datei der absolute Pfad, der zum Verweisen auf die Datei verwendet wird, derselbe ist.

<<:  Beispiele für die Verwendung der MySQL-EXPLAIN-Anweisung

>>:  Detaillierte Anwendungsfälle von Vue3 Teleport

Artikel empfehlen

Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben

Technik-Fan html-Webseite, müssen Sie wissen Von ...

Detaillierte Konfiguration von Nginx, das sowohl Http als auch Https unterstützt

Heutzutage gehört die Unterstützung von HTTPS für...

Webdesign: Wenn der Titel nicht vollständig angezeigt werden kann

<br />Ich habe mir heute die neu gestaltete ...

Detaillierte Erklärung des JavaScript-Stacks und der Kopie

Inhaltsverzeichnis 1. Definition des Stapels 2. J...

Vue implementiert Drag & Drop oder Klicken zum Hochladen von Bildern

In diesem Artikel wird der spezifische Code von V...

Schritte zum Erstellen eines Dateiservers mit Apache unter Linux

1. Über den Dateiserver Wenn Sie in einem Projekt...

Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden

Lassen Sie mich zunächst eine interessante Eigens...

Einführung in die MySQL-Ansicht und Tutorial zur grundlegenden Bedienung

Vorwort Ansicht ist ein sehr nützliches Datenbank...

Zusammenfassung der Möglichkeiten zur Implementierung von Single Sign-On in Vue

Das Projekt wurde vor Kurzem ausgesetzt und die U...

Detaillierte Erklärung der MySQL Master-Slave-Inkonsistenz und Lösungen

1. MySQL Master-Slave-Asynchronität 1.1 Netzwerkv...

So ändern Sie die Ubuntu-Quellliste (Quellliste) - detaillierte Erklärung

Einführung Die Standardquelle von Ubuntu ist kein...