Comment insérer des images sur HTML-tutoriel HTML-php.cn

Comment insérer des images sur HTML

清浅

Libérer： 2018-12-04 15:55:02

original

64180 Les gens l'ont consulté

Les méthodes pour insérer des images dans HTML incluent : insérer directement dans le code HTML, insérer dans les styles CSS, insérer des images dans JavaScript en définissant la valeur src pour img et insérer l'attribut img dans innerHTML pour insérer des images

S'il n'y a que du texte dans une page, elle aura l'air très monotone et ennuyeuse, mais lorsque nous y ajouterons des images, elle sera bien meilleure. Aujourd'hui, nous allons vous présenter comment insérer des images sur des pages HTML.

[Cours recommandés : Cours HTML, Cours JavaScript】

L'insertion d'images dans des pages HTML nécessite la balise

<img src="" alt="">

Copier après la connexion

img signifie "image", qui est l'image affichée sur la page.

src signifie "source". Il indique au navigateur où trouver l'image. Lors de l'écriture du code, il est préférable de sauvegarder l'image dans un dossier. De cette façon, vous pouvez utiliser le nom du sous-répertoire devant. du nom. Appeler l'image

alt représente "texte" et indique au navigateur que si l'image est introuvable, seul le texte sera affiché, ou en passant la souris sur l'image, le texte défini apparaîtra.

Format d'image Web

.gif : Il s'agit d'un format simple, composé d'une série d'éléments ou de points d'image colorés, disposés en une image, qui est une image animée. picture

.png : similaire au format gif mais il a des options de transparence partielle et ne prend en charge que la compression sans perte.

.JPEG : Le format JPEG est actuellement le format d'image le plus populaire sur Internet. C'est un format qui permet de compresser des fichiers au plus petit format

Méthode d'insertion d'image HTML .

Insérer des images directement dans le code html

<img src="images/1.jpg">

Copier après la connexion

Rendu :

Comment insérer des images sur HTML

Insérer des images dans des styles CSS

<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>

Copier après la connexion

Rendu :

Comment insérer des images sur HTML

Insérer des images à l'aide du langage JavaScript

<body>
<img id="demo">
<script>
	var demo=document.getElementById("demo");
	demo.src="images/3.jpg";
	demo.width="450";
	demo.height="300";
</script>
</body>

Copier après la connexion

Rendu :

Image 5.jpg

Méthode InnerHTML pour insérer des images

<div id="demo"></div>
<script>
	var demo=document.ElementById("demo");
	demo.innerHTML=&#39;<img src="images/4.jpg" width="450px" height="300px">&#39;;
</script>

Copier après la connexion

Rendu :

Image 7.jpg