Explication détaillée de la fonction et de l'utilisation de la balise de navigation HTML-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

Explication détaillée de la fonction et de l'utilisation de la balise de navigation HTML

Jun 29, 2017 pm 02:19 PM

html pratique 详解

La nouvelle balise d'élément <nav> en HTML5 est utilisée pour diviser les liens avec des propriétés de navigation, rendant la structure du code plus précise en termes de sémantique et en même temps pour l'écran La prise en charge des appareils tels que les lecteurs est également meilleure.
Depuis longtemps, nous avons l'habitude d'utiliser des codes tels que <div id="nav"> ou <ul id="nav"> pour écrire la navigation des pages ; la liste de liens est placée dans la balise <nav> :

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/about/&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/blog/&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

Copier après la connexion

Selon la spécification de définition du W3C :

l'élément nav peut être utilisé comme navigation de page Un groupe de liens ; les éléments de navigation qu'il contient renvoient vers d'autres pages ou d'autres parties de la page actuelle. Tous les groupes de liens n'ont pas besoin d'être placés dans l'élément <nav>, par exemple, il y a généralement un groupe de liens dans le pied de page, comprenant les conditions d'utilisation, la page d'accueil, la déclaration de droits d'auteur, etc. ; plus approprié d'utiliser l'élément <footer> , sans nécessiter l'élément <nav>

Une page peut avoir plusieurs éléments <nav> comme navigation pour la page entière ou différentes parties ; voici un exemple de code donné par le W3C :

&lt;body&gt;
&lt;h1&gt;The Wiki Center Of Exampland&lt;/h1&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/events&quot;&gt;Current Events&lt;/a&gt;&lt;/li&gt;
...more...
&lt;/ul&gt;
&lt;/nav&gt;
&lt;article&gt;
&lt;header&gt;
&lt;h1&gt;Demos in Exampland&lt;/h1&gt;
&lt;p&gt;Written by A. N. Other.&lt;/p&gt;
&lt;/header&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#public&quot;&gt;Public demonstrations&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#destroy&quot;&gt;Demolitions&lt;/a&gt;&lt;/li&gt;
...more...
&lt;/ul&gt;
&lt;/nav&gt;
&lt;div&gt;
&lt;section id=&quot;public&quot;&gt;
&lt;h1&gt;Public demonstrations&lt;/h1&gt;
&lt;p&gt;...more...&lt;/p&gt;
&lt;/section&gt;
&lt;section id=&quot;destroy&quot;&gt;
&lt;h1&gt;Demolitions&lt;/h1&gt;
&lt;p&gt;...more...&lt;/p&gt;
&lt;/section&gt;
...more...
&lt;/div&gt;
&lt;footer&gt;
&lt;p&gt;&lt;a href=&quot;?edit&quot;&gt;Edit&lt;/a&gt; | &lt;a href=&quot;?delete&quot;&gt;Delete&lt;/a&gt; | &lt;a href=&quot;?Rename&quot;&gt;Rename&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;
&lt;/article&gt;
&lt;footer&gt;
&lt;p&gt;&lt;small&gt;© copyright 1998 Exampland Emperor&lt;/small&gt;&lt;/p&gt;
&lt;/footer&gt;
&lt;/body&gt;

Copier après la connexion

Dans cet exemple, nous pouvons voir que <nav> peut non seulement être utilisé comme navigation globale de la page, mais peut également être placé dans la balise <article> liés au contenu d’un seul article.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn