Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML-tutoriel HTML-php.cn

Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML

yulia

Libérer： 2018-10-08 10:24:58

original

33642 Les gens l'ont consulté

Lors de la mise en page, vous devez souvent insérer des images dans la page. Savez-vous comment ajouter des images en HTML ? Cet article vous présentera trois méthodes pour insérer des images dans des pages HTML. Les amis intéressés peuvent s'y référer. J'espère qu'il vous sera utile.

Méthode 1. Utilisez la balise img en HTML pour ajouter des images

La plus simple et la plus couramment utilisée consiste à utiliser directement la balise img, et vous pouvez définir la taille de l'image selon les besoins. Le code est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <img  src="img/picture1.jpg"/    style="max-width:90%" height="180px" alt="Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML" >
 </body>
</html>

Copier après la connexion

Rendu :

Explication graphique détaillée de trois méthodes dajout dimages aux pages HTML

Méthode 2. Utilisez JavaScript pour créer une image. élément pour importer l'image

Créez d'abord un élément img, puis définissez le chemin de l'élément img, la longueur et la largeur de l'image, et enfin insérez-le dans la page. Le code est le suivant :

<script type="text/javascript">
  var Image1 = document.createElement("img");    
  Image1.src = "img/picture1.jpg";      
  Image1.width = 300;    
  Image1.height = 180;    
  document.body.appendChild(Image1); 
 </script>

Copier après la connexion

Méthode 3. Utiliser InnerHTML en insérant dynamiquement des images en JavaScript

utilise toujours la méthode en JavaScript L'essence est similaire à la méthode 2, mais la méthode d'écriture est. différent. Créez un élément img puis ajoutez-le à la page HTML. Le code est le suivant :

<script type="text/javascript">
  document.body.innerHTML = &#39;<img  src="img/picture1.jpg"    style="max-width:90%"  style="max-width:90%" / alt="Explication graphique détaillée de trois méthodes d'ajout d'images aux pages HTML" >&#39;;
</script>

Copier après la connexion

L'effet d'image est le même que la méthode 1.

Ce qui précède présente trois méthodes pour ajouter des images aux pages HTML. Généralement, nous utiliserons directement la balise img pour ajouter des images, mais parfois nous utilisons également JavaScript pour insérer dynamiquement des images. besoins du projet. Les débutants peuvent l’essayer eux-mêmes, j’espère que cela pourra vous aider !

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!