フロントエンドのurl、href、srcに関する知識を詳しく解説

今回はフロントエンドのurl、href、srcに関する注意事項について詳しく解説していきます。見てみましょう。

1. URL の概念

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

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 スキーム

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

Scheme	Access	for...
http	ハイパーテキスト転送プロトコル	http:// で始まる通常の Web ページ。暗号化はありません。
https	HTTP 安全な	安全なウェブページ。交換されるすべての情報を暗号化します。
ftp	ファイル転送プロトコル	は、ファイルをダウンロードしたり、Webサイトにアップロードしたりするために使用されます。
ファイル		コンピュータ上のファイル。

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 画像などのリソースがダウンロードされ、ドキュメントに適用されます

(1) href現在のドキュメントで使用されます。

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

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

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

8. link と @import の違い

どちらも CSS を外部参照する方法ですが、いくつかの違いがあります: (1) link は XHTML タグ であるだけでなく、 CSS をロードするには、RSS などの他のトランザクションを定義することもできます。一方、@import は CSS カテゴリに属し、CSS のみをロードできます。

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

(3) リンクは XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されており、以前のバージョンのブラウザではサポートされていません。 (4) リンクは、スタイルを変更するための DOM の制御に

JavaScript を使用することをサポートしていますが、@import はサポートしていません。

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

推奨読書:

JS は正規表現を使用して生年月日を決定します

Vue フィルターの書式設定方法の詳細な説明

以上がフロントエンドのurl、href、srcに関する知識を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。