Quel est le but de la balise dans HTML5?
La balise
La balise <base> dans HTML5 est utilisée pour définir une URL de base et / ou une cible de base pour toutes les URL relatives d'une page Web. C'est un élément petit mais puissant qui aide à rationaliser comment les liens, les images, les scripts et d'autres ressources sont résolus.
Tag dans html5? "/> Pourquoi utiliser la balise <base> ?
Lorsque vous avez de nombreux liens ou ressources sur une page (comme les images, CSS, JavaScript ou liens d'ancrage), ils utilisent souvent des URL relatives telles que /css/style.css ou images/logo.png . Le navigateur combine ces chemins relatifs avec l'URL de base du document pour former une URL complète (absolue).
Par défaut, l'URL de base est l'adresse de la page actuelle. Mais si vous utilisez la balise <base> , vous pouvez modifier cette URL de base par défaut pour tous les liens relatifs sur toute la page.
Tag dans html5? "/> Utilisations clés de la balise <base>
1. Définissez une URL de base pour les liens relatifs
Si les ressources de votre site sont hébergées sur un domaine ou un sous-répertoire différent, vous pouvez définir une URL de base afin que vous n'ayez pas à le répéter partout.
<adal> <base href = "https://example.com/assets/"> </ head> <body> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175634108779311.jpeg" class="lazy" src = "images / logo.png" alt="Quel est le but de la balise dans HTML5?" > <! - Charge à partir de https://example.com/assets/images/logo.png -> <a href = "about.html"> À propos de </a> <! - Liens vers https://example.com/assets/about.html -> </docy>
Cela évite d'avoir à écrire des URL complètes pour chaque ressource.
Tag dans html5? "/>2. Définissez une cible par défaut pour les liens
Vous pouvez également utiliser l'attribut target dans la balise <base> pour contrôler où les liens s'ouvrent, en particulier utile si la plupart des liens doivent s'ouvrir dans un nouvel onglet ou un cadre spécifique.
<base href = "https://example.com/" Target = "_ Blank">
Désormais, tous les liens sans leur propre attribut target s'ouvriront dans un nouvel onglet.
⚠️ IMPORTANT: La balise
<base>affecte uniquement les URL relatives. Les URL absolues (commehttps://other-site.com/page) ne sont pas modifiées.
Choses à surveiller
- Il ne peut y avoir qu'une seule balise
<base>par page. - Il doit être placé à l'intérieur de la section
<head>. - Il affecte toutes les URL relatives dans le document, y compris les images, les scripts, le CSS, les formes et les ancres.
- Si vous définissez une
targetde base, même les liens relatifs s'ouvriront dans cette cible à moins qu'ils ne spécifient les leurs.
Exemple pratique
<adal> <base href = "https://myapp.com/stating/" cible = "_ self"> </ head> <body> <link rel = "Stylesheet" href = "css / main.css"> <! - charge de /static/css/main.css -> <img src = "img / photo.jpg" alt="Quel est le but de la balise dans HTML5?" > <! - Charges de /static/img/photo.jpg -> <a href = "/ home"> home </a> <! - va à / home (la base de chantier de chemin absolu) -> <a href = "help"> aide </a> <! - va à / statique / aide (relatif, donc la base s'applique) -> </docy>
Dans ce cas, la plupart des ressources statiques sont tirées d'un CDN ou d'un sous-chemin spécifique, mais les liens de navigation commençant par / restent non affectés.
Fondamentalement, la balise <base> aide à nettoyer votre code et à gérer la résolution de l'URL plus efficacement, en particulier utile dans les modèles ou les applications d'une seule page où les chemins sont prévisibles. Utilisez-le avec soin, car il s'applique à l'échelle mondiale.
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.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
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)
Comment utiliser des événements de serveur (SSE) dans HTML5?
Sep 21, 2025 am 06:11 AM
SseenablesReal-Time, UnidirectionalServer-to-ClientupdatesViaHttp; useEventsourceInjavascriptToconnect, HandleMesages withonMessage, setServerResponSetyTotext / Event-Stream, FormatDatawith "Data:" et "\ n \ n", et optionally includeventidSff
Comment utiliser correctement l'élément dans HTML5?
Sep 17, 2025 am 06:33 AM
TheTetimeElementInhtml5RepresentsDates andtimeTimesInamachine-ReadableFormat, EnhancingAccessibility and
Comment gérer la concentration pour l'accessibilité dans HTML5?
Sep 21, 2025 am 05:27 AM
UseMantichTmlelementsLikEnd andNorativefocation etKeyBoardboardUpport.enSureLogicalTabOrderAndvisibleFocusIndicatorsViacss.programmatematesthanagefocusindYnYCContentlikeModalSusingElement.focus (), trappingfocusinsidereturningItClosElement.APPLYAR ()
Comment utiliser les rôles ARIA pour l'accessibilité dans HTML5?
Sep 21, 2025 am 04:41 AM
AriaenhanceswebaccessibilityByAddingSémanticMeaningToElementsWHenativehtmlisInsufficient.UseAriaroleLikerole = "Button", Aria-Expanded, Andaria-LabelforCustomComponentsordamicContent, Butalwaysprefernativehtmlelementsuchasbuttonornav.update.
Comment valider un champ de formulaire contre une expression régulière dans HTML5?
Sep 22, 2025 am 05:11 AM
UshepatterNattributeInhtml5InputellementStovalIdateAgainStaregex, telsforpasswordSrequiringNumbers, en majuscules, en minuscules, et la longueur de la mine; pairewithtitleForUserguidanceAnDrederedfornon-EmptyenForcement.
Comment animer les chemins SVG dans un document HTML5?
Sep 21, 2025 am 01:58 AM
USECSSSTROKE-DASHARRAYAndStroke-DashoffsetforsImpledRawinganimations; 2.ApplyJavascriptfordynAmicTriggerslikeloadorscroll; 3. EmployBibrarylikegsapForPathmorphing; 4. OptimizeperFormanceByliting Concurrentanimations.
Comment intégrer un fichier SVG directement dans un document HTML5?
Sep 17, 2025 am 04:49 AM
Pour intégrer directement SVG, insérez le code SVG dans la balise HTML pour supprimer la déclaration XML. 2. Copiez le contenu SVG et collez-le en HTML, comme un exemple contenant un cercle. 3. Les avantages incluent le contrôle du style CSS, les opérations JavaScript, la réduction des demandes HTTP et le support réactif. 4. Les propriétés redondantes peuvent être nettoyées et l'espace de noms nécessaire peut être conservé.
Comment définir la fenêtre pour les appareils mobiles dans HTML5?
Sep 16, 2025 am 02:28 AM
L'ajout d'une balise META de la fenêtre garantit que les pages Web s'affichent correctement sur les appareils mobiles, empêchant les navigateurs de rendre à la largeur du bureau par défaut et de rétrécir la page.
