ホームページ > ウェブフロントエンド > フロントエンドQ&A > 一般的なHTMLファイルのパス設定方法

一般的なHTMLファイルのパス設定方法

PHPz
リリース: 2023-04-21 14:24:47
オリジナル
2177 人が閲覧しました

パスを HTML で使用すると、他のページへのリンク、画像の挿入、スタイル シートの埋め込みなどを行うことができます。ファイルごとにパスの設定が異なりますが、HTML ファイルの一般的なパスの設定方法は次のとおりです。

  1. 相対パス

相対パスは、現在のファイルが配置されているディレクトリからの相対パスです。相対パスを使用すると、コードが簡素化され、ファイル管理が容易になります。相対パスを設定する一般的な方法をいくつか次に示します。

1.1. 他のページへのリンク

同じディレクトリ内の他の HTML ファイルにリンクするには、ファイル名を直接記述することができます。

<a href="page2.html">Page 2</a>
ログイン後にコピー

親ディレクトリ (上位レベル) の HTML ファイルにリンクするには、ファイル名の前に 2 つのドット「..」を追加します。

<a href="../page1.html">Page 1</a>
ログイン後にコピー

注: 「..」は上位レベルのディレクトリを表します。複数のドットを使用して複数レベルのディレクトリを表すことができます。たとえば、「../../」は上の 2 レベルのディレクトリを表します。

1.2. 画像の挿入

同じディレクトリに画像を挿入するには、画像名を直接記述することができます。

<img src="image.jpg" alt="My Image">
ログイン後にコピー

親ディレクトリに画像を挿入するには、画像名の前に 2 つのドット「..」を追加します。

<img src="../image.jpg" alt="My Image">
ログイン後にコピー

1.3. スタイルシートの埋め込み

同じディレクトリにスタイルシートを埋め込むには、HTML ファイルにスタイルシートのファイル名を直接記述するだけです。

<link rel="stylesheet" href="style.css">
ログイン後にコピー

スタイル シートを親ディレクトリに埋め込むには、スタイル シート ファイル名の前に 2 つのドット「..」を追加します。

<link rel="stylesheet" href="../style.css">
ログイン後にコピー
  1. 絶対パス

絶対パスはドメイン名から始まるフルパスで、どのファイルでも使用できます。絶対パスを設定する一般的な方法をいくつか次に示します。

2.1. 他のページへのリンク

同じドメイン名の下にある他の HTML ファイルにリンクするには、リンクの完全な URL を直接記述することができます。

<a href="http://www.example.com/page2.html">Page 2</a>
ログイン後にコピー

2.2. 画像の挿入

同じドメイン名に画像を挿入するには、画像の完全な URL を直接記述することができます。

<img src="http://www.example.com/image.jpg" alt="My Image">
ログイン後にコピー

2.3. スタイルシートの埋め込み

同じドメイン名にスタイルシートを埋め込むには、スタイルシートファイルの完全な URL を HTML ファイルに直接記述します。

<link rel="stylesheet" href="http://www.example.com/style.css">
ログイン後にコピー

注: 絶対パスを使用するとコードが冗長になり、Web ページの読み込み時間が長くなるため、あまり使用しないことをお勧めします。

概要

上記は、HTML パスを設定する一般的な方法です。相対パスは、現在のファイルの場所に基づいて、リンク、画像の挿入、およびスタイル シートの埋め込みのためのパスを決定します。一方、絶対パスは、ドメイン名から始まる完全なパスです。特定のファイルの場所とニーズに基づいて適切なパス方法を選択すると、コードが簡素化され、ファイル管理が容易になり、Web ページの読み込み速度が向上します。

以上が一般的なHTMLファイルのパス設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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