![\"Balises](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543801989409.png\")
<\/p>\n![\"Ferrari](\"car.png\")
<\/pre>\n
Balises d'images HTML
Sep 04, 2024 pm 04:20 PM
HTML est un document en texte brut qui permet à plusieurs formats de langages de programmation d'implémenter des applications Web, qui utilisent des balises pour décrire les fonctionnalités des pages Web. L'une de ces balises essentielles est la balise d'image qui permet aux développeurs d'incorporer des fichiers image dans le code pour afficher les images respectives sur la page Web. Cette syntaxe est , où 'image' est le nom de la balise et 'src=' doit se voir attribuer l'URL de l'image requise. Dans cette rubrique, nous allons découvrir les balises d'image HTML.
Ajout d'images aux pages Web
Vous pouvez ajouter un IMG à une page HTML en utilisant le bouton balise dans le document HTML?; voici la syntaxe :
<img src= enter the IMG URL here >
Ici, l'IMG indique au navigateur que la balise concerne l'ajout d'un IMG au document, et le ? src= ? précise où télécharger l'image.
Exemple de page avec une image
Code?:
<!DOCTYPE html> <html> <head> <title> Example HTML IMG Tag </title> </head> <body> <img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg" alt = " Software development icon " height = " 150 " width = "140" /> </body> </html>
Sortie?:
Un fait intéressant à propos de ces pages HTML est que lorsque vous utilisez la balise IMG, l'image n'est pas insérée dans ladite page web ; au lieu de cela, il crée un espace de stockage où l'image est placée une fois téléchargée.
Prise en charge du navigateur et compatibilité avec les attributs
Comme vous pouvez vous y attendre, tous les navigateurs modernes prennent en charge les images et l'utilisation de balises IMG. Parfois, les navigateurs mobiles redimensionnent l'image pour l'adapter à l'écran si l'image n'est pas définie comme réactive.
Concernant la compatibilité des attributs avec HTML 4.01 et HTML5 plus récent, la plupart des balises fonctionneront, à l'exception de l'alignement, de la bordure, de l'hspace et de l'espace, qui ne sont tout simplement pas pris en charge dans cette dernière.
Images en lien?:
Parfois, vous souhaiterez qu'une image fonctionne comme un lien vers une autre page. Vous pouvez le faire en ajoutant la balise IMG à l'intérieur du champ étiquette.
Définir une image comme arrière-plan d'une page Web
En utilisant la propriété CSS background-image dans l'élément Body de la page, vous pouvez attribuer une image comme image d'arrière-plan d'une page Web.
<body style="background-image:url(‘car.jpg');"> <h1>Background Image </h1> </body>
Définir une image pour qu'elle flotte dans le navigateur
Nous pouvons utiliser la propriété CSS ??float?? pour définir une image qui flotte à l'intérieur n'importe où dans la fenêtre du navigateur. Regardons un exemple qui vous aidera à comprendre.
<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">
Ici, l'image de la voiture flottera à droite du texte.
<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">
Ici, l'image de la voiture flottera sur le c?té gauche du texte.
Attributs de la balise d'image
Voici les attributs d'une balise d'image.
1) Aligner
Valeurs possibles?: Haut, Bas, Milieu, Gauche ou Droite.
L'attribut alight est utilisé pour spécifier l'alignement d'une image sur la page Web.
2) Alt
Type de valeur?: Texte
Alt est utilisé pour spécifier le texte alternatif d'une image de page Web. Dans les cas où l'affichage d'un IMG est impossible, le navigateur affiche ce texte à l'utilisateur. Les moteurs de recherche tels que Google et Bing utilisent ce texte alternatif pour afficher les résultats dans la recherche d'images.
3) Frontière
Type de valeur?: Pixels
Il est utilisé pour créer une bordure d'épaisseur définie par l'utilisateur autour de l'image. Cela ne fonctionne pas en HTML5.
4) Origine croisée
Type de valeur?:Utilisation anonyme-Credentials
Cet attribut est utilisé lorsque nous voulons spécifier comment les photos d'origine croisée doivent être traitées. Ceci est principalement utilisé dans les cas où des éléments de canevas d'applications Web JavaScript sont utilisés.
5) Hauteur
Type de valeur?: Pourcentages ou pixels
Celui-ci est utilisé pour désigner la hauteur de l'image dans la page Web HTML.
6) hspace
Type de valeur?: Pixels
Non pris en charge en HTML5, l'attribut hspace est utilisé pour spécifier en pixels la quantité d'espace blanc à ajouter à gauche et à droite de l'image insérée.
7) ismap
Type de valeur?:URL d'une page
ismap nous avons utilisé pour définir ladite image comme une image cliquable c?té serveur. Lorsque l'utilisateur clique (ou appuie) à l'intérieur de l'image, les navigateurs envoient les coordonnées du clic (ou de l'appui) au serveur Web sous forme d'URL.
8) Longuedesc
Type de valeur?: URL
Longdesc donne une description détaillée d'une image à l'aide d'une URL. L'URL dans l'attribut est utilisée comme description de l'image.
9)src
Type de valeur?: URL
src signifie source. Il permet de préciser l'adresse à partir de laquelle le navigateur récupérera l'image ; cette URL peut être appliquée à une image dans un répertoire sur le même serveur. Il peut également stocker une image sur un serveur tiers avec un nom de domaine différent.
10) utiliser la carte
Type de valeur?: #mapname
L'attribut usemap définit l'image pour une image cliquable c?té client. Un usemap est toujours utilisé avec les balises HTML de carte et de zone.
11) vspace
Type de valeur?: Pixels
Non pris en charge en HTML5, l'attribut Vspace est utilisé pour définir le nombre de pixels utilisés comme espaces en haut et en bas de l'image sur la page Web.
12) Largeur
Type de valeur?: Pixels
Comme son nom l'indique, l'attribut width est utilisé pour spécifier la largeur d'une image à l'intérieur de la page Web HTML.
Conclusion – Balises d'image HTML
Maintenant que nous avons vu comment les images sont ajoutées aux pages HTML et comment définir leurs attributs, nous pouvons créer des pages Web attrayantes dans un projet Web.
En plus d'ajouter simplement une touche visuelle à une page Web, les images sont précieuses car elles contribuent à l'optimisation des moteurs de recherche. L'ajout de balises alt et de descriptions appropriées aux images aide les moteurs de recherche à mieux comprendre le contenu d'une page Web et à améliorer le classement d'une page Web dans de nombreux cas.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Pourquoi mon image n'appara?t-elle pas dans HTML?
Jul 28, 2025 am 02:08 AM
L'image non affichée est généralement causée par un mauvais chemin de fichier, un nom ou une extension de fichier incorrect, des problèmes de syntaxe HTML ou un cache de navigateur. 1. Assurez-vous que le chemin SRC est cohérent avec l'emplacement réel du fichier et utilisez le chemin relatif correct; 2. Vérifiez si le cas de fichier et l'extension correspondent exactement et vérifiez si l'image peut être chargée en entrant directement l'URL; 3. Vérifiez si la syntaxe TAG IMG est correcte, assurez-vous qu'il n'y a pas de caractères redondants et que la valeur d'attribut ALT est appropriée; 4. Essayez de forcer l'actualisation de la page, de nettoyer le cache ou d'utiliser le mode incognito pour éliminer les interférences du cache. Le dépannage dans cet ordre peut résoudre la plupart des problèmes d'affichage d'image HTML.
Comment créer une liste non ordonnée dans HTML?
Jul 30, 2025 am 04:50 AM
Pour créer une liste HTML non ordonnée, vous devez utiliser une balise pour définir un conteneur de liste. Chaque élément de liste est enveloppé d'une balise et le navigateur ajoutera automatiquement des balles; 1. Créez une liste avec une balise; 2. Chaque élément de liste est défini avec une balise; 3. Le navigateur génère automatiquement des symboles de points par défaut; 4. Les sublilistes peuvent être mis en ?uvre par le biais de la nidification; 5. Utilisez l'attribut de type de style liste de CSS pour modifier le style de symbole, tel que le disque, le cercle, le carré ou aucun; Utilisez ces balises correctement pour générer une liste standard non ordonnée.
Comment utiliser l'attribut satisfait?
Jul 28, 2025 am 02:24 AM
THECONTANTITABLEATTRIBUTEMAKESANYHTMLEMéMéRITéBYADDING CONTANTITALLE = "VRUE", permettant à la réception de codomente detteurthebrowser.
L'importance du HTML sémantique pour le référencement et l'accessibilité
Jul 30, 2025 am 05:05 AM
SémantichtmlimprovesbothseoandaccessibilityByusing a été ultime
Définition des vocabulaires personnalisés en utilisant le balisage HTML5 Schema.org.
Jul 31, 2025 am 10:50 AM
La balise Schema.org aide les moteurs de recherche à comprendre le format de données structuré du contenu de la page Web via des balises sémantiques (telles que la portée de l'élément, le type d'élément, ItemProp); Il peut être utilisé pour définir le vocabulaire personnalisé, les méthodes incluent l'extension des types existants ou l'utilisation de Type supplémentaire pour introduire de nouveaux types; Dans les applications réelles, en gardant la structure claire, en utilisant d'abord les attributs officiels, tester la validité du code et garantir que les types personnalisés sont accessibles; Les précautions comprennent l'acceptation de soutien partiel, d'éviter les erreurs d'orthographe et de choisir un format approprié tel que JSON-LD.
Comment créer un champ de saisie de recherche dans un formulaire HTML
Aug 02, 2025 pm 04:44 PM
UsetheelementwithinatagtocreatEasanticsearchField.2. y comprisaForAccesssibility, settheform'sactionandMethod = "get" attributestosenddatatoesearchndpointwithAsharableArl.3.Addname = "Q" todefinetheQueryParameter, usePlaceHolderToguiseUd
Quel est le but de l'attribut REL dans une balise de liaison dans HTML?
Aug 03, 2025 pm 04:50 PM
rel = "Stylesheet" linkSsssFilesForSTylingThepage; 2.rel = "Preload" HintstopreloadCriticalResourcesForPerformance; 3.rel = "icon" setthewebsite’sfaviCon; 4.rel = "alternate" fournit la réversion desstiètes; 5.rel = & Qu
Comment gérer un bouton cliquer avec onClick?
Jul 30, 2025 am 05:16 AM
Utilisez l'attribut onClick dans HTML pour lier directement les événements de clic, qui conviennent aux scénarios simples mais qui ne sont pas propices à la maintenance du code; 2. La fonction d'attribut d'attribut ONClick des éléments en JavaScript est plus propice aux structures et aux comportements séparant, mais écrasera le gestionnaire d'événements précédent; 3. Il est recommandé d'utiliser la méthode AddeveventListener pour prendre en charge la surveillance des événements multiples et de mieux contr?ler le flux d'événements, et devrait fonctionner après le chargement du DOM pour éviter les erreurs courantes telles que l'accès prématuré aux éléments ou les conflits de devis en HTML. Par conséquent, ONClick convient aux débutants et aux petits projets, tandis qu'AdveventListener est plus adapté aux applications complexes.
