Chemin du fichier en HTML
Un chemin de fichier est un concept utilisé en HTML pour définir le chemin du fichier dans la structure de dossiers du site Web concerné. Ceci est spécialement utilisé pour trouver l'emplacement exact du fichier dans le dossier souhaité, ce qui signifie qu'il fonctionne exactement comme une ligne directrice ou une adresse d'un fichier particulier que le navigateur Web va appeler. Ce concept en HTML est principalement utilisé pour détecter les chemins de fichiers d'images, de pages Web et de fichiers, de fichiers CSS, de fichiers de script, de fichiers multimédias comme la vidéo, etc. On peut trouver le chemin du fichier en utilisant deux attributs appelés src ou href. Ces attributs nous aident à joindre un fichier ou une source externe à notre document HTML.
Syntaxe
C'est une chose importante de connaître le chemin des fichiers qui vont être inclus dans les pages Web.
Voici donc la syntaxe pour inclure ces fichiers dans les pages Web comme suit :
Syntaxe :
<img src="" alt="">
Ceci est utilisé pour insérer l'image dans notre page Web.
Voici une liste de quelques chemins avec sa description est la suivante :
-
: Ceci est utilisé lorsque nous allons utiliser une image du même dossier traitant comme la page actuelle. -
: Il est utilisé pour indiquer que l'image donnée est stockée dans le dossier image du même dossier du site Web. -
: Ceci est utilisé pour définir respectif est stocké dans le dossier image de la racine où se trouve le dossier Web actuel. -
: Ce type indique à l'utilisateur que l'image donnée est stockée exactement un niveau au-dessus du dossier actuel du site Web.
Ces chemins de fichiers sont utilisés dans le code chaque fois qu'il est nécessaire d'ajouter des fichiers externes tels que des pages Web, des images, des fichiers de style, des fichiers de script et bien plus encore.
Lors de la définition du chemin du fichier, il est toujours nécessaire d'inclure l'URL exacte, le nom de fichier approprié et le nom exact de l'image avec l'extension appropriée. Si tous ces éléments sont correctement inclus, le fichier ou l'image inclus s'affichera correctement sur la page Web.
La syntaxe ci-dessus est divisée en deux types. L’un concerne le chemin absolu du fichier, qui est basé sur l’adresse URL. Un autre concerne le chemin relatif du fichier, où nous pouvons définir l'adresse des fichiers et des images en donnant simplement son nom ou le chemin du dossier pour accéder à son contenu.
Nous verrons les deux types de chemin de fichier en détail dans la section suivante, où il démontrera comment cela va réellement fonctionner.
Comment fonctionne le chemin du fichier en HTML ?
Il existe deux types de chemins de fichiers : le chemin de fichier absolu et un autre est le chemin de fichier relatif.
Le chemin absolu du fichier est utilisé chaque fois que nous utilisons une adresse URL complète pour définir le chemin du fichier.
Syntaxe : src=”url”;
Exemple : Voici le code réel permettant de définir comment le code du chemin de fichier absolu va fonctionner dans la structure du site Web :
<!DOCTYPE html> <html> <head> <title>Absolute file path</title> </head> <body> <img src="https://www.BeautyofNatur /image.png" alt="My Image" style="width:400px"> </body> </html>
Alors que le chemin relatif du fichier est utilisé pour définir un chemin spécifique vers le fichier où se trouvent réellement toutes les images par rapport au dossier actuel.
Syntaxe :
src="img_folder/img_name" or src="/img_folder/img_name" or src=""../img_folder/img_name or
Ici, nous allons inclure un exemple qui présente toutes les manières possibles d'afficher le chemin du fichier à l'aide du chemin de fichier relatif, comme indiqué ci-dessous :
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h4>Example showing file in same folder </h4> <img src="images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> <h4>Example showing file present in a folder above its current folder </h4> <img src="../images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> <h4>Example showing file available in a folder, which is exactly located at root position of its current sub folder </h4> <img src="https://cdn.educba.com/images/Candle.jpg" alt="Image demo "style="width:80px; height:80px; "> </body> </html>
Il est toujours considéré comme une bonne pratique d'utiliser un chemin de fichier relatif plutôt qu'un concept de chemin de fichier absolu.
Exemples de chemin de fichier en HTML
Voici les exemples suivants mentionnés ci-dessous
Exemple n°1
C'est l'exemple qui va montrer comment Absolute File Path va fonctionner. Codez-le comme suit :
Code :
<!DOCTYPE html> <html> <head> <title>Absolute file path</title> </head> <h2>Absolute File Path</h2> <p> This is example of Absolute file path. In this concept we are going to use Specific "URL" address of file. So we can easily add this file or image on their website.</p> <body> <img src="https://www.nearbuy.com/mumbai/educba-andheri-east/photos/Photos.jpg" alt="Mountain"> </body> </html>
Sortie :
Exemple n°2
Code :
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h2>Relative File Path</h2> <p>In This Example we are going to see how Relative File Path going to work on same image.<br> So we are taking one image here stored at one specific website folder , so it will display same thing using different path</p> <h4>Relative File path with image in same folder </h4> <img src="images/flag.png" style="width:100px; height:100px; "> <h4>Relative File path with image present in a folder above its current folder </h4> <img src="../images/flag.png" alt="Image demo "style="width:100px; height:100px; "> <h4>Relative File path with image available in a folder, which is exactly located at root position of its current sub folder</h4> <img src="https://cdn.educba.com/images/flag.png" alt="Image demo "style="width:100px; height:100px; "> </body> </html>
Sortie :
Exemple #3
Code :
<!DOCTYPE html> <html> <head> <title>Relative file path Demo Example</title> </head> <body> <h2>Relative File Path</h2> <p>In This Example we are going to see how Relative File Path going to work on Image as well as on files also<br> So we are adding HTML File, CSS File and image also to see the actual result</p> <h4>Relative File path with image in same folder </h4> <img src="images/EDUCBA.png" style="width:250px; height:150px; "> <h4>Relative File path with HTML file present in the folder </h4> <a href="index.html"> HTML file </a> <h4>One can give Style path through Absolute or Relative position. Here we are using relative file path</h4> <a href="main.css"> CSS file </a> </body> </html>
Sortie :
Conclusion
À partir de toutes les informations ci-dessus, nous avons réalisé que le fichier HTML est utilisé pour définir l'adresse ou le chemin des fichiers ou des images où ils sont réellement stockés dans la structure du site Web.
Ce chemin de fichier est affiché de deux manières possibles : Chemin de fichier absolu, où un autre est pour Chemin de fichier relatif, comme nous l'avons vu dans les informations ci-dessus.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Intégrer efficacement CSS et JavaScript avec la structure HTML5.
Jul 12, 2025 am 03:01 AM
HTML5, CSS et JavaScript doivent être combinés efficacement avec des balises sémantiques, un ordre de chargement raisonnable et une conception de découplage. 1. Utilisez des étiquettes sémantiques HTML5, telles que l'amélioration de la clarté structurelle et de la maintenabilité, qui est propice au référencement et à l'accès sans barrière; 2. CSS doit être placé, utiliser des fichiers externes et se séparer par module pour éviter les styles en ligne et les problèmes de chargement retardés; 3. JavaScript est recommandé d'être introduit à l'avant et d'utiliser un repère ou une asynchronisation pour charger de manière asynchrone pour éviter le blocage du rendu; 4. Réduisez une forte dépendance entre les trois, conduisez le comportement à travers les attributs de données * et l'état de contrôle du nom de classe et améliorez l'efficacité de la collaboration grâce à des spécifications de nommage unifiées. Ces méthodes peuvent optimiser efficacement les performances des pages et collaborer avec les équipes.
Implémentation de boutons clickables à l'aide de l'élément de bouton HTML
Jul 07, 2025 am 02:31 AM
Pour utiliser des éléments de bouton HTML pour réaliser des boutons cliquables, vous devez d'abord maîtriser son utilisation de base et ses précautions communes. 1. Créer des boutons avec des balises et définir les comportements via des attributs de type (tels que le bouton, soumettre, réinitialiser), qui est soumis par défaut; 2. Ajouter des fonctions interactives via JavaScript, qui peuvent être écrites en ligne ou lier les écouteurs d'événements via ID pour améliorer la maintenance; 3. Utilisez CSS pour personnaliser les styles, y compris la couleur d'arrière-plan, la bordure, les coins arrondis et les effets de survol / statut actif pour améliorer l'expérience utilisateur; 4. Faites attention aux problèmes communs: assurez-vous que l'attribut désactivé n'est pas activé, les événements JS sont correctement liés, la mise en page d'occlusion et utilisent l'aide des outils de développement pour dépanner les exceptions. Maîtriser ceci
Configuration des métadonnées du document dans l'élément de tête HTML
Jul 09, 2025 am 02:30 AM
Les métadonnées à HTMLhead sont cruciales pour le référencement, le partage social et le comportement du navigateur. 1. Définissez le titre et la description de la page, utilisez et gardez-le concis et unique; 2. Ajoutez des informations sur les cartes OpenGraph et Twitter pour optimiser les effets de partage social, faire attention à la taille de l'image et utiliser des outils de débogage pour tester; 3. Définissez le jeu de caractères et les paramètres de la fenêtre pour s'assurer que le support multi-langues est adapté au terminal mobile; 4. Les balises facultatives telles que l'auteur Copyright, le contrôle des robots et le contenu en double prévention canonique doivent également être configurés raisonnablement.
Soumettre des données de formulaire à l'aide de nouvelles méthodes HTML5 (formdata)
Jul 08, 2025 am 02:28 AM
Il est plus pratique de soumettre des données de formulaire à l'aide de l'API FormData de HTML5. 1. Il peut collecter automatiquement les champs de formulaire avec l'attribut de nom ou ajouter manuellement des données; 2. Il prend en charge la soumission au format multipart / format de format de format via Fetch ou XMLHTTPRequest, qui convient au téléchargement de fichiers; 3. Lors du traitement des fichiers, vous n'avez qu'à ajouter le fichier pour formerdata et envoyer une demande; 4. Notez que le champ du même nom sera écrasé et que la conversion JSON et aucune structure de nidification ne doivent être manipulées.
Expliquant les éléments HTML5 `` vs ``.
Jul 12, 2025 am 03:09 AM
Il s'agit d'un élément au niveau du bloc, adapté à la mise en page; Il s'agit d'un élément en ligne, adapté à l'emballage du contenu texte. 1. Occuper exclusivement une ligne, une largeur, une hauteur et des marges peuvent être définies, qui sont souvent utilisées dans la disposition structurelle; 2. Aucune ligne ne se casse, la taille est déterminée par le contenu et convient aux styles de texte locaux ou aux opérations dynamiques; 3. Lors du choix, il doit être jugé en fonction de la question de savoir si le contenu a besoin d'espace indépendant; 4. Il ne peut pas être imbriqué et ne convient pas à la mise en page; 5. La priorité est donnée à l'utilisation des étiquettes sémantiques pour améliorer la clarté structurelle et l'accessibilité.
Comprendre les extensions de source de médias HTML5 (MSE)
Jul 08, 2025 am 02:31 AM
MSE (MediaSourceExtensions) fait partie de la norme W3C, permettant à JavaScript de construire dynamiquement des flux de médias, permettant ainsi des capacités de lecture vidéo avancées. Il gère les sources multimédias via MediaSource, stocke les données de SourceBuffer et représente la plage de temps tampon par Timeranges, permettant au navigateur de charger et de décoder dynamiquement des clips vidéo. Le processus d'utilisation de MSE comprend: ① Créer une instance MediaSource; ② Le lier à un élément; ③ Ajouter SourceBuffer pour recevoir des données dans un format spécifique; ④ Obtenez des données segmentées via fetch () et ajoutez-les au tampon. Les précautions courantes comprennent: ① Problèmes de compatibilité du format; ② Paire de coups horaires
Quels sont les attributs globaux les plus couramment utilisés en HTML?
Jul 10, 2025 am 10:58 AM
La classe, l'identification, le style, les données et le titre sont les attributs globaux les plus couramment utilisés en HTML. La classe est utilisée pour spécifier un ou plusieurs noms de classe pour faciliter le paramètre de style et les opérations JavaScript; ID fournit des identifiants uniques pour les éléments, adaptés aux sauts d'ancrage et au contrôle JavaScript; Le style permet d'ajouter des styles en ligne, adaptés au débogage temporaire mais pas recommandé pour une utilisation à grande échelle; Data-Properties est utilisé pour stocker des données personnalisées, ce qui est pratique pour l'interaction frontale et back-end; Le titre est utilisé pour ajouter des invites de souris, mais son style et son comportement sont limités par le navigateur. La sélection raisonnable de ces attributs peut améliorer l'efficacité du développement et l'expérience utilisateur.
Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?
Jul 07, 2025 am 02:30 AM
L'utilisation de sommes HTML permet une clarté intuitive et sémantique pour ajouter du texte de légende aux images ou aux médias. 1. Utilisé pour envelopper le contenu multimédia indépendant, tels que des images, des vidéos ou des blocs de code; 2. Il est placé comme texte explicatif et peut être situé au-dessus ou en dessous des médias; 3. Ils améliorent non seulement la clarté de la structure de la page, mais améliorent également l'accessibilité et l'effet de référencement; 4. Lorsque vous l'utilisez, vous devez faire attention à éviter les abus et s'appliquer au contenu qui doit être mis en avant et accompagné d'une description, plutôt que des images décoratives ordinaires; 5. L'attribut Alt qui ne peut être ignoré, qui est différent de Figcaption; 6. La figue est flexible et peut être placée en haut ou en bas de la figure au besoin. L'utilisation de ces deux balises aide correctement à créer un contenu Web sémantique et facile à comprendre.
