Comment ajouter des images au HTML

HTML est un langage de balisage utilisé pour créer du texte, des images, des vidéos et d'autres contenus dans des pages Web. Les images sont l’un des éléments essentiels de la production de pages Web. Comment ajouter correctement des images est une compétence que tout producteur de pages Web doit maîtriser.

1. Syntaxe de base

Utilisez la balise img pour insérer des images en HTML. Le nom complet de img est "image", ce qui signifie image. Voici la syntaxe de base de la balise img :

<img src="图片文件路径" alt="图片描述">

La balise img a deux attributs principaux : src et alt. src fait référence au chemin du fichier image et alt fait référence à la description textuelle qui sera affichée lorsque la page ne peut pas afficher l'image normalement.

Parmi eux, l'attribut src doit être renseigné, tandis que l'attribut alt est facultatif. Si le chemin de l'image est incorrect, l'image ne sera pas affichée. Si l'attribut alt n'est pas défini, une chaîne de texte dénuée de sens peut s'afficher sur la page où l'image ne peut pas être affichée normalement.

Le chemin de l'image peut être un chemin local ou un chemin réseau. Le chemin local fait référence au chemin du fichier image stocké sur l'ordinateur local ; le chemin réseau fait référence au chemin du fichier image accessible via le réseau, tel que les images téléchargées depuis Internet.

2. Le chemin des images locales

Les chemins des images locales sont divisés en chemins absolus et chemins relatifs. Le chemin absolu spécifie l'emplacement de l'image dans l'ensemble du système de fichiers, et vous devez écrire le chemin complet ; le chemin relatif est la description du chemin à partir du fichier HTML, et il vous suffit d'écrire l'emplacement de l'image par rapport à le fichier HTML.

Voici deux façons d'écrire des chemins d'images locaux.

1. Chemin absolu

Le chemin absolu fait référence à l'emplacement de l'image dans l'ensemble du système de fichiers. Selon le système d'exploitation, le chemin absolu sera légèrement différent. Dans les systèmes Windows, les chemins absolus commencent à partir de la lettre de lecteur, par exemple :

C:\Users\Administrator\Pictures\test.jpg

Sous Mac OS Le chemin du fichier, si l'emplacement de stockage du fichier change, le code doit être modifié.

Chemin relatif

2. Le chemin relatif fait référence à l'emplacement de l'image par rapport au fichier HTML. Plus la structure des répertoires est simple, plus il est facile d'utiliser des chemins relatifs. Dans les fichiers HTML, "." représente le répertoire où se trouve le fichier actuel et ".." représente le répertoire au-dessus du répertoire où se trouve le fichier actuel. Si l'image et le fichier HTML se trouvent dans le même répertoire, chemins relatifs. peut être utilisé, par exemple :

/Users/username/Documents/test.jpg

Si l'image est stockée dans le dossier images du répertoire où se trouve le fichier HTML, le chemin est "./images/test.jpg".

3. Images Internet

Les images Internet font référence aux images obtenues sur Internet. En HTML, vous pouvez utiliser la balise img pour insérer des images réseau tout comme les images locales.

Les images réseau sont généralement représentées par une URL (Uniform Resource Locator), qui est une chaîne composée du nom du protocole, du nom d'hôte, du chemin du fichier et du nom du fichier. Par exemple, l'URL pour accéder aux images Baidu est :

<img src="./images/test.jpg" alt="测试图片">

Parmi elles, « https:// » est le nom du protocole, indiquant que le protocole HTTPS est utilisé pour la transmission des données ; « www.baidu.com » est le nom d'hôte ; ; "img/bd_logo1.png" C'est le chemin et le nom du fichier.

Lors de l'ajout d'images réseau, copiez simplement l'URL de l'image réseau dans l'attribut src de la balise img, par exemple :

https://www.baidu.com/img/bd_logo1.png

Les images Internet sont plus pratiques, ne vous inquiétez pas du problème de chemin, tant que l'URL de l'image est OK, vous pouvez l'utiliser. La balise img insère les images directement dans le HTML.

4. Adaptation de l'image

Dans le processus de production de pages Web, un besoin courant est de rendre la taille de l'image adaptative, afin qu'elle puisse avoir de meilleurs effets d'affichage sur différents appareils et écrans. Les méthodes couramment utilisées incluent l'utilisation de CSS pour définir des propriétés telles que la largeur, la hauteur et la largeur maximale.

Utilisez CSS pour définir la largeur et la hauteur

1. Les attributs width et height en CSS peuvent définir respectivement la largeur et la hauteur de l'image, par exemple :

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

Parmi eux, définir la largeur à 100 % signifie que la largeur de l'image augmentera avec l'espace disponible. Change avec le changement ; le réglage de la hauteur sur auto signifie que la hauteur s'ajustera automatiquement en fonction de la proportion de la largeur, en conservant la proportion d'origine.

Utilisez CSS pour définir la largeur maximale

2. L'utilisation de l'attribut max-width peut faire rétrécir automatiquement l'image proportionnellement lorsqu'elle dépasse une certaine largeur, mais elle ne sera pas plus petite que sa taille d'origine. Par exemple :

<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

Parmi eux, max-width est défini sur 100 %, ce qui signifie que la largeur maximale de l'image ne dépassera pas son espace disponible et ne dépassera pas la taille d'origine. La hauteur est définie sur auto, ce qui signifie que. la hauteur sera automatiquement ajustée en fonction de la proportion de la largeur, en conservant la proportion d'origine.

En bref, lors de l'ajout d'images à des pages Web, vous devez prendre en compte le chemin de l'image, la description de l'image, la taille et l'ajustement de l'image, etc. Tant que vous maîtrisez la syntaxe de base et les méthodes courantes, vous pouvez utiliser de manière flexible la balise img en HTML pour rendre la page Web plus colorée.

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!