検索
ホームページウェブフロントエンドフロントエンドQ&AWebフロントエンドの相対パスとは何ですか

Webフロントエンドの相対パスとは何ですか

Aug 25, 2022 pm 04:58 PM
ウェブフロントエンド相対パス

Web フロントエンドでは、相対パスは、現在のファイルのパスによって引き起こされる他のファイル (またはフォルダー) とのパス関係を指します。これは、現在のファイルを基準としたターゲット ファイルの場所です。簡単に言うと、現在のファイルを参照点として使用して、さまざまなファイルのパスを決定します。相対パスは通常、「./」または「../」で始まります。利点: プロジェクト全体を移動しても、プロジェクト内のファイル間の相対関係は変化せず、以前に設定されたパスは依然として正確であり、変更する必要がありません。

Webフロントエンドの相対パスとは何ですか

このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。

まず、相対パスと絶対パスの概念と違いを理解する必要があります。

##相対パス:

相対パスとは、現在のファイルのパスによって生じる他のファイル (またはフォルダー) とのパス関係を指します。相対パスを使用すると、非常に便利になります。

絶対パス:

絶対パスは、ディレクトリの下の絶対場所を指し、ターゲットの場所に直接到達します。通常はドライブ文字から始まるパスです。

ファイルの場所を完全に記述するパスは絶対パスです。これは、Web サイトのルート ディレクトリに基づくディレクトリ パスです。絶対パス名は、ツリー構造のディレクトリ構造の最上位にあるルートディレクトリから、指定するディレクトリまたはファイルまでの連続するディレクトリをスラッシュで区切って指定し、最後の名前がディレクトリになります。または指すファイル。これが絶対と呼ばれる理由は、すべての Web ページが同じファイルを参照する場合、使用されるパスが同じであることを意味します。

  • 個人的な要約:

相対パスつまり、これはあなたがいる場所からの相対パスです。他のファイル (ルート ディレクトリではない) を参照するディレクトリであり、現在のファイルを基準としたターゲット ファイルの場所です。

この利点の 1 つは、プロジェクト全体を移動しても、プロジェクト内のファイル間の相対関係が変化せず、以前に設定したパスが引き続き正確であることです。例: Web サーバー フォルダーの下に、index.html と image.jpg の 2 つのファイルがあります。 Image.jpg は、index.html ファイルに導入されます。2 つのファイルの相対的な位置が変わっていない限り (つまり、まだフォルダー a の下にある限り)、このパスはどこにアップロードされても正しいものになります。ウェブサーバー。

絶対パス相対ルート ディレクトリ (ディスク) から始まり、各ファイルが使用するパスは同じです。

絶対パスを使用すると、Web サイトが悪意を持って盗用されることを防ぐことができます。盗用のデフォルトのリンクは依然として自分の Web サイトを指しています。ページ上のターゲット ファイルの場所が変更されていない限り、リンクは正しい URL を指し続けます。ローカル環境とサーバーのパスは異なる可能性があるため、Web 開発では絶対パスが使用されることはほとんどありません。 / はファイルのルート ディレクトリを表します。

例で説明します

以下では、Web 上で最も一般的に使用されている HTML の例からの相対パスと絶対パスを説明します。違い:

1. 絶対パス

例:

Webフロントエンドの相対パスとは何ですか

Webフロントエンドの相対パスとは何ですか # #もう 1 つの小さな例:

たとえば、コンピューターを使用しているときにファイルを使用したい場合は、ファイルの場所を知る必要があります。たとえば、index.html というファイルがある場合、画像index.pngを使用する必要があります:

D:/websize/image/index.html

D:/websize/image/img/index .png

この画像は、パス

D:/websize/image/img/index.png

を使用して参照できます。お使いのコンピュータではすべて正常に動作します。ただし、開発時には基本的に絶対パスは使用しないので、プロジェクトの移植が難しいため、他のコンピュータからあなたの写真にアクセスすることはできません(彼のコンピュータにはあなたの写真がありません)

2. 相対パス

(実際の使用を推奨) 最初に理解してください:

  • 。 . /

    現在のファイルの上位ディレクトリを表します

  • ./

    現在のファイルが存在するディレクトリを表します

  • 例:

Webフロントエンドの相対パスとは何ですか

Webフロントエンドの相対パスとは何ですか これは小さな例です:

例: E ドライブの下にある 2 つの WEB フォルダーのファイルは相互にアクセスします。

E:/WEB/mar/img/index.html

E:/WEB/mar/image/ig/ip/pho.png

index.html

