Quels sont les attributs de la balise HTML IMG ? Apprenez à utiliser la balise IMG

Quels sont les attributs de la balise HTML IMG ? Savez-vous comment utiliser IMG ? Cet article fournit une explication complète de tous les attributs des balises HTML img. J'espère que tout le monde connaît le HTML et la balise img.

En HTML, les images sont définies par la balise

est une balise vide, ce qui signifie qu'elle ne contient que des attributs et n'a pas de balise de fermeture.

Pour afficher une image sur la page, vous devez utiliser l'attribut source (src). src fait référence à « source ». La valeur de l'attribut source est l'adresse URL de l'image.

La syntaxe pour définir une image est la suivante :

<img src="url" alt="some_text">

L'URL fait référence à l'emplacement où l'image est stockée. Si une image nommée « pulpit.jpg » se trouve dans le répertoire images de www.runoob.com, son URL est http://www.runoob.com/images/yidian.jpg.

Le navigateur affiche l'image dans le document partout où la balise d'image apparaît. Si vous placez une balise d'image entre deux paragraphes, le navigateur affichera d'abord le premier paragraphe, puis l'image et enfin le deuxième paragraphe.

Définition et utilisation

L'élément img intègre une image dans une page Web.

Veuillez noter que techniquement, la balise n'insère pas d'image dans la page Web, mais lie plutôt l'image de la page Web. La balise crée un espace réservé pour l'image référencée. La balise

a deux attributs obligatoires : l'attribut src et l'attribut alt.

Attribut src : Spécifie l'URL de l'image à afficher. L'attribut

alt est utilisé pour définir une chaîne de texte alternatif préparé pour l'image.

La valeur de l'attribut de texte de remplacement est définie par l'utilisateur.

<img src="boat.gif" alt="Big Boat">

Lorsque le navigateur ne peut pas charger l'image, l'attribut de texte de remplacement indique aux lecteurs les informations qu'ils ont perdues. À ce stade, le navigateur affichera ce texte alternatif à la place de l'image. C'est une bonne pratique d'ajouter l'attribut de texte alternatif à toutes les images de la page. Cela permet de mieux afficher les informations et est très utile pour ceux qui utilisent des navigateurs texte uniquement.

Mise à l'échelle de l'attribut HTML img

Partie HTML :

<div class="tu"><img src=“suofang.jpg”>

Mise à l'échelle de l'image de contrôle CSS :

.tu img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
}

Description : Si l'image est supérieure à 640, elle sera automatiquement mise à l'échelle à 640 px. Si elle est inférieure à 640 px, elle sera à la taille réelle. Si la hauteur est supérieure à 720 px, elle sera mise à l'échelle à 720 px. que 720px, ce sera la taille réelle. Remarque : Généralement, la taille des images n'est pas contrôlée.

Affichage centré de l'image : (avec toutes les valeurs des attributs d'alignement attachées)

gauche : Aligner l'image à gauche

droite : Aligner l'image à droite

milieu : aligner l'image au centre

haut : aligner l'image en haut

en bas : aligner l'image en bas

attribut hauteur, largeur

les attributs hauteur (hauteur) et largeur (largeur) sont utilisés pour définir la hauteur et la largeur de l'image.

Les unités par défaut pour les valeurs d'attribut sont les pixels :

<img src="pulpit.jpg" alt="Pulpit rock" width="404" height="258">

Conseil : C'est une bonne pratique de spécifier la hauteur et la largeur de l'image. Si une image a une hauteur et une largeur spécifiées, les dimensions spécifiées seront conservées lors du chargement de la page. Si la taille de l'image n'est pas précisée, la présentation globale de la page HTML peut être détruite lors du chargement de la page.

Notes de base - Conseils utiles :

Remarque : Si un fichier HTML contient dix images, alors pour afficher correctement la page, 11 doivent être chargés dans le document. Le chargement des images prend du temps, notre conseil est donc le suivant : utilisez les images avec prudence.

Remarque : lors du chargement de la page, faites attention au chemin pour insérer l'image de la page. Si la position de l'image ne peut pas être définie correctement, le navigateur ne peut pas charger l'image et la balise d'image affichera une image cassée. image.

Balise d'image HTML :

Définir l'image

Différences entre HTML et XHTML :

En HTML, la balise

En XHTML, la balise doit être correctement fermée.

Dans HTML 4.01, les attributs "align", "border", "hspace" et "vspace" de l'élément image sont obsolètes.

Dans XHTML 1.0 Strict DTD, les attributs "align", "border", "hspace" et "vspace" de l'élément image ne sont pas pris en charge.

[Supplément de connaissances] Attributs facultatifs dans

img :

• align : Spécifie comment organiser l'image en fonction du texte environnant.

• border : Définit la bordure autour de l'image.

• hauteur : Définit la hauteur de l'image.

• hspace : Définissez l'espace blanc sur les côtés gauche et droit de l'image.

• ismap : définit l'image comme une image cliquable côté serveur.

• longdesc : pointe vers une URL contenant un long document de description d'image.

• usemap : Définissez l'image comme image cliquable client.

• vspace : Définit l'espace blanc en haut et en bas de l'image.

• largeur : Définissez la largeur de l'image.

[Recommandations associées]

Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de zéro

Qu'est-ce qu'un fichier HTML ? Une compréhension préliminaire des fichiers HTML

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!