Maison > Article > interface Web > Comment insérer des images sur HTML
Comment insérer des images sur HTML
- 清浅original
- 2018-12-04 15:55:0264117parcourir
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 a1f02c36ba31691bcfe87b2722de723b
<img src="" alt="">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 formatMéthode d'insertion d'image HTML .
Insérer des images directement dans le code html<img src="images/1.jpg">Rendu :
<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>Rendu :
<body>
<img id="demo">
<script>
var demo=document.getElementById("demo");
demo.src="images/3.jpg";
demo.width="450";
demo.height="300";
</script>
</body>Rendu :
<div id="demo"></div>
<script>
var demo=document.ElementById("demo");
demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>Rendu :
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!