Explication détaillée de l'utilisation de base de la balise d'image img

Cet article présente principalement l'utilisation de base de la balise d'image img en HTML/XHTML. L'article répertorie certains attributs couramment utilisés de la balise img. it

La balise image est utilisée pour afficher une image sur une page web.
Balise d'image HTML/XHTML
En XHTML, la balise est une balise non appariée.

Syntaxe de base :

XML/HTMLCodeCopier le contenu dans le presse-papier

1. <img src="url" />

utilise l'attribut src pour déterminer la source de l'image, et l'url est une adresse d'image relative ou absolue.

Attribut de balise d'image :
src : Image source, obligatoire. Spécifiez l'adresse source de l'image affichée, qui peut être une adresse relative ou une adresse absolue.
alt : texte alternatif, peut être omis. Il est utilisé pour remplacer le texte affiché lorsque l'image ne peut pas être affichée ou que le navigateur bloque l'image.
titre : texte d'invite de l'image, peut être omis. Lorsque la souris survole l'image, le texte pertinent s'affichera.
width : La largeur de l’affichage de l’image peut être omise. Les unités sont des pixels.
hauteur : La hauteur de l'affichage de l'image, qui peut être omise. Les unités sont des pixels.

Attribut de remplacement de texte (alt)
Attribut de remplacement de texte de la balise d'image alt Bien qu'il ne s'agisse pas d'un attribut obligatoire, c'est un attribut très important. Lorsque le navigateur ne parvient pas à lire l'image pour une raison quelconque, ce texte alternatif s'affichera pour remplacer l'image d'origine afin de fournir les informations pertinentes perdues sur l'image. Cet attribut aide également les utilisateurs utilisant des navigateurs texte uniquement à comprendre le contenu de la page.
Par conséquent, c'est une bonne pratique d'ajouter un attribut de remplacement de texte alternatif significatif à chaque image.

Utilisation des balises Exercice
Créez un dossier images sous le dossier e:html pour stocker les fichiers image. Cliquez avec le bouton droit sur l'image ci-dessous et sélectionnez "Enregistrer l'image sous" pour enregistrer l'image dans le dossier images pour une utilisation ultérieure.

Modifiez notre petit exemple XHTML 1.html et apportez les modifications suivantes dans la balise p avec id="main-content" :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. < h3 >Titre de l'articleh3>

2. <p>Contenu détaillé de l'articlep>

3. <p><img src="images/flower_1.jpg" alt="Fleurs" /> p>

De cette façon, nous affichons une image sur la page Web.

Spécifiez la taille d'affichage de l'image
Vous pouvez ajouter l'attribut width ou height à la balise pour spécifier manuellement la taille d'affichage de l'image :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <img src="images/flower_1.jpg" alt="Fleur" largeur="350" hauteur="270" / >

Conseils
Dans des circonstances normales, l'attribut de taille de l'image sera ignoré et la taille de l'image d'origine sera affichée par défaut ou le Le navigateur adaptera la taille d’affichage. La spécification d’une taille d’affichage d’image inappropriée peut entraîner une distorsion de l’image.
Comme le chargement des images prend un certain temps, vous devez essayer de réduire la taille de l'image tout en garantissant la qualité de l'image pour obtenir une bonne expérience d'accès utilisateur.

Lecture étendue
Pixel : Nous pouvons clairement considérer un pixel comme le plus petit point qu'un ordinateur peut afficher. Par exemple, la résolution d'écran que nous disons souvent est de 1024 * 768. que l'écran comporte 1024 (pixels) points horizontalement et 768 (pixels) points verticalement. Lorsqu'il est utilisé comme unité, il est généralement écrit par défaut sous la forme pix.

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!