src属性とhref属性の機能や使い方の違いは何ですか？-htmlチュートリアル-php.cn

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

WBOY

リリース： 2023-12-28 08:20:44

オリジナル

1147 人が閲覧しました

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

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

src 属性:
src 属性は、文書に埋め込む外部リソースを指定するために使用され、主に外部スクリプトファイルやメディアファイルを HTML 文書に導入するために使用されます。これは次のような状況で使用できます。
外部 JavaScript ファイルの導入: src 属性を介して外部 JavaScript ファイルを HTML ページにリンクします。例: <script src="script.js"></script>
外部画像の導入: src 属性を使用して、外部画像ファイルを HTML ページに埋め込みます。例: <img src="image.jpg" alt="image">
外部オーディオファイルとビデオファイルを導入する: src 属性を使用して外部オーディオファイルまたはビデオファイルを埋め込みます。 HTML ページ。例: <audio src="audio.mp3"></audio>

##src 属性を使用する場合、外部リソースは次のとおりである必要があることに注意してください。ダウンロード可能はい、ブラウザは src 属性の値に基づいてリソースを要求し、これらのリソースは一緒にページに読み込まれます。したがって、ブラウザーは src 属性で指定されたリソースをロードする前にページのレンダリングを一時停止します。

href 属性は、ドキュメントと外部リソース間の関係を指定するために使用され、主に HTML ドキュメントに外部スタイルシートとハイパーリンクを導入するために使用されます。これは次のような状況で使用できます。
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 サイトの他の関連記事を参照してください。