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 分離列とプレフィックスインデックスの使用の概要

推薦する

JavaScriptコールバック関数の詳細な理解

目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...

繰り返し送信、繰り返し更新、バックオフ防止に関する問題と解決策の分析

1つ。序文<br />この種の質問は、どの専門掲示板でも見かけます。Google で検索...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

Vue テンプレート構成と Webstorm コード形式仕様設定

目次1. コンパイラコードフォーマット仕様設定2. Vueテンプレートの設定1. コンパイラコードフ...

Linux システムで httpd の自動インストールと構成を Ansible で実装する方法

1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...

Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)

まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97%...

JDBC を MySQL 5.7 に接続する方法

1. まずMySQLとEclipseの環境を準備します。環境がセットアップされたら、Eclipseの...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

dns-prefetch とは何ですか? フロントエンドの最適化: DNS の事前解決によりページ速度が向上します

目次背景1. dns-prefetch とは何ですか? 2. dns-prefetch を設定するに...

JS を使用して要素が配列であるかどうかを判断する例

検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...

Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明

目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...

Linux カーネル デバイス ドライバー仮想ファイル システムに関する注意事項

/******************** * 仮想ファイルシステム VFS **********...

node.js で PC 上の WeChat アプレット パッケージを復号化するための処理アイデア

目次アプレットのソースコードはどこにありますか? PC ミニプログラムはどのように暗号化されますか?...