URL、href、srcの使い方を詳しく解説

今回は、url、href、srcの使い方について詳しく解説します。 url、href、srcの使用上の注意点は何ですか？実際のケースを見てみましょう。

1. URL の概念

Uniform Resource Locator (または、Uniform Resource Locator/場所アドレス、URL アドレスなど、英語:Uniform Resource Locator、URL と略されることが多い) は、一般に、 Web ページのアドレス (Web サイト)。インターネット上の番地と同じように、インターネット上の標準リソースの住所です。

2. URL形式

2.1 標準形式

プロトコルタイプ: [//サーバーアドレス[:ポート番号]][/リソースレベルUNIXファイルパス] クエリ

2.2 ファイル名?形式

プロトコルタイプ: [//[リソースへのアクセスに必要な認証情報@]サーバーアドレス[:ポート番号]][/リソースレベルUNIXファイルパス]ファイル名? Query
where [アクセス認証情報@;:ポート No .;?クエリ;#フラグメントID]はすべてオプションです。

3. URL の文法規則

たとえば、URL http://segmentfault.com/html/index.asp は次の文法規則に準拠する必要があります:

scheme: //host.domain: port/path /filename

3.1 説明

(1) スキーム - インターネット サービスの種類を定義します。最も一般的なタイプは http です

(2) ホスト - ドメイン ホストを定義します (http のデフォルトのホストは www)

(3) ドメイン - w3school.com.cn などのインターネット ドメイン名を定義します

(4) ): port - 定義 ホスト上のポート番号 (http のデフォルトのポート番号は 80)

(5) path - サーバー上のパスを定義します (省略した場合、ドキュメントは Web サイトのルート ディレクトリに配置する必要があります) 。

(6) filename - ドキュメント/リソースの名前を定義します

3.2 URL スキーム

最も人気のあるスキームのいくつかを次に示します:

IV. URL の種類

4.1 絶対 URL

絶対 URL (絶対 URL) は、絶対 URL 自体の場所は場所とは関係がありません。参照されている実際のファイルの。

4.2 相対 URL

相対 URL (相対 URL) は、URL 自体を含むフォルダーの場所を参照点として使用して、対象フォルダーの場所を記述します。

一般に、同じサーバー上のファイルには常に相対 URL を使用する必要があります。各ファイルの相対位置が同じである限り、入力が簡単で、ページをローカル システムからサーバーに移動するときに便利です。リンクは引き続き有効です。

以下は、パスとその意味を確立するために使用されるいくつかの特別な記号です。

(1) .: 現在のディレクトリ、相対パスを表します。 例: Text または

(2) ..: 上位ディレクトリ、相対パスを表します。 例: text または

(3) ../../: 上位ディレクトリ Directory の上位レベルを表します。相対パス。 例:

(4) /: ルート ディレクトリ、絶対パスを表します。 例: [text] (/abc) または

5. href

5.1 仕様の説明

href の概念は、次のように指定します。これにより、現在の要素または現在のドキュメントと、現在の属性で定義された必要なアンカーまたはリソースとの間のリンクまたは関係が定義されます。

5.2 一般的な理解

href 目的はリソースを参照することではなく、現在のタグをターゲットアドレスにリンクできるように接続を確立することです。

6. src の概念

source (略称) は外部リソースの場所を指し、指す内容はドキュメント内の現在のタグの場所に適用されます。

7. href と src の違い

7.1 要求されるリソースのさまざまなタイプ

(1) href は、現在の要素 (アンカー) または現在の要素の間に確立されたネットワーク リソースの場所を指します。文書（リンク）連絡先。

(2) src リソースをリクエストすると、それが指すリソースがダウンロードされ、JavaScript スクリプト、img 画像などのドキュメントに適用されます

7.2 結果は異なります

(1) href が使用されます。現在のドキュメントを追加し、参照リソース間の接続を確立します。

(2) 現在のコンテンツを置き換えるために src が使用されます。

7.3 ブラウザの解析方法が異なります

(1) ドキュメントに追加された場合、ブラウザははドキュメントを CSS ファイルとして認識し、リソースは現在のドキュメントの処理を停止することなく並行してダウンロードされます。このため、@import メソッドを使用する代わりに、link メソッドを使用して CSS を読み込むことが推奨されます。

(2) ブラウザーは、 を解析するとき、リソースがロードされ、コンパイルされ、実行されるまで、他のリソースのダウンロードと処理を一時停止します。これは、ピクチャとフレームにも当てはまります。これは、指定されたリソースを に適用するのと似ています。現在の内容。このため、js スクリプトを先頭ではなく下部に配置することが推奨されます。

8. link と @import の違い

どちらも CSS を外部参照する方法ですが、いくつかの違いがあります:

(1) link は CSS をロードできることに加えて、XHTML タグです。 、RSS などを定義することもできますが、@import は CSS カテゴリに属し、CSS のみをロードできます。

(2) リンクが CSS を参照する場合、ページのロードと同時にロードされます。@import では、ロードする前にページが完全にロードされる必要があります。

(3) リンクは XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されており、以前のバージョンのブラウザではサポートされていません。

(4) リンクは、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしていますが、@import はサポートしていません。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Node.js を使用して電子メールアクティベーションに登録する方法

jQuery を使用すると、画像がスクロールしたりフェードインしたりフェードアウトしたりできます

以上がURL、href、srcの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。