English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manuel de référence HTML

Complexe des balises HTML

HTML: <img> balise

Le balise <img> en HTML définit une image dans un document HTML. Ce balise est également couramment appelée l'élément <img>.

Exemple en ligne

Comment insérer une image :

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<img　src="pig.gif"　alt="pig　face"　width="32" height="32">
</body>
</html>
Vérifiez ici ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Tous les navigateurs populaires prennent en charge le marqueur <img>.

Différences entre l'attribut alt et title de l'image :

  • L'attribut alt de l'image est le texte de suggestion qui apparaît lorsque l'image ne peut pas être affichée correctement.

  • L'attribut title de l'image est le texte de suggestion qui apparaît lorsque le curseur de la souris est déplacé sur l'élément.

Définition et instructions d'utilisation du marqueur

Le marqueur <img> définit une image dans une page HTML.

Le marqueur <img> a deux attributs obligatoires : src et alt.

Le marqueur <img> peut prendre en charge (selon le navigateur) les formats d'image suivants : jpeg, gif, png, apng, svg, bmp, bmp ico, png ico.

Remarque :Techniquement, l'image n'est pas insérée dans la page HTML, mais liée à la page HTML. Le rôle du marqueur <img> est de créer un placeholder pour l'image appelée.

Astuce :Ajouter un lien à une autre page document en enveloppant le marqueur <img> dans un marqueur <a>.

HTML 4.01 et HTML5Différences entre

HTML5 Les attributs suivants ne sont pas pris en charge : align, border, hspace, longdesc, vspace.

Dans HTML 4.01 Dans celui-ci, les attributs suivants : align, border, hspace, vspace sont obsolètes.

Différences entre HTML et XHTML

Dans HTML, le marqueur <img> n'a pas de balise de fermeture.
Dans XHTML, il est nécessaire de fermer correctement le marqueur <img>.

Attribut

New : HTML5 Nouvel attribut ajouté.

AttributValeurDescription
aligntop
　bottom
　middle
　left
　right		HTML5 Non supporté. HTML 4.01 Obsolète. 　 　Définir comment aligner l'image autour du texte environnant.
alttextDéfinir le texte de remplacement de l'image.
borderpixelsHTML5 Non supporté. HTML 4.01 Obsolète. 　 　Définir la bordure autour de l'image.
crossoriginHTML5anonymous
use-credentials		Définir les attributs de croix-domaine de l'image.
heightpixelsDéfinir la hauteur de l'image.
hspacepixelsHTML5 Non supporté. HTML 4.01 Obsolète. 　 　Définir l'espace vide à gauche et à droite de l'image.
ismapismapDéfinir l'image comme une carte graphique serveur.
longdescURLHTML5 Non supporté. HTML 4.01 Obsolète. 　 　Pointer vers l'URL contenant un document de description de l'image long.
srcURLDéfinir l'URL de l'image à afficher.
usemap#mapnameDéfinir l'image comme une carte graphique client.
vspacepixelsHTML5 Non supporté. HTML 4.01 Obsolète. 　 　Définir l'espace vide en haut et en bas de l'image.
widthpixelsDéfinir la largeur de l'image.

Attributs globaux

Balise <img> supporte Attributs globaux de HTML.

Attributs événement

Balise <img> supporte Attributs événement de HTML.

Essayer l'exemple en ligne

Aligner l'image
Ce exemple démontre comment aligner une image dans le texte.

Flotter l'image
Ce exemple démontre comment faire flotter une image à gauche ou à droite du paragraphe.

Définir le lien de l'image
Ce exemple démontre comment utiliser une image comme un lien.

Créer une carte graphique d'image
Cette exemple montre comment créer une carte graphique d'image avec des zones cliquables. Chaque zone est un lien hypertexte.

Articles associés

Tutoriel HTML :Image HTML

Guide HTML DOM : Objet Image

HTML: <input> baliseHTML: <iframe> balise