HTML の相対パス (Relative Path) と絶対パス (Absolute Path) の詳細な理解

私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避けられません。Web アプリケーションの強力な機能は、ハイパーリンク (Hyper Link) にあります。たとえば、ページ a はページ b を指すリンクアドレス (つまり URI) を保存しますが、問題はまさにここにあり、ファイルを正しく参照する方法です。たとえば、HTML ページ内のハイパーリンクとして別の HTML ページを参照するにはどうすればよいでしょうか。 Web ページに画像を挿入するにはどうすればいいですか? ......
また、相対パスはStrutsで非常に人気があるため、注意しないと混乱しやすくなります。

ファイル参照（ハイパーリンクの追加や画像の挿入など）時に誤ったファイルパスを使用すると、参照が無効になります（リンクされたファイルが参照できない、挿入された画像が表示されないなど）。

これらのエラーを回避し、文書を正しく引用するために、今後の参考のために違いと使用法を書き留めておきました。

HTMLにはパスの記述方法が2つあります。相対パスと絶対パスです。

HTML相対パス
同じディレクトリ内のファイル参照ソースファイルと参照ファイルが同じディレクトリにある場合は、参照ファイル名を記述するだけです。

ここで、ソースファイル info.HTML を作成し、info.HTML 内のハイパーリンクとして index.HTML ファイルを参照します。

info.HTML へのパスが d:\tomcat\webapps\hello\blabla\info.HTML であると仮定します。
index.HTML へのパスが d:\tomcat\webapps\hello\blabla\index.HTML であると仮定します。
info.HTML 内の index.HTML にハイパーリンクを追加するコードは、次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

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

親ディレクトリを指定する方法
../ はソースファイルの親ディレクトリを表し、../../ はソースファイルの親ディレクトリを表します。

info.HTML へのパスが d:\tomcat\webapps\hello\blabla\info.HTML であると仮定します。
index.HTML へのパスが d:\tomcat\webapps\hello\index.HTML であると仮定します。
info.HTML 内の index.HTML にハイパーリンクを追加するコードは、次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

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

info.HTML のパスが d:\tomcat\webapps\hello\blabla\wowstory\info.HTML であると仮定します。
index.HTML へのパスが d:\tomcat\webapps\hello\index.HTML であると仮定します。
info.HTML 内の index.HTML にハイパーリンクを追加するコードは、次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

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

info.HTML へのパスが d:\tomcat\webapps\hello\blabla\info.HTML であると仮定します。
index.HTML パスが d:\tomcat\webapps\hello\wowstory\index.HTML であると仮定します。
info.HTML 内の index.HTML にハイパーリンクを追加するコードは、次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

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

サブディレクトリの表現方法<br />サブディレクトリ内のファイルを参照するには、サブディレクトリファイルのパスを記述するだけです。

info.HTML へのパスが d:\tomcat\webapps\hello\blabla\info.HTML であると仮定します。
index.HTML へのパスが d:\tomcat\webapps\hello\blabla\HTML\index.HTML であると仮定します。
info.HTML 内の index.HTML にハイパーリンクを追加するコードは、次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

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

info.HTML へのパスが d:\tomcat\webapps\hello\blabla\info.HTML であると仮定します。
index.HTML へのパスが次のとおりであると仮定します: d:\tomcat\webapps\hello\blabla\HTML\tutorials\index.HTML
info.HTML 内の index.HTML にハイパーリンクを追加するコードは、次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

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

HTML 絶対パス
HTML 絶対パスは、ドメイン名を含むファイルの完全なパスを指します。

ドメイン名 www.jb51.net を登録し、仮想ホストを申請したとします。仮想ホストプロバイダーは www などのディレクトリを提供します。この www は Web サイトのルートディレクトリです。

www ルートディレクトリにファイル index.HTML があるとします。このファイルの絶対パスは https://www.jb51.net/index.html です。

たとえば、www ルートディレクトリに HTML_tutorials というディレクトリが作成され、このディレクトリに index.HTML ファイルが配置されているとします。このファイルの絶対パスは https://www.jb51.net/article/32759.htm です。

<<: クールなバーコードエフェクトの作り方を教えます

>>: JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します