[解決済み] SRCとHREFの違い
質問事項
は
SRC
と
HREF
属性は、画像、CSSファイル、HTMLファイル、他のウェブページ、JavaScriptファイルなどの外部エンティティを含めるために使用されます。
とは明確に区別されているのでしょうか?
SRC
と
HREF
? いつ、どこで、どのように使うか
SRC
または
HREF
? この2つは同じように使うことはできません。
これらの属性が使用されている例をいくつか挙げてみます。
-
CSSファイルを参照する。
href="cssfile.css"
をリンクタグの中に入れてください。 -
JSファイルを参照する場合。
src="myscript.js"
をscriptタグの中に入れてください。 -
画像ファイルを参照する場合。
src="mypic.jpg"
を画像タグの中に入れてください。 -
他のウェブページを参照する場合。
href="http://www.webpage.com"
アンカータグの内側。
解決方法は?
注意事項 ジョンインズ 回答 は、仕様の変更を考慮すると、より適切であると思います。
はい、次のような違いがあります。 src と href であり、これらを互換的に使用することはできません。私たちが使うのは src には 置き換え 要素、一方 href 参照するドキュメントと外部リソースとの関係を確立するためのものです。
href
(Hypertext Reference) 属性は、Web リソースの場所を指定し、現在の要素(アンカーやアンカーボックスの場合)間のリンクや関係を定義します。
a
の場合)、または現在のドキュメント(
link
) と、この属性で定義されたアンカーまたはリソースの宛先を指定します。と書くと
<link href="style.css" rel="stylesheet" />
ブラウザは、このリソースがスタイルシートであることを理解し
処理
ページの解析は
ない
を一時停止しています(ブラウザがページの描画とレンダリングにスタイル ルールを必要とするため、レンダリングが一時停止する場合があります)。それは
ない
の中にあるcssファイルの内容をダンプするのと同じです。
style
タグを使用します。(したがって
link
ではなく
@import
は、スタイルシートをhtml文書に添付するためのものです)。
src (Source)属性は、そのリソースを現在のドキュメントの、その要素の定義の場所に埋め込むだけです。例えば、ブラウザが
<script src="script.js"></script>
ブラウザがこのファイルを取得し、コンパイルし、実行するまで、ページの読み込みと処理は一時停止されます。の中にあるjsファイルの内容をダンプするのと同じです。
script
タグを使用します。同様なことは
img
というタグがあります。これは空のタグで、その中に入るべきコンテンツは
src
属性があります。ブラウザは画像を取得して読み込むまで、読み込みを一時停止します。[これは
iframe
]
このため、すべてのJavaScriptファイルを一番下(例として
</body>
タグ)
アップデート : ジョンインさん(@John-Yin's)を参考にする。 回答 は、HTML 5 仕様に基づく実装の詳細について説明します。
関連
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか?
-
[解決済み] スクリプトタグ - 非同期と遅延
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?
-
[解決済み] [Solved] What's the difference between <b> and <strong>, <i> and <em>?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
js プログラミング共通のエラーです。Uncaught TypeError。XXXは関数ソリューションではありません
-
[解決済み] text-overflow: 省略記号が機能しない
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] ionic 4でion-buttonをセンタリングする方法は?[重複しています]
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] TD rowspan が機能しない
-
[解決済み] Railsアプリケーションにアイコンを追加する