Image HTML

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt="Pulpit rock" width="304" height="228">

</body>
</html>

Exécuter l'instance»

Cliquez sur « Exécuter Bouton "Exemple" pour afficher des exemples en ligne

Exemples en ligne

Cet exemple montre comment afficher des images dans une page Web.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
一个图像:
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="/upload/course/000/000/010/58046a41c6e3c115.gif" alt="Computer man" width="48" height="48"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Insérer des images provenant de différents emplacements

Cet exemple montre comment afficher des images provenant d'autres dossiers ou serveurs dans une page Web.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>一个来自文件夹中的图像:</p>
<img src="/upload/course/000/000/010/58046b14a8b9f738.gif" alt="Google Chrome" width="33" height="32"><p>一个来自php中文网的图像:</p>
<img src="/upload/course/000/000/010/58046c29b47ef575.png" alt="php.cn" width="336" height="69">

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

(D'autres exemples peuvent être trouvés au bas de cette page.)

Images HTML - Balise d'image (<img>) et attribut source (Src)

Dans HTML, images Défini par 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.

Pour afficher une image sur la page, vous devez utiliser l'attribut source (src). src fait référence à « source ». La valeur de l'attribut source est l'adresse URL de l'image.

La syntaxe pour définir une image est la suivante :

<img src="url" alt="some_text">

L'URL fait référence à l'emplacement où l'image est stockée. Si une image nommée "../style/images/boat.gif" se trouve dans le répertoire images de www.php.cn, son URL est http://www.php.cn/images/boat.gif.

Le navigateur affiche l'image dans le document partout où la balise d'image apparaît. Si vous placez une balise d'image entre deux paragraphes, le navigateur affichera d'abord le premier paragraphe, puis l'image et enfin le deuxième paragraphe.

HTML Image - 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="../style/images/boat.gif" alt="Big Boat">

Lorsque le navigateur ne parvient pas à charger l'image, l'attribut de texte de remplacement indique aux lecteurs les informations qu'ils ont perdues. À ce stade, le navigateur affichera ce texte alternatif à la place de l'image. C'est une bonne pratique d'ajouter l'attribut de texte alternatif à 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 de hauteur et de 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">

Astuce : C'est une bonne habitude de préciser la hauteur et la largeur de votre 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 peut être détruite lors du chargement de la page.

Notes de base - Conseils utiles :

Remarque : Si un fichier HTML contient dix images, alors pour afficher correctement la page, il a besoin de Chargement 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.

Plus d'exemples

1. Organiser les images

Cet exemple montre comment organiser les images dans le texte.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

2. Image flottante
Cet exemple montre comment faire flotter une image à gauche ou à droite d'un paragraphe.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

3. Définir un lien d'image
Cet exemple montre comment utiliser une image comme lien.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>创建图片链接:
<a href="http://www.php.cn/html/html-tutorial.html">
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.php.cn/html/html-tutorial.html">
<img border="0" src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

4. Créer une image cliquable
Cet exemple montre comment créer une image cliquable avec des zones cliquables. Chacun de ces champs est un lien hypertexte.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/upload/course/000/000/010/58046db4ca85a572.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne