Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML

Ich beschäftige mich seit über einem Jahr mit Java-Webentwicklung und es ist unvermeidlich, HTML- oder JSP-Seiten zu schreiben. Die leistungsstarke Funktion von Webanwendungen liegt in ihren Hyperlinks (Hyperlink). Beispielsweise speichert Seite A die Linkadresse (d. h. URI), die auf Seite B verweist, aber genau hier liegt das Problem, wie eine Datei korrekt referenziert wird. Wie verweisen Sie beispielsweise in einer HTML-Seite als Hyperlink auf eine andere HTML-Seite? Wie fügt man ein Bild in eine Webseite ein? ......
Darüber hinaus sind relative Pfade in Struts sehr beliebt, sodass es leicht zu Verwirrung kommen kann, wenn Sie nicht aufpassen.

Wenn Sie beim Verweisen auf eine Datei (z. B. beim Hinzufügen eines Hyperlinks oder Einfügen eines Bildes usw.) den falschen Dateipfad verwenden, wird der Verweis ungültig (die verknüpfte Datei kann nicht durchsucht werden oder das eingefügte Bild kann nicht angezeigt werden usw.).

Um diese Fehler zu vermeiden und die Dokumente korrekt zu zitieren, habe ich die Unterschiede und Verwendungen zum späteren Nachschlagen aufgeschrieben.

In HTML gibt es zwei Möglichkeiten, Pfade zu schreiben: relative Pfade und absolute Pfade

Relativer HTML-Pfad
Dateiverweise im selben Verzeichnis. Wenn sich die Quelldatei und die referenzierte Datei im selben Verzeichnis befinden, schreiben Sie einfach den referenzierten Dateinamen.

Wir erstellen jetzt eine Quelldatei info.HTML und referenzieren die Datei index.HTML als Hyperlink in info.HTML.

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\blabla\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<a href = "index.HTML">index.HTML</a>

So geben Sie das übergeordnete Verzeichnis an
../ stellt das übergeordnete Verzeichnis der Quelldatei dar, ../../ stellt das übergeordnete Verzeichnis der Quelldatei dar und so weiter.

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<a href = "../index.HTML">index.HTML</a>

Angenommen, der Pfad von info.HTML lautet: d:\tomcat\webapps\hello\blabla\wowstory\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<a href = "../../index.HTML">index.HTML</a>

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad „index.HTML“ lautet: d:\tomcat\webapps\hello\wowstory\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<a href = "../wowstory/index.HTML">index.HTML</a>

So stellen Sie ein Unterverzeichnis dar <br />Um auf eine Datei in einem Unterverzeichnis zu verweisen, schreiben Sie einfach den Pfad der Unterverzeichnisdatei.

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\blabla\HTML\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<a href = "HTML/index.HTML">index.HTML</a>

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\blabla\HTML\tutorials\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<a href = "HTML/tutorials/index.HTML">index.HTML</a>

Absoluter HTML-Pfad
Der absolute HTML-Pfad bezieht sich auf den vollständigen Pfad der Datei mit dem Domänennamen.

Angenommen, Sie haben den Domänennamen www.jb51.net registriert und einen virtuellen Host beantragt. Der Anbieter des virtuellen Hosts stellt Ihnen ein Verzeichnis wie www zur Verfügung. Dieses www ist das Stammverzeichnis der Website.

Angenommen, im Stammverzeichnis www gibt es eine Datei index.HTML. Der absolute Pfad dieser Datei lautet: https://www.jb51.net/index.html.

Angenommen, im Stammverzeichnis www wird ein Verzeichnis mit dem Namen HTML_tutorials erstellt und dann eine Datei index.HTML in dieses Verzeichnis eingefügt. Der absolute Pfad dieser Datei lautet https://www.jb51.net/article/32759.htm.

<<: Bringen Sie Ihnen bei, wie Sie coole Barcode-Effekte erstellen

>>: Vorteile von MySQL-Abdeckungsindizes

Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?

Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML

Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?

Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur

Analyse des Verwendungsbeispiels für den Common Table Expression CTE in mysql8

Tutorial zum Bereitstellen von JDK und Tomcat auf CentOS7 ohne Schnittstelle

Detaillierte Erläuterung der geplanten Ausführungsaufgaben für MySQL-Datenbankereignisse

CSS erzielt den Effekt der Vermischung zweier Elemente (Sticky-Effekt)

Eine kurze Diskussion über die Lebenszyklusfunktionen von React Component

Detaillierte Erläuterung der Javascript-Wissenspunkte

Verwendung und Beschreibung des HTML-Tags tbody

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

Artikel empfehlen

Ubuntu 16.04 64-Bit in drei Schritten mit 32-Bit-Programmen kompatibel

So löschen Sie die MySQL-Registrierung

So steigern Sie Ihre Web-Performance um das Dreifache, indem Sie einen Parameter in Nginx aktivieren

So erhöhen Sie die Ladegeschwindigkeit von HTML-Seiten

Persönliche Meinung: Sprechen Sie über Design

Eine detaillierte Darstellung des Prozesses zum Erklimmen einer Grube des Docker-Bereitstellungsdienstes

Verwenden Sie Smart CSS, um Stile basierend auf der Scrollposition des Benutzers anzuwenden

MySQL Master-Slave-Prinzip und Konfigurationsdetails

Beispielanalyse der Verwendung der Selbstinkrementierung von MySQL-Nichtprimärschlüsseln

Detaillierte Erklärung der Verwendung von Bildschirmbefehlen in Linux

Die Beziehung zwischen Webseitenerstellung und Dampfbrötchen (Erfahrungsaustausch)

Eine kurze Diskussion über bedingte Kodierung und Seitenlayout der VUE-Uni-App

VMware12 installiert die Desktopversion von Ubuntu19.04 (Installations-Tutorial)

Eine detaillierte Diskussion der Komponenten in Vue

Kostenloses Tutorial zur Installationskonfiguration der Version MySQL 5.7.18