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

Detaillierte Analyse der Verwendungs- und Anwendungsszenarien von Slots in Vue

Was sind Slots? Wir wissen, dass in Vue nichts in...

HTML+CSS zum Erstellen eines Dropdown-Menüs

1. Beispiel einer Dropdown-Liste Der Code lautet ...

Schnelle und sichere Methode zum Umbenennen einer MySQL-Datenbank (3 Arten)

Inhaltsverzeichnis So benennen Sie eine MySQL-Dat...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 winx64

In diesem Artikel wird die Installations- und Kon...

JavaScript-Selektorfunktionen querySelector und querySelectorAll

Inhaltsverzeichnis 1. querySelector fragt ein ein...

Best Practices zum Teilen von React-Code

Wenn ein Projekt eine gewisse Komplexität erreich...

Einführung in Spark und Vergleich mit Hadoop

Inhaltsverzeichnis 1. Spark vs. Hadoop 1.1 Nachte...