src属性とhref属性の機能や使い方の違いは何ですか?

WBOY
リリース: 2023-12-28 08:20:44
オリジナル
1140 人が閲覧しました

src属性とhref属性の機能や使い方の違いは何ですか?

src 属性と href 属性は HTML で一般的に使用される属性であり、外部リソースを読み込むために使用されます。目的は似ていますが、使用方法や目的にはいくつかの違いがあります。

  1. src 属性:
    src 属性は、文書に埋め込む外部リソースを指定するために使用され、主に外部スクリプト ファイルやメディア ファイルを HTML 文書に導入するために使用されます。これは次のような状況で使用できます。
  2. 外部 JavaScript ファイルの導入: src 属性を介して外部 JavaScript ファイルを HTML ページにリンクします。例: <script src="script.js"></script>
  3. 外部画像の導入: src 属性を使用して、外部画像ファイルを HTML ページに埋め込みます。例: <img src="image.jpg" alt="image">
  4. 外部オーディオ ファイルとビデオ ファイルを導入する: src 属性を使用して外部オーディオ ファイルまたはビデオ ファイルを埋め込みます。 HTML ページ。例: <audio src="audio.mp3"></audio>
##src 属性を使用する場合、外部リソースは次のとおりである必要があることに注意してください。ダウンロード可能 はい、ブラウザは src 属性の値に基づいてリソースを要求し、これらのリソースは一緒にページに読み込まれます。したがって、ブラウザーは src 属性で指定されたリソースをロードする前にページのレンダリングを一時停止します。

    href 属性:
  1. href 属性は、ドキュメントと外部リソース間の関係を指定するために使用され、主に HTML ドキュメントに外部スタイル シートとハイパーリンクを導入するために使用されます。これは次のような状況で使用できます。
  2. 外部 CSS スタイル シートの導入: href 属性を通じて外部 CSS ファイルを HTML ページにリンクします。例:
  3. ハイパーリンクの作成: href 属性を使用して他のページまたは他のリソースへのリンクを作成します。例:
  4. Link
href を使用する場合は、次のことに注意してください。属性、外部リソースはダウンロードされません。ユーザーがリンクをクリックした場合にのみ、ブラウザーはリソースを要求してダウンロードし、新しいページにリソースを表示します。さらに、ブラウザは、href 属性で指定されたリソースを読み込むときにページのレンダリングを一時停止しません。

要約すると、src 属性と href 属性の使用と目的には特定の違いがあります。 src 属性は、ダウンロード可能なリソースを埋め込むために使用され、ページの読み込みプロセス中にページのレンダリングを一時停止します。一方、href 属性は、ドキュメントと外部リソースの間の関係を指定するために使用され、主にスタイル シートの導入とハイパーリンクの作成に使用されます。コード例をいくつか示します。

<!-- 使用src属性引入外部JavaScript文件 -->
<script src="script.js"></script>

<!-- 使用src属性引入外部图片 -->
<img src="image.jpg" alt="image">

<!-- 使用src属性引入外部音频文件 -->
<audio src="audio.mp3" controls></audio>

<!-- 使用href属性引入外部CSS样式表 -->
<link href="style.css" rel="stylesheet">

<!-- 创建超链接 -->
<a href="http://www.example.com">Link</a>
ログイン後にコピー

src と href を適切に使用すると、ページのパフォーマンスと外部リソースの読み込み方法をより適切に制御できます。

以上がsrc属性とhref属性の機能や使い方の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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