HTML5での相対パスの書き方

WBOY
リリース: 2022-03-21 14:55:53
オリジナル
2572 人が閲覧しました

html5 相対パスの記述方法: 1. 同階層のパスファイルを表す場合は「ファイル名」を使用、2. 上位ディレクトリファイルを表す場合は「./ファイル名」を使用、3. 「../」を使用「ファイル名」は上位のファイルを表します。 4.「同レベルのディレクトリ名/ファイル名」は下位のディレクトリファイルを表します。

HTML5での相対パスの書き方

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

html5 での相対パスの書き方

目的: このファイルが存在するパスに起因する他のファイル(またはフォルダー)とのパス関係を指定します

ソースの場合file 参照先のファイルと同じディレクトリにある場合は、参照先のファイル名を直接記述します このときのファイルの参照方法は相対パスを使用します。

次の例では、例として 2 つの HTML ドキュメント info.html と Index.html を作成します。要件は、index.html ハイパーリンクを info.html に追加することです。

eg1: 相対パスの単純な適用

前提: info.html パスは: c:/Inetpub/wwwroot/sites/blabla/info.html

index.html へのパスは次のとおりです: c:/Inetpub/wwwroot/sites/blabla/index.html

書き込み:

<a href = "index.html">这是超连接</a>
ログイン後にコピー

eg2: 上部の表現方法-level directory

../ はソースファイルが存在するディレクトリの上位ディレクトリを表します。 http://www.cnblogs.com/ はディレクトリの上位ディレクトリを表しますソースファイルがどこにあるかなど。

前提: info.html のパス: c:/Inetpub/wwwroot/sites/blabla/info.html

Index.html のパス: c:/Inetpub/wwwroot /sites/index .html

記述方法:

<a href = "../index.html">这是超连接</a>
ログイン後にコピー

eg3:上位ディレクトリの表現方法

前提:info.htmlパスは: c:/Inetpub/wwwroot /sites/blabla/info.html

index.html パスは: c:/Inetpub/wwwroot/sites/wowstory/index.html

Writing :

<a href = "../wowstory/index.html">index.html</a>
ログイン後にコピー

eg3: 下位ディレクトリの表現方法

下位ディレクトリ内のファイルを参照するには、下位ディレクトリにファイルのパスを記述するだけです。 -level ディレクトリを直接指定します。

前提: info.html のパス: c:/Inetpub/wwwroot/sites/blabla/info.html

Index.html のパス: c:/Inetpub/wwwroot /sites/blabla /html/index.html

執筆:

<a href = "html/index.html">这是超连接</a>
ログイン後にコピー

推奨チュートリアル: "html ビデオ チュートリアル"

以上がHTML5での相対パスの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート