HTMLにおける絶対パスと相対パスの違いの分析

HTMLにおける絶対パスと相対パスの違いの分析
図に示すように:

1 つのページには多数のファイルが接続されているため、ファイルを参照するときには、パスの問題をある程度理解している必要があります。または、PHP ネットワーク プログラム開発に精通しているプログラマーは、define と include を組み合わせて変数のパスと参照を定義する方法について多くの洞察力を持っています。

例えば:

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

定義('ROOT_PATH'、ディレクトリ名(__FILE__));
ROOT_PATH."/inc/webconfig.php" を含めます。
ROOT_PATH."/inc/sysinfo.php"を含めます。
ROOT_PATH."/inc/functions.php"をincludeします。
ROOT_PATH."/inc/db_sql.php"を含めます。

これらは次に分析するものです。

主な内容:

• 相対パスと絶対パスの概念
• 相対パスと絶対パスの概念を詳細に分析する

オペレーティング システム クラスでは、ファイル検索について次のように説明しています。絶対パス: ツリー ディレクトリ構造では、ルート ノードからデータ ファイルまたはディレクトリ ファイルへのパスは 1 つだけです。ルート ノードからデータ ファイルまでのパス上のディレクトリ ファイル名とデータ ファイル名を「/」で接続して、データ ファイルにアクセスするために使用できるパス名を形成します。相対パス: 「現在のディレクトリ」(「作業ディレクトリ」とも呼ばれます) をプロセスごとに設定できるため、ファイルを検索するたびに機械的に絶対パスを使用する必要はありません。代わりに、現在のディレクトリを基準としたファイルのパスを使用します。これが相対パスです。もちろん、少し抽象的です。詳細については、主に HTML に適用した以下の分析を参照してください。

具体的な分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ページ内のハイパーリンクとして別の HTML ページを参照するにはどうすればよいでしょうか。 Web ページに画像を挿入するにはどうすればいいですか?

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

これらのエラーを回避し、ファイルを正しく参照するには、HTML パスについて学習する必要があります。

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

HTML 相対パス

同じディレクトリ内のファイル参照

ソースファイルと参照ファイルが同じディレクトリにある場合は、参照ファイル名のみを記述します。

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

info.html のパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。 index.html のパスが c:\Inetpub\wwwroot\sites\blabla\index.html であると仮定します。 info.html に index.html へのハイパーリンクを追加するコードは、次のように記述する必要があります。

<a href = "index.html">index.html</a> で親ディレクトリを指定する方法
../ はソース ファイルの親ディレクトリを示し、 https://www.jb51.net/ はソース ファイルの親ディレクトリを示します。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。index.html へのパスが c:\Inetpub\wwwroot\sites\index.html であると仮定します。info.html に index.html へのハイパーリンクを追加するコードは、次のように記述する必要があります。

<a href = "../index.html">index.html</a> info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。 index.html へのパスが c:\Inetpub\wwwroot\index.html であると仮定します。 info.html に index.html へのハイパーリンクを追加するコードは、次のように記述する必要があります。

<a href = "https://www.jb51.net/index.html">index.html</a> info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。 index.html へのパスが c:\Inetpub\wwwroot\sites\wowstory\index.html であると仮定します。 info.html に index.html へのハイパーリンクを追加するコードは、次のように記述する必要があります。

<a href = "../wowstory/index.html">index.html</a>
サブディレクトリがサブディレクトリ内のファイルを参照していることを示すにはどうすればよいでしょうか? サブディレクトリ ファイルのパスを記述するだけです。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。index.html へのパスが c:\Inetpub\wwwroot\sites\blabla\html\index.html であると仮定します。info.html に index.html へのハイパーリンクを追加するコードは、次のように記述する必要があります。

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

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。index.html へのパスが c:\Inetpub\wwwroot\sites\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 サイトのルート ディレクトリです。

たとえば、index.html ファイルを www ルート ディレクトリに置いたとします。このファイルの絶対パスは https://www.jb51.net/index.html です。

www ルート ディレクトリに html_tutorials というディレクトリを作成し、そのディレクトリに index.html ファイルを置いたとします。このファイルの絶対パスは https://www.jb51.net/html_tutorials/index.html です。

参考文献: 相対パスと絶対パスの違い

<<:  JSは星を消すケースを実現する

>>:  MySQL 分離列とプレフィックスインデックスの使用の概要

推薦する

CentOS MySQLデータベースのスケジュールバックアップを実装する方法

次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...

Windows 8 での MySQL Community Server 5.6 のインストールと設定のチュートリアル

この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...

Nginx プロセス管理とリロードの原則の詳細な説明

プロセス構造図Nginx はマルチプロセス構造です。マルチプロセス構造は、次のような Nginx の...

MySQL データベースのバックアップ プロセスに関する注意事項

今日は、データ バックアップに関連するいくつかの点について調べ、MySQL データ バックアップに関...

CentOS 7.4 で MySQL 5.7.28 バイナリモードをインストールする方法

Linuxシステムバージョン: CentOS7.4 MySQL バージョン: 5.7.28 Linu...

Webスキル: 複数のIEバージョンの共存ソリューション IETester

私のおすすめ複数のIEバージョンの共存のためのソリューション以前に IE6、IE7、IE8 の共存に...

GaussDB for MySQL パフォーマンス最適化の詳細な説明

目次背景インスピレーションは人生から生まれる速達配送の最適化原則GaussDB の最適化 (MySQ...

Vueのwatch、computed、methodsの違いのまとめ

目次1 はじめに2 基本的な使い方2.1 方法2.2 計算プロパティ2.3 リスナーを見る3 3つの...

Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...

CSS3 で QR コードスキャン効果を実装する例

オンラインプレビューhttps://jsrun.pro/AafKp/まず効果を見てみましょう:最初の...

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...

WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...

流星効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスで流星の特殊効果を表示するための具体的なコードを参考まで...