Image HTML
Image HTML - Balise d'image (<img>)
En HTML, les images sont représentées par la définition de la balise <img>
<img> est une balise vide, ce qui signifie qu'elle ne contient que des attributs et n'a pas de balise de fermeture.
Image HTML - Attribut Source (Src)
Pour afficher une image sur la page, vous devez utiliser l'Attribut Source (src) . src fait référence à « source ». Désigne l'emplacement où est stockée l'image,
Si l'image et le texte HTML sont dans le même répertoire : par exemple index.html et img.jpg
Ecriture : <img src= "img.jpg">
Les images et HTML ne sont pas dans le même répertoire : il y a deux situations :
1 L'image img.jpg est dans le dossier images, et l'index. Les dossiers .html et images sont dans le même répertoire
Écrit : <img src="images/img.jpg">
2 L'image img.jpg est dans le dossier. images, index.html est dans le dossier du contrôleur, images Dans le même répertoire que le dossier du contrôleur
Ecriture : <img src="../images/img.jpg">
Si la source provient d'Internet, il faut utiliser le chemin absolu
pour écrire : <img src="http://www.baidu.com/pic/img.jpg">
Image HTML - Attribut Alt
L'attribut alt est utilisé pour définir une chaîne de texte remplaçable préparé pour l'image.
La valeur de l'attribut de texte de remplacement est définie par l'utilisateur.
<img src="1.jpg" alt="Afficher lorsque l'image ne peut pas être affichée">
Lorsque le navigateur ne peut pas charger l'image, l'attribut de texte de remplacement indique aux lecteurs les informations qui leur manquent. À ce stade, le navigateur affichera ce texte alternatif à la place de l'image. C'est une bonne pratique d'ajouter l'attribut de texte alt à 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.
Image HTML - Définir la hauteur et la largeur de l'image
Les attributs hauteur (hauteur) et largeur (largeur) sont utilisés pour définir la hauteur et la largeur de l’image.
L'unité par défaut de la valeur de l'attribut est le pixel :
<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width= "304" height="228">
Conseil : C'est une bonne habitude 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 risque d'être détruite lors du chargement de la page,
Notes de base
Remarque : Si un fichier HTML contient dix images, afin de les afficher correctement Cette page doit charger 11 fichiers. 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 le. La balise d'image affichera une image cassée.
Exemple
Ajouter une image d'arrière-plan à notre page Web
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body background="http://imglf0.ph.126.net/1EnYPI5Vzo2fCkyy2GsJKg==/2829667940890114965.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html>
Exécutez le programme et voyez s'il y a des changements
Exemple
Cet exemple montre comment Redimensionnez les images à différentes tailles.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="50" height="50"> <br /> <img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="100" height="100"> <br /> <img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="200" height="200"> <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p> </body> </html>
Exécutez le programme et voyez
Exemple
Utilisez l'image pour créer un lien hypertexte
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>创建图片链接: <a href="http://www.php.cn/"> <img src="http://img3.redocn.com/20100401/Redocn_2010022518194991.jpg" alt="HTML 教程" width="100" height="100"></a></p> </body> </html>
Exécutez le programme et cliquez sur l'image pour voir
Exemple
Cet exemple montre comment convertir une image ordinaire Définir comme carte d'image
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p> <a href=""> <img src="http://p11.qhimg.com/t010fae31f5653bffe7.jpg" ismap /> </a> </body> </html>
Exécuter Exécuter et voir
Balise d'image HTML
| 标签 | 描述 |
| <img> | 定义图像。 |
| <map> | 定义图像地图。 |
| <area> | 定义图像地图中的可点击区域。 |
Trouvez une image et placez-la dans votre répertoire désigné et essayez de l'insérer dans votre page Web
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