から pho.png にアクセスする場合、パスは . ./image/ig/ip/pho です。 png;<p><code>index.html にアクセスする場合、必要なパスは . ./. ./. ./img/index.html

概要:

Web 開発では相対パスと絶対パスの両方が使用されますが、それぞれに独自の長所と短所があります。簡単に要約すると、相対パスは、現在のファイルを参照点として使用して、さまざまなファイルのパスを決定します。相対パスは通常、./、../ で始まります。もちろん、ファイルが同じレベルのディレクトリの場合は、./絶対パスは省略できます。コンピュータのファイルまたはネットワーク上の絶対アドレスに基づいてファイルのパスを決定します。絶対パスは通常、Windows ではドライブ文字で始まり、Linux では / で始まります (ただし、Web サーバーでは / を表します) Web サーバーのルート ディレクトリ)、または URL で開始します。

(学習ビデオ共有: Web フロントエンドの入門 )

以上がWebフロントエンドの相対パスとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
CSS:IDセレクターを使用するのは悪いですか?CSS:IDセレクターを使用するのは悪いですか?May 13, 2025 am 12:14 AM

IDセレクターを使用することは、CSSでは本質的に悪くはありませんが、注意して使用する必要があります。 1)IDセレクターは、一意の要素またはJavaScriptフックに適しています。 2)一般的なスタイルの場合、クラスセレクターはより柔軟で保守可能であるため、使用する必要があります。 IDとクラスの使用のバランスをとることにより、より堅牢で効率的なCSSアーキテクチャを実装できます。

HTML5:2024年の目標HTML5:2024年の目標May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONREFINIMINGANDOPTIMIZATION、notnewfeatures.1)強化された拡張性と拡張効率化されたレンダリング.2)

HTML5が改善しようとした主な領域は何ですか?HTML5が改善しようとした主な領域は何ですか?May 13, 2025 am 12:12 AM

html5aimed toemprovewebdevelymentinfourkeyareas:1)multimediasupport、2)セマンティクス構造、3)フォームキャピリティ、および4)offlineandstorageoptions.1)html5introduededelements、simplifiedediaembedingemencemanteddim.2)

CSS IDおよびクラス:一般的な間違いCSS IDおよびクラス:一般的な間違いMay 13, 2025 am 12:11 AM

idsは、Javascripthooksを使用しているので、whileclasseSarebetterforstyling.1)useclassess forStylingtoEriousEREUSERESERESERESPICITYISSUES.2)USEIDSSFORIDSSSCRIPTHOOKSTOUNIQUELYIEDIENEMENTS.3)3)回避策を避けてください

クラスセレクターとIDセレクターの間の差別化とは何ですか?クラスセレクターとIDセレクターの間の差別化とは何ですか?May 12, 2025 am 12:13 AM

classSelectorEctorSareverSatileAndReusable、whiledseLectorSareUniqueandspecific.1)useclassselectors(notedby。)forstylingMultipleElementswithsharedCharacteristics.2)useidselectors(notedby#)forstylinguniqueeletementonapage.classselectorectorotorsoffermoreflexibili

CSS IDS対クラス:実際の違いCSS IDS対クラス:実際の違いMay 12, 2025 am 12:10 AM

idsareuniqueIdentifiersforsingleelements、whileclassesstylemultipleements.1)useidsforuniqueelementsandjavascripthooks.2)useclasses forReusable、flexiblestylingacrossmultipletements。

CSS:クラスだけを使用した場合はどうなりますか?CSS:クラスだけを使用した場合はどうなりますか?May 12, 2025 am 12:09 AM

クラスのみのセレクターを使用すると、コードの再利用性と保守性が向上しますが、クラス名と優先順位の管理が必要です。 1.再利用性と柔軟性を向上させる、2。複数のクラスを組み合わせて複雑なスタイルを作成する3。長いクラス名と優先順位につながる可能性があります。4。パフォーマンスへの影響は小さい、5。簡潔な命名や使用規則などのベストプラクティスに従ってください。

CSSのIDおよびクラスセレクター:初心者向けガイドCSSのIDおよびクラスセレクター:初心者向けガイドMay 12, 2025 am 12:06 AM

IDおよびクラスセレクターは、それぞれ一意でマルチエレメントスタイルの設定にCSSで使用されます。 1. IDセレクター(#)は、特定のナビゲーションメニューなどの単一の要素に適しています。 2.クラスセレクター(。)は、統一ボタンスタイルなどの複数の要素に使用されます。 IDは注意して使用し、過度の特異性を避け、スタイルの再利用性と柔軟性を向上させるためにクラスに優先順位を付ける必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。