Maison > interface Web > tutoriel CSS > src (attribut HTML)

src (attribut HTML)

William Shakespeare
Libérer: 2025-02-26 08:32:11
original
594 Les gens l'ont consulté

L'attribut src dans HTML spécifie l'emplacement d'une ressource intégrée, les plus souvent des images, mais également applicables à l'audio, à la vidéo et aux iframes. Cet emplacement peut être relatif à la page Web actuelle, par rapport au répertoire racine du serveur, ou à une URL complète.

chemins relatifs:

  • même répertoire: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993373573.jpg" class="lazy" alt="src (HTML attribute) "> (image.jpg est dans le même dossier que le fichier html).
  • un niveau vers le haut: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993391833.jpg" class="lazy" alt="src (HTML attribute) "> (image.jpg est un répertoire au-dessus du fichier HTML actuel).
  • dans la racine du site Web: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993464780.jpg" class="lazy" alt="src (HTML attribute) "> (image.jpg est dans le dossier /images à la racine du site Web).

URL absolues:

Pour les images hébergées sur un autre serveur, utilisez une URL complète: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174052993538767.jpg" class="lazy" alt="Image Description">.

Exemple:

Le code suivant affiche une image nommée myimage.png située dans le même répertoire que le fichier html:

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174052995196248.png"  class="lazy" alt="src (HTML attribute) " />
Copier après la connexion

Considérations clés:

  • alt Attribut: Incluez toujours l'attribut alt pour fournir du texte alternatif pour les lecteurs d'écran et lorsque l'image ne se charge pas. Ceci est crucial pour l'accessibilité.
  • Types de fichiers: L'attribut src doit refléter avec précision le type de fichier (par exemple, .jpg, .png, .gif, .mp4, .mp3).
  • Gestion des erreurs: Si la ressource spécifiée n'est pas trouvée, le navigateur affiche généralement une icône d'image cassée ou rien du tout. Une bonne gestion des erreurs peut impliquer des sources d'images alternatives ou des mécanismes de secours.
  • Sécurité: Les ressources d'intégration de différents domaines peuvent être soumises aux politiques de sécurité du navigateur (COR).

Questions fréquemment posées (FAQ):

Bien que le texte fourni couvre de nombreux aspects de l'attribut src, voici un résumé concis abordant les points clés:

  • Qu'est-ce que src? src (Source) Spécifie l'URL d'une ressource intégrée.
  • quelles balises utilisent src? <img alt="src (attribut HTML)" >, <audio></audio>, <video></video>, <iframe></iframe>, et d'autres incorporant du contenu externe.
  • Que se passe-t-il si src est manquant? L'image (ou une autre ressource embarquée) ne s'affiche pas.
  • peut src gérer différents domaines? Oui, mais soumis à des restrictions COR.
  • Sources multiples? Utiliser des éléments <source></source> dans les balises <picture></picture>, <audio></audio> ou <video></video> pour plusieurs sources.
  • Les URL relatives par rapport aux URL absolues? Les URL relatives sont relatives à la page actuelle; Les URL absolues sont des URL complètes.
  • src vs href? src Contenu intégré ; href crée un lien au contenu.
  • Taille maximale du fichier? Aucune limite stricte, mais les fichiers plus grands ont un impact sur les temps de chargement.
  • https à http? pas recommandé en raison de risques de sécurité (avertissements de contenu mixte).

Cette réponse révisée fournit une explication plus rationalisée et aborde la FAQ d'une manière plus claire et plus concise.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal