Explication détaillée de l'utilisation de base de la balise d'image img en HTML/XHTML

La balise image permet d'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 :

<img  src="/static/imghw/default1.png"  data-src="url"  class="lazy"   / alt="Explication détaillée de l'utilisation de base de la balise d'image img en HTML/XHTML" >

La balise détermine la source de l'image via l'attribut src. , l'url est une adresse d'image relative ou absolue.

Attributs de la balise d'image :
src : source de l'image, 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 Web.
Par conséquent, c'est une bonne pratique d'ajouter un attribut de remplacement de texte alternatif significatif à chaque image.

Pratique d'utilisation des balises
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" :

<h3 id="文章题目">文章题目</h3>  
<p>文章具体内容</p>  
<p><img src="/static/imghw/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵" /></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 :

<img src="/static/imghw/default1.png"  data-src="images/flower_1.jpg"  class="lazy"   alt="花朵"    style="max-width:90%"  style="max-width:90%" />

Conseils
Dans des circonstances normales, l'attribut de taille de l'image sera ignoré et la taille de l'image originale sera affichée par défaut ou le navigateur adaptera la affichage de la taille. 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.

Pour des explications plus détaillées sur l'utilisation de base de la balise d'image img en HTML/XHTML, veuillez prêter attention au site Web PHP chinois pour les articles connexes !