Maison interface Web tutoriel HTML Quelles sont les différences de fonctions et d'utilisation entre l'attribut src et l'attribut href ?

Quelles sont les différences de fonctions et d'utilisation entre l'attribut src et l'attribut href ?

Dec 28, 2023 am 08:20 AM
属性 src href

Quelles sont les différences de fonctions et dutilisation entre lattribut src et lattribut href ?

Les attributs src et href sont des attributs couramment utilisés en HTML et sont utilisés pour charger des ressources externes. Bien qu’ils aient des objectifs similaires, il existe certaines différences dans leur utilisation et leur objectif. Attribut

  1. src : L'attribut
    src est utilisé pour spécifier les ressources externes à intégrer dans le document. Il est principalement utilisé pour introduire des fichiers de script externes et des fichiers multimédias dans les documents HTML. Il peut être utilisé dans les situations suivantes :
  2. Présentation de fichiers JavaScript externes : liez des fichiers JavaScript externes aux pages HTML via l'attribut src. Par exemple : <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属性指定的资源之前,会暂停页面的渲染。

  1. href属性:
    href属性用于指定文档与外部资源之间的关系,主要用于在HTML文档中引入外部样式表和超链接。它可以用于以下几种情况:
  2. 引入外部CSS样式表:通过href属性,将外部的CSS文件链接到 HTML 页面。例如:<link href="style.css" rel="stylesheet">
  3. 创建超链接:通过href属性,创建一个指向其他页面或其他资源的链接。例如:<a href="http://www.example.com">Link</a>
  4. Présentation d'images externes : intégrez des fichiers d'images externes dans des pages HTML via l'attribut src. Par exemple : <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="image">

Présentation de fichiers audio et vidéo externes : intégrez des fichiers audio ou vidéo externes dans la page HTML via l'attribut src . Par exemple : <audio src="audio.mp3"></audio>

Il est à noter que lors de l'utilisation de l'attribut src, la ressource externe doit être téléchargeable, et le Le navigateur demandera des ressources en fonction de la valeur de l'attribut src, et ces ressources seront chargées ensemble sur la page. Par conséquent, le navigateur mettra en pause le rendu de la page avant de charger les ressources spécifiées par l'attribut src.

    Attribut href : 🎜L'attribut href est utilisé pour spécifier la relation entre le document et les ressources externes, principalement utilisé pour introduire des feuilles de style externes et des hyperliens dans les documents HTML. Il peut être utilisé dans les situations suivantes : 🎜🎜Présentation de feuilles de style CSS externes : liez les fichiers CSS externes aux pages HTML via l'attribut href. Par exemple : <link href="style.css" rel="stylesheet">🎜🎜Créer un lien hypertexte : Créez un lien vers d'autres pages ou d'autres ressources via l'attribut href. Par exemple : <a href="http://www.example.com">Link</a>🎜🎜🎜Il est à noter que lors de l'utilisation de l'attribut href, les ressources externes non téléchargé, ce n'est que lorsque l'utilisateur clique sur le lien que le navigateur demandera et téléchargera la ressource et affichera la ressource dans une nouvelle page. De plus, le navigateur ne mettra pas en pause le rendu de la page lors du chargement de la ressource spécifiée par l'attribut href. 🎜🎜En résumé, il existe certaines différences dans l'utilisation et le but de l'attribut src et de l'attribut href. L'attribut src est utilisé pour intégrer des ressources téléchargeables et suspendra le rendu des pages pendant le processus de chargement de la page ; tandis que l'attribut href est utilisé pour spécifier la relation entre le document et les ressources externes, principalement utilisé pour introduire des feuilles de style et créer des hyperliens. Voici quelques exemples de code : 🎜
    <!-- 使用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>
    Copier après la connexion
    🎜 En utilisant correctement src et href, nous pouvons avoir un meilleur contrôle sur les performances de la page et sur la façon dont les ressources externes sont chargées. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifient src et href ? Que signifient src et href ? Aug 16, 2023 pm 05:00 PM

src et href valent respectivement 1. src est l'abréviation de source, qui est utilisée pour spécifier le chemin des ressources externes. Elle est généralement utilisée pour intégrer des fichiers externes, tels que des images, des audios, des vidéos, etc. L'attribut src est généralement. utilisé sur les balises img, script, iframe et autres. href est l'abréviation de référence hypertexte, qui est utilisée pour spécifier le chemin de la ressource cible du lien hypertexte. L'attribut href est généralement utilisé sur des balises telles que a et link.

Comment obtenir des propriétés littérales entières en Python sans SyntaxError ? Comment obtenir des propriétés littérales entières en Python sans SyntaxError ? Aug 20, 2023 pm 07:13 PM

Pour obtenir un attribut littéral au lieu d'une erreur de syntaxe, utilisez un espace ou des parenthèses. Les littéraux entiers sont un partif des littéraux numériques en Python.

