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コンテナの状態変換の実装

推薦する

Vue でのルータービューコンポーネントの使用に関する詳細な説明

Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...

Linux システムのユーザー管理コマンドの概要

ユーザーとグループの管理1. ユーザーとグループの基本概念ユーザーとグループ:システム上のすべてのプ...

vue3 学習ノートにおける axios の使用の変更の概要

目次1. axioの基本的な使い方2. クロスドメインの問題を解決するには? 3. パッケージ4. ...

基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)

相対パス - ファイルを参照する Web ページの場所に基づいて確立されたディレクトリ パス。そのた...

MySQLは実際に分散ロックを実装できる

序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...

MySQLのデフォルトのソートルールに基づく落とし穴

MySQL のデフォルトの varchar 型は大文字と小文字を区別しません (insensitiv...

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...

Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...

uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する方法

Electronのインストール cnpm 電子をインストール -g electron-package...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

Vue3.0 手書きカルーセル効果

この記事では、Vue3.0の手書きカルーセル効果の具体的なコードを参考までに共有します。具体的な内容...

Linux システムで Vim を使用してリモート ファイルを読み書きするコマンドの詳細な説明

vim の動作モードを設定する (一時的) :set (モード情報) :set nu — 行番号を表...

JavaScript での && および || 演算子の使用例

目次序文&& 演算子|| 演算子|| 演算子の簡単なデモ章の目的ケース演習(json...

MySQLデータ損失のトラブルシューティング事例

目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...