srcとhrefの違いを徹底解説して徹底解説！

src と href は Web 開発における 2 つの一般的な属性であり、外部リソースを導入するために使用されます。これらは多くの状況で同じ意味で使用できますが、それらの間には明らかな違いがいくつかあります。この記事では、src と href の違いを詳細に説明し、読者の理解を深めるために具体的なコード例を示します。

1. 導入されるオブジェクトは異なります
src は、画像、スクリプト、オーディオなどの外部リソースを埋め込むために使用されます。使用するリソースの特定の場所とファイル名を指定します。 src は通常、以下に示すように、img、script、audio、video などのタグで使用されます:

<img  src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="srcとhrefの違いを徹底解説して徹底解説！" >
<script src="script.js"></script>
<audio src="audio.mp3"></audio>

、href は主に、CSS ファイル、ハイパーリンクなどの外部リソースへのリンクに使用されます。リンク先リソースのURLアドレスを指定します。 href は通常、以下に示すように、link や a などのタグで使用されます:

<link rel="stylesheet" href="style.css">
<a href="https://www.example.com">访问示例网站</a>

2. さまざまな読み込み方法
src を通じて導入されたリソースは、ブラウザーによって読み込まれて解析される必要があるため、レンダリングがブロックされます。リソースがロードされるまで、ページのつまり、Web ページに src を使用して導入されたリソースが複数ある場合、ページの読み込み時間が長くなります。一般に、ページの読み込みをブロックしないように、スクリプトを body タグの下部に配置することをお勧めします。

href を通じて導入されたリソースは、ページのレンダリングと同時に読み込まれ、ページの表示をブロックしません。これにより、ページの読み込み中に複数の外部リソースを並行して読み込むことができ、ページの読み込み速度が向上します。 href を使用する一般的なシナリオは、以下に示すように CSS ファイルを導入することです:

<link rel="stylesheet" href="style.css">

3. アプリケーションのさまざまなスコープ
src を使用して、画像、スクリプト、オーディオ、ファイルなどのさまざまなタイプのリソースを埋め込むことができます。ビデオなど。 img、script、audio、video などのさまざまなタグに適用して、さまざまな種類のリソースを埋め込むことができます。

href は主に、外部リソースへのリンクを紹介するために使用されます。これは、ハイパーリンクや CSS ファイルなどの外部リソースへのリンクを作成するために、link や a などのタグでよく使用されます。

要約すると、外部リソースを導入する場合、src と href には次のような違いがあります。

• src は外部リソースを埋め込むために使用され、href は外部リソースへのリンクに使用されます。
• Src はブラウザーにリソースの読み込みと解析を要求するため、ページのレンダリングがブロックされますが、href はページのレンダリング中にリソースを読み込み、ページの表示をブロックしません。
• src はさまざまなタグに適しており、さまざまなタイプのリソースを埋め込むために使用されます。href は主に link や a などのタグで外部リソースへのリンクを紹介するために使用されます。

この記事の説明を通じて、読者が src と href の違いをより深く理解し、実際の Web 開発で正しく使用できることを願っています。

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