Comment renommer les propriétés de JSON en utilisant Gson en Java ? Comment renommer les propriétés de JSON en utilisant Gson en Java ? Aug 27, 2023 pm 02:01 PM

L'annotation Gson@SerializedName peut être sérialisée en JSON et avoir la valeur de nom fournie comme nom de champ. Cette annotation peut remplacer n'importe quelle FieldNamingPolicy, y compris la politique de dénomination de champ par défaut qui peut avoir été définie sur l'instance Gson. Différentes stratégies de dénomination peuvent être définies à l'aide de la classe GsonBuilder. Syntaxe@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedNameExample importcom.google.gson.annotations.*;

Fonction dir() de Python : afficher les propriétés et les méthodes d'un objet Fonction dir() de Python : afficher les propriétés et les méthodes d'un objet Nov 18, 2023 pm 01:45 PM

Fonction dir() de Python : afficher les propriétés et les méthodes d'un objet, exemple de code spécifique requis Résumé : Python est un langage de programmation puissant et flexible, et ses fonctions et outils intégrés offrent aux développeurs de nombreuses fonctionnalités pratiques. L'une des fonctions très utiles est la fonction dir(), qui nous permet de visualiser les propriétés et les méthodes d'un objet. Cet article présentera l'utilisation de la fonction dir() et démontrera ses fonctions et utilisations à travers des exemples de code spécifiques. Texte : la fonction dir() de Python est une fonction intégrée.

Que faire si les propriétés du disque Win11 sont inconnues Que faire si les propriétés du disque Win11 sont inconnues Jul 03, 2023 pm 04:17 PM

Que dois-je faire si les propriétés du disque de Win11 sont inconnues ? Récemment, les utilisateurs de Win11 ont constaté que le système provoquait une erreur de disque lors de l'utilisation de leur ordinateur. Et comment le résoudre ? De nombreux amis ne savent pas comment fonctionner en détail. L'éditeur a compilé ci-dessous les étapes pour résoudre l'erreur de disque Win11. Si vous êtes intéressé, suivez l'éditeur pour lire ci-dessous ! Étapes pour résoudre l'erreur de disque Win11 1. Tout d'abord, appuyez sur la combinaison de touches Win+E du clavier ou cliquez sur l'Explorateur de fichiers dans la barre des tâches. 2. Dans la barre latérale droite de l'Explorateur de fichiers, recherchez le côté et cliquez avec le bouton droit sur le local. disque (C :), dans l'élément de menu qui s'ouvre, sélectionnez Propriétés ; 3. Fenêtre Propriétés du disque local (C :), passez à Outils ;

Quel est le rôle de l'attribut pageXOffset en JavaScript ? Quel est le rôle de l'attribut pageXOffset en JavaScript ? Sep 16, 2023 am 09:17 AM

Si vous souhaitez obtenir les pixels vers lesquels le document défile à partir du coin supérieur gauche de la fenêtre, utilisez les propriétés pageXoffset et pageYoffset. Utilisez pageXoffset pour les pixels horizontaux. Exemple Vous pouvez essayer d'exécuter le code suivant pour apprendre à utiliser l'attribut pageXOffset en JavaScript - Démonstration en direct<!DOCTYPEhtml><html> <head> <style> &amp

syntaxe de l'attribut inférieur en CSS syntaxe de l'attribut inférieur en CSS Feb 21, 2024 pm 03:30 PM

Syntaxe de l'attribut bottom et exemples de code en CSS En CSS, l'attribut bottom est utilisé pour spécifier la distance entre un élément et le bas du conteneur. Il contrôle la position d'un élément par rapport au bas de son élément parent. La syntaxe de l'attribut bottom est la suivante : element{bottom:value;} où element représente l'élément auquel le style doit être appliqué et value représente la valeur inférieure à définir. la valeur peut être une valeur de longueur spécifique, telle que des pixels

Introduction aux attributs du fil du désespoir de Hearthstone Introduction aux attributs du fil du désespoir de Hearthstone Mar 20, 2024 pm 10:36 PM

Fil du désespoir est une carte rare du chef-d'œuvre de Blizzard Entertainment "Hearthstone" et a une chance d'être obtenue dans le pack de cartes "Wizbane's Workshop". Peut consommer 100/400 points de poussière arcanique pour synthétiser la version normale/or. Introduction aux attributs du Fil du Désespoir de Hearthstone : Il peut être obtenu dans le pack de cartes de l'atelier de Wizbane avec une chance, ou il peut également être synthétisé via de la poussière arcanique. Rareté : Rare Type : Classe de sort : Chevalier de la mort Mana : 1 Effet : Donne à tous les serviteurs un Râle d'agonie : Inflige 1 dégât à tous les serviteurs

See all articles