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

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

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

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

href 属性:
2. href 属性は、ドキュメントと外部リソース間の関係を指定するために使用され、主に HTML ドキュメントに外部スタイル シートとハイパーリンクを導入するために使用されます。これは次のような状況で使用できます。
   
外部 CSS スタイル シートの導入: href 属性を通じて外部 CSS ファイルを HTML ページにリンクします。例:
ハイパーリンクの作成: href 属性を使用して他のページまたは他のリソースへのリンクを作成します。例:
4. Link

href を使用する場合は、次のことに注意してください。属性、外部リソースはダウンロードされません。ユーザーがリンクをクリックした場合にのみ、ブラウザーはリソースを要求してダウンロードし、新しいページにリソースを表示します。さらに、ブラウザは、href 属性で指定されたリソースを読み込むときにページのレンダリングを一時停止しません。

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

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

<!-- 使用src属性引入外部图片 -->
<img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" 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 サイトの他の関連記事を参照してください。