Maison >interface Web >tutoriel HTML >Utilisation de la balise html img
Utilisation de la balise html img
- 韦小宝original
- 2017-12-02 10:26:273487parcourir
Cet article explique en détail les différentes fonctions de la balise d'image en html Les images sont définitivement indispensables dans une page html, Le <.>la balise img du html est également très simple et facile à maîtriser Jetons un coup d'œil !
img affiche cette carte en utilisant des chemins relatifs tels que :
<img src="./imgs/002.jpg">Conseils de développement : dans le développement réel, il s'agira généralement de Créer un dossier imgs dans le répertoire du projet et placez-y toutes les ressources d'image pour faciliter l'appel d'image pendant le développement. Comme indiqué ci-dessus, ./imgs est le répertoire dans lequel se trouve l'image et /002.jpg est l'image à sélectionner.
img affiche les images de pages Web en utilisant des chemins absolus, tels que :
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"/>
Il existe de nombreux attributs parmi lesquels choisir sous img :
1. alt indique le contenu affiché lorsque l'image est mal chargée, afin que les visiteurs puissent connaître le but de l'image.
Par exemple :<img src="./imgs/001.jpg12" alt="logo">Le résultat affiché est : signifie que cette image est une image de logo.
2. aligner indique la position d'alignement de l'image dans le texte
le haut est aligné en haut, le bas est aligné en bas et le milieu est aligné en haut. le centre. La valeur par défaut est l'alignement inférieur. Deux effets de suspension : l'image de gauche flotte à gauche du texte, et l'image de droite flotte à droite du texte.3. Changez la taille de l'image en largeur et en hauteur
La démonstration du code de 2 et 3 est la suivante<p>一张百度logo<img src="./imgs/001.jpg" width="100"/></p> <p>一张百度logo<img src="./imgs/001.jpg" align="top" width="100"/></p> <p>一张logo<img src="./imgs/002.jpg" align="bottom" width="100"></p> <p>百度logo<img src="./imgs/002.jpg" align="middle" width="100"></p> <p>百度logo<img src="./imgs/002.jpg" align="left" width="100"></p> <p>百度logo<img src="./imgs/002.jpg" align="right" width="100"></p>Le les images sont toutes des chemins relatifs Images locales sous
4. Cliquez sur l'image pour ouvrir un autre lien
<p>点击图片打开链接 <a href="page1.html" title="点击进入page1界面"> <img src="./imgs/001.jpg" alt="logo" width="200px" align="middle"/></a></p>où page1.html est un autre
document html, le code est le suivant :
<html>
<head>
<title>page1界面</title>
</head>
<body>
<p>我是page1</p>
</body>
</html>Cliquez sur l'image pour ouvrir page1.html.
5. Cartographie d'images
<img src="page.jpg" border="0" usemap="#page" alt="pages" />
<map name="page" id="page">
<area shape="circle" coords="180,139,14" href ="page1.html" alt="page1" />
<area shape="circle" coords="129,161,10" href ="page2.html" alt="page2" />
</map>Parmi eux, la zone et la carte sont utilisées ensemble, et la zone est sous la balise map. Le usemap de img pointe vers le nom de la carte. Cliquez sur différentes positions de l'image pour entrer deux liens différents, page1 ou page2. Recommandations associées :
Explication graphique détaillée de la différence entre alt et title dans l'attribut img
Explication détaillée de la création de mappage d'images avec la balise a1f02c36ba31691bcfe87b2722de723b en html
Pourquoi ne pas utiliser la balise img pour contrôler la taille de l'image en HTML ?
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!