Utilisation de la balise html img-tutoriel HTML-php.cn

Utilisation de la balise html img

韦小宝

Libérer： 2017-12-02 10:26:27

original

3503 Les gens l'ont consulté

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">

Copier après la connexion

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"/>

Copier après la connexion

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">

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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.

Ce qui précède concerne l'utilisation des balises html img. J'espère que cela sera utile à tout le monde.

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 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!