Was sind die Unterschiede in Funktion und Verwendung zwischen dem src-Attribut und dem href-Attribut?

Das src-Attribut und das href-Attribut sind häufig verwendete Attribute in HTML und werden zum Laden externer Ressourcen verwendet. Obwohl sie ähnliche Zwecke verfolgen, gibt es einige Unterschiede in der Verwendung und dem Zweck.

1. src-Attribut: Das
   src-Attribut wird verwendet, um externe Ressourcen anzugeben, die in das Dokument eingebettet werden sollen. Es wird hauptsächlich zum Einfügen externer Skriptdateien und Mediendateien in HTML-Dokumente verwendet. Es kann in den folgenden Situationen verwendet werden:
2. Einführung externer JavaScript-Dateien: Verknüpfen Sie externe JavaScript-Dateien über das src-Attribut mit HTML-Seiten. Zum Beispiel: <script src="script.js"></script><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属性指定的资源之前，会暂停页面的渲染。

2. href属性：
   href属性用于指定文档与外部资源之间的关系，主要用于在HTML文档中引入外部样式表和超链接。它可以用于以下几种情况：
3. 引入外部CSS样式表：通过href属性，将外部的CSS文件链接到 HTML 页面。例如：<link href="style.css" rel="stylesheet">
4. 创建超链接：通过href属性，创建一个指向其他页面或其他资源的链接。例如：<a href="http://www.example.com">Link</a>
Einführung externer Bilder: Betten Sie externe Bilddateien über das src-Attribut in HTML-Seiten ein. Zum Beispiel: <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="image">

Einführung externer Audio- und Videodateien: Betten Sie externe Audio- oder Videodateien über das src-Attribut in die HTML-Seite ein . Zum Beispiel: <audio src="audio.mp3"></audio>

Es ist zu beachten, dass bei Verwendung des src-Attributs die externe Ressource herunterladbar sein muss und die Der Browser fordert Ressourcen basierend auf dem Wert des src-Attributs an und lädt diese Ressourcen zusammen auf die Seite. Daher unterbricht der Browser das Rendern der Seite, bevor er die durch das src-Attribut angegebenen Ressourcen lädt.

href-Attribut: Das 🎜href-Attribut wird verwendet, um die Beziehung zwischen dem Dokument und externen Ressourcen anzugeben, hauptsächlich zum Einführen externer Stylesheets und Hyperlinks in HTML-Dokumente. Es kann in den folgenden Situationen verwendet werden: 🎜🎜Einführung externer CSS-Stylesheets: Verknüpfen Sie externe CSS-Dateien über das href-Attribut mit HTML-Seiten. Zum Beispiel: <link href="style.css" rel="stylesheet">🎜🎜Hyperlink erstellen: Erstellen Sie über das href-Attribut einen Link zu anderen Seiten oder anderen Ressourcen. Zum Beispiel: <a href="http://www.example.com">Link</a>🎜🎜🎜Es ist zu beachten, dass bei Verwendung des href-Attributs externe Ressourcen berücksichtigt werden nicht heruntergeladen, nur wenn der Benutzer auf den Link klickt, fordert der Browser die Ressource an, lädt sie herunter und zeigt die Ressource auf einer neuen Seite an. Darüber hinaus unterbricht der Browser das Rendern der Seite nicht, wenn die durch das href-Attribut angegebene Ressource geladen wird. 🎜🎜Zusammenfassend gibt es gewisse Unterschiede in der Verwendung und dem Zweck des src-Attributs und des href-Attributs. Das src-Attribut wird zum Einbetten herunterladbarer Ressourcen verwendet und unterbricht das Rendern der Seite während des Seitenladevorgangs, während das href-Attribut zur Angabe der Beziehung zwischen dem Dokument und externen Ressourcen verwendet wird, hauptsächlich zum Einführen von Stylesheets und zum Erstellen von Hyperlinks. Hier sind einige Codebeispiele: 🎜

<!-- 使用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>

🎜 Durch die richtige Verwendung von src und href können wir die Leistung der Seite und das Laden externer Ressourcen besser steuern. 🎜

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede in Funktion und Verwendung zwischen dem src-Attribut und dem href-Attribut?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!