Introduction détaillée sur la façon d'ajouter des images en HTML

Dans la production de sites Web, les images sont l'un des éléments très importants, ajoutant plus d'effets visuels et de beauté au site Web. Par conséquent, comment ajouter des images en HTML est devenu une question importante. Cet article présentera aux lecteurs comment ajouter des images en HTML en détail, dans l'espoir de les aider à mieux maîtriser les compétences de production de sites Web.

1. Syntaxe de référence d'image de base

En HTML, l'ajout d'une image consiste en fait à ajouter une syntaxe de référence d'image au document HTML. En HTML, utilisez la balise pour référencer une image. La syntaxe de base est la suivante :

Parmi eux, l'attribut src représente l'adresse de l'image référencée, qui peut être le chemin d'un image locale ou un pointeur vers l'adresse de l'image du serveur distant. L'attribut alt représente les informations de description de l'image. Si l'image ne peut pas être affichée normalement pour une raison quelconque, les informations de l'attribut alt remplaceront les informations d'affichage d'origine de l'image.

Par exemple, si vous souhaitez ajouter une image nommée exemple.png au HTML et que l'image se trouve dans le dossier images sous C: du disque dur local, alors le code utilisant la syntaxe de référence d'image est le suivant :

En HTML, il existe d'autres attributs lors de l'utilisation d'images, tels que la largeur indiquant la largeur de l'image, et la hauteur indiquant la hauteur de la bordure de l'image représente la taille de la bordure de l'image, etc. Grâce à ces propriétés, vous pouvez avoir plus de paramètres et de contrôle sur l'image.

2. Chemins relatifs et chemins absolus

Dans ce qui précède, nous avons démontré la méthode de référencement des images en utilisant des chemins absolus dans l'attribut src. En fait, dans la production de sites Web, nous pouvons également utiliser des chemins relatifs pour référencer des images. Les chemins relatifs sont relatifs au chemin du document HTML. Cela peut rendre la citation d’images sur le site Web plus facile et plus pratique.

Il existe deux types de chemins relatifs, à savoir les chemins relatifs absolus et les chemins relatifs relatifs. Parmi eux, le chemin relatif absolu signifie que lors du référencement de l'image, elle saute d'abord vers un autre répertoire, puis effectue une référence relative basée sur le répertoire. Un chemin relatif est référencé par rapport au document actuel.

Prenons le répertoire de fichiers comme exemple. S'il existe le répertoire de fichiers suivant :

home/

|____ index.html
|____ images/
        |____ pic1.jpg
        |____ pic2.jpg

Pour référencer l'image pic1.jpg sous le dossier images dans index.html, vous pouvez la référencer via la méthode du chemin relatif. , c'est-à-dire que l'utilisation ./ représente le répertoire de niveau supérieur et le code est le suivant :

3. Format d'image

Dans la production réelle de sites Web, les formats d'image couramment utilisés incluent JPEG, PNG, GIF, etc. Comparé aux deux autres formats, le format JPEG a un taux de compression plus élevé, ce qui permet d'économiser de l'espace de stockage des images. Le format PNG prend en charge les arrière-plans transparents et ne souffre pas du flou ni de la distorsion des images au format JPEG. Le format GIF prend en charge l'animation et les arrière-plans transparents, mais sa profondeur de couleur est inférieure à celle des formats JPEG et PNG.

Afin d'accélérer le chargement de la page et d'améliorer l'expérience du visiteur, les développeurs de sites Web doivent prendre en compte la taille et la qualité de l'image, la vitesse de chargement, les performances et d'autres facteurs lors de la sélection du format d'image.

4. Résumé

Dans cet article, nous avons présenté en détail comment ajouter des images en HTML et présenté aux lecteurs les formats d'image, les chemins relatifs et les chemins absolus. Les images sont l’un des éléments très importants dans la création d’un site Web. Créer de belles images peut ajouter beaucoup de vitalité et d’attrait à un site Web, c’est pourquoi maîtriser les compétences nécessaires pour ajouter des images en HTML est une partie très importante pour les créateurs de sites Web.

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!