相対パスと絶対パスの違い_CSS/HTML

絶対パス:

私たちが通常コンピューターを使用するときに必要なファイルを見つけるには、ファイルの場所を知る必要があります。ファイルの場所を表現する方法は、たとえばパスです。次のパスが表示されます: c:/website/img /photo.jpg photo.jpg ファイルが、C ドライブの Web サイト ディレクトリの img サブディレクトリにあることがわかります。ファイルの場所を完全に記述するこれに似たパスは絶対パスです。絶対パスに基づいてファイルの場所を決定するために、他の情報を知る必要はありません。 Web サイトでは、http://www.e3i5.net/img/photo.jpg と同様にファイルの場所を決定する方法も絶対パスです。

Web サイト アプリケーションでは、通常、ルート ディレクトリを表すために「/」を使用します。 /img/photo.jpg は、photo.jpg ファイルが Web サイトのルート ディレクトリの img ディレクトリにあることを意味します。ただし、初心者にとってこの使用は危険です。ここで参照されるルート ディレクトリは Web サイトのルート ディレクトリではなく、Web サイトが配置されているサーバーのルート ディレクトリであることを知っておく必要があるためです。サーバールートと異なる場合、エラーが発生します。
相対パス:

画像が正常に表示できない原因を解析します。たとえば、index.htm というページがあり、このページに関連付けられた写真 photo.jpg があります。絶対パスは次のとおりです。
c:/website/index.htm
c:/website/img/photo.jpg

絶対パスを使用する場合 c:/website/img/ photo.jpg の場合、photo.jpg ファイルは確かに指定された場所 (c:/website/img/photo.jpg) にあるため、自分のコンピュータでは問題ありませんが、ページを Web サイトにアップロードすると、ウェブサイトはサーバーの C ドライブ、D ドライブ、AA ディレクトリ、さらには bb ディレクトリにある可能性があるため、何か問題が発生する可能性が非常に高いです。の場合、c:/website/img/photo.jpg というパスを指定する必要はありません。それでは、index.htm ファイル内で photo.jpg ファイルを見つけるにはどのようなパスを使用する必要があるのでしょうか?はい、相対パスを使用する必要があります。いわゆる相対パスは、その名前が示すように、ターゲット位置を基準にしています。上記の例では、index.htm で接続されている photo.jpg は、img/photo.jpg を使用してファイルを見つけることができます。これらのファイルがどこに配置されていても、それらの相対関係が変わらない限り、エラーは発生しません。

さらに、上位ディレクトリを表すには「../」、上位ディレクトリを表すには「../../」などを使用します。 (DOS を勉強したことがある友人なら、もっと理解しやすいかもしれません)

さらにいくつかの例を見てください。すべての例で、index.htm ファイルに画像 photo.jpg が接続されていることに注意してください。

例:
c:/website/web/index.htm
c:/website/img/photo.jpg
この例では、photo.jpg がindex.htm にリンクされています。どのように表現すればよいのでしょうか？
間違った記述: img/photo.jpg
この例では、index.htm ファイルの場合、img/photo.jpg で表される絶対パスは c:/website /web/img になります。 /photo.jpg、明らかに要件を満たしていません。
正しい書き込み方法: ../img/photo.jpg の相対パスを使用してファイルを見つけます


例:
c:/website/web/xz/index.htm
c:/website/img/images/photo.jpg
この例では、index.htm で接続されている photo.jpg をどのように表現すればよいでしょうか?
誤った記述: ../img/images/photo.jpg
この例では、index.htm ファイルの場合、 ../img/images/photo.jpg は絶対パスを表します。 : c:/website/web/img/images/photo.jpg。
正しい書き方: ../../img/images/photo.jpg の相対パスを使用して、ファイル


を見つけることができます。 例:
c:/website/web /xz/index.htm
c:/website/web/img/photo.jpg
この例では、index.htm に接続されている photo.jpg はどのように表現されるべきでしょうか?
誤った記述: ../../img/photo.jpg
この例では、index.htm ファイルの場合、 ../../img/photo.jpg の絶対パスが誤っています。表されるのは、c:/website/img/photo.jpg です。
正しい書き方: ../img/photo.jpg の相対パスを使用してファイルを見つけることができます


要約: 上記の例を通して、絶対パスを変換するときに次のことがわかります。 path を相対パスに変換する場合、2 つのファイルの絶対パスの同一部分は無視でき、考慮されません。それらがどのように異なるのか考えてみましょう。