HTML における src と href の違いについての簡単な説明

HTML における src と href の違いについての簡単な説明

簡単に言うと、srcは「このリソースをロードしたい」という意味で、hrefは「このリソースに関連付けたい」という意味です。

src は主に要素の置換に使用され、href は関連ドキュメントや外部リソースとの関連リンクを確立するために使用されます。

href 属性は、ローカル Web リソースと定義されたリソースの間にリンクが確立されていることを示します。

のように:

<link href="style.css" rel="スタイルシート"/>

ブラウザはこのリソースがスタイルシートであることを認識しており、この要素に到達しても解析を停止しませんが、ブラウザがページをレンダリングするためにスタイル ルールを必要とするため、ページのレンダリングが停止する場合があります。

ブラウザは CSS ファイルの内容をスタイル タグに読み込みません。したがって、スタイルシートを読み込むには、@import ではなく link タグを使用することをお勧めします。

src 属性は、対応するリソースを現在のページに埋め込みます。のように:

<script src="script.js"></script>

ブラウザがページを読み込んで処理するときに、script.js を見つけて JS をコンパイルします。そうして初めて、後続のページのコンパイルと解析作業が続行されます。

JS コンテンツはスクリプト タグに読み込まれます。これは img タグと非常によく似ています。ブラウザが img タグを解析すると、対応する画像が読み込まれ、img タグに配置されます。

このため、jS ファイルはドキュメントの最後に読み込む必要があります。ラベルの前。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL json 形式のデータクエリ操作

>>:  Dockerコンテナの状態変換の実装

推薦する

DockerHubイメージリポジトリの使い方の詳しい説明

これまで使用していたイメージはすべて DockerHub パブリック リポジトリから取得していました...

Linux のタイムドログ削除を実装する簡単な方法

導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...

要素UIテーブルはドロップダウンフィルタリング機能を実現します

この記事の例では、要素UIテーブルにドロップダウンフィルタリングを実装するための具体的なコードを参考...

case when文のエラー問題の詳細な説明

序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...

dockerネットワーク双方向接続の詳細な説明

Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...

JavaScript 初心者のための二分探索木アルゴリズムのチュートリアル

目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...

JavaScript の document.activeELement フォーカス要素の紹介

目次1. デフォルトの焦点はボディにあります2. テキストボックスのフォーカスを手動で取得する3. ...

JavaScript に関する 6 つの奇妙で便利な点

目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...

React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...

IE8 と Chrome でテーブルの幅を修正する方法

IE8 や Chrome で上記の設定を使用すると、画面の最大幅に合わせて表示が統一され、各列の幅は...

Vue の長いリストをすばやく読み込む方法

目次背景メインコンテンツ1. コンポーネントの比較2. 実装のアイデア3. キーメソッドソースコード...

HTTP 戻りコード一覧(中国語と英語の説明)

httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...

vue+tsは要素のマウスドラッグの効果を実現します

この記事の例では、要素のマウスドラッグ効果を実現するためのvue+tsの具体的なコードを参考までに共...

要素テーブルの多層ネスト表示の実践

複数の注文を含むリストが必要です。各注文は一意にすることも、複数の注文を結合することもできます。各注...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...