En parlant d'images, je pense que tout le monde les connaît, car dans notre vie quotidienne et dans notre utilisation, nous pouvons toujours voir des images, et les images sont plus expressives et attrayantes que les mots lorsqu'elles sont utilisées de manière appropriée, nous pouvons créer des pages Web. est plus beau et intuitif, surtout la première visualisation de la page Web est très importante.
1. attribut src
Symbole : img
Caractéristiques : étiquette unique
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>Insérer une image HTML</title></head><body><p>Image à afficher :</p><imgsrc=fish .jpg></body></html>
Résumé : L'insertion de l'image peut être complétée en introduisant le nom de l'attribut src dans la balise img, où la valeur de l'attribut src est « nom de fichier » ou « chemin./nom de fichier ». Remarque : l'image à insérer doit être dans le fichier. même fichier que le projet html Caught! Cette section fournira des explications clés.
2. Autres attributs
3. utilisation alternative
Description : Lorsque l'image ne peut pas être affichée pour une raison quelconque, la valeur d'attribut correspondant à l'attribut alt est affichée.
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>Insérer une image HTML</title></head><body><p>Image à afficher :</p><imgsrc=potato .jpgwidth=500alt=Pomme de terre></body></html>
Montré ci-dessous :
4. Utilisation du titre
Remarque : Si l'image s'affiche normalement, lorsque la souris survole l'image, le contenu correspondant à la valeur d'attribut de l'attribut titre sera affiché.
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>Insérer une image HTML</title></head><body><p>Image à afficher :</p><imgsrc=fish .jpgwidth=500alt=fish title=Ceci est un poisson cuit></body></html>
Effet : Si l'image peut s'afficher normalement, si vous passez la souris sur l'image, les mots « Ceci est un poisson cuit » apparaîtront.
Affiché comme indiqué :
5. Caractéristiques des attributs
Les caractéristiques des attributs des balises d'image sont applicables à la plupart des balises HTML :
1. Les attributs de la balise sont écrits à l'intérieur de la balise de début.
2. Plusieurs attributs peuvent exister dans la balise en même temps
3. Séparez les attributs par des espaces.
4. Les noms de balises et les attributs doivent être séparés par des espaces.
5. Il n'y a pas d'ordre entre les attributs.
6. Explication du chemin et insertion d'images à plusieurs niveaux
(1) Introduction au chemin
1. Chemin absolu
La position absolue sous le répertoire peut atteindre directement l'emplacement cible, faisant généralement référence au chemin commençant par la lettre du lecteur ou à l'URL complète. Lors de l'insertion d'images HTML, les chemins absolus ne sont généralement pas utilisés et les chemins relatifs sont plus couramment utilisés.
2. Chemin relatif
Le processus de recherche du fichier cible à partir du fichier actuel est souvent utilisé.
(2) Insérer des images à travers les niveaux
1. Même niveau
Lorsque l'image à insérer est au même niveau que le fichier html créé, elle peut être insérée directement. La valeur de l'attribut src est "nom du fichier cible. suffixe" ou "./nom du fichier cible. suffixe". Lorsque vous utilisez le compilateur pour coder, si vous entrez la première lettre du nom de fichier du même niveau, le compilateur sautera souvent automatiquement du reste du contenu.
Affichage du code : (en supposant que l'image s'appelle image et qu'elle soit au format jpg)
<imgsrc=picture.jpg> ou <imgsrc=./picture.jpg>
2. Subordonné
Si le fichier html est au même niveau que le dossier de fichiers et que l'image à insérer se trouve dans le dossier de fichiers, alors l'insertion de l'image dans le fichier html est une opération d'accès à l'image à plusieurs niveaux. Le code est le suivant :
<imgsrc=fichier/image.jpg>
3. Supérieur
S'il y a une image dans le dossier total et un autre dossier test, et que le fichier html se trouve dans le dossier test, alors l'insertion de l'image dans le fichier html appartient à l'accès au dossier de niveau supérieur. Le code est le suivant :
<imgsrc=../photo.jpg>
Si vous devez accéder aux images dans les dossiers supérieurs à deux niveaux, le code est :
<imgsrc=../../photo.jpg>
4. Application complète
S'il y a deux dossiers, fichier1 et fichier2, fichier1 stocke le fichier html et fichier2 stocke le drapeau d'image à insérer au format jpg, alors le code pour insérer l'image du drapeau dans le fichier html est le suivant :
<imgsrc=../file2/flag.jpg>
(Retournez d'abord au niveau précédent, puis visitez le niveau suivant)