Maison >interface Web >tutoriel HTML >Balise de navigation HTML
Balise de navigation HTML
- WBOYoriginal
- 2024-09-04 16:24:011091parcourir
HTML possède de nombreuses fonctionnalités permettant de mettre en évidence la technologie frontale dans la mesure où la balise de navigation est l'une des fonctionnalités de la version HTML5. Dans la version précédente, HTML a des fonctionnalités différentes, mais dans HTML 5, Navigation prend en charge les attributs globaux et les attributs d'événement. Le
Syntaxe :
Chaque balise HTML a une syntaxe distincte comme le code suivant : la syntaxe de base pour la balise de navigation. Nous avons utilisé l'option
HTML
<nav> < a href="/" /> ------------------- </nav>
CSS
nav{
--some codes—
}
Comment fonctionne la balise de navigation en HTML ?
L'utilisateur envoie la demande après avoir cliqué sur l'onglet ou le menu de la page Web. Il se déplacera vers une autre page afin que la réponse du serveur affiche la page Web de résultats à l'utilisateur. Comme en HTML, il séparera les menus ou les onglets de l'interface graphique du point de vue de l'utilisateur à l'aide de certains éléments HTML tels que
Un document de page HTML peut contenir plusieurs nombres de liens basés sur les menus/onglets de la page Web. En HTML, la navigation contient généralement deux types, à savoir la navigation horizontale et la navigation verticale. Par défaut, la navigation horizontale est chargée en fonction des besoins de l'utilisateur, elle sera convertie en vertical ou en d'autres types d'exigences utilisateur.
Le diagramme ci-dessus représente la compréhension de base de l'écran utilisateur via les liens de navigation. L'utilisateur clique sur le lien d'accueil via les liens de la page Web du navigateur n'est rien d'autre que des balises HTML, c'est-à-dire) il passera par la page Web particulière, ce sera soit une page côté client, soit côté serveur, cela dépend du projet, il affichera la page d'accueil sur l'écran du navigateur de l'utilisateur.
Exemples de balise de navigation HTML
Vous trouverez ci-dessous des exemples de balises de navigation HTML :
Exemple n°1
<html> <body> <nav> <a href="/home/">Home</a> | <a href="/contactus/">Contact Us</a> | <a href="/about us/">About US</a> </nav> </body> </html>
Sortie :
Exemple n°2
<html>
<head>
<style>
nav {
border:2px;
background-color:#090;
color:green;
padding:5px;
}
n {
color:white;
font-size:10px;
}
.n1{
font-size:20px;
color:#090;
font-weight:bold;
text-align:center;
}
.n2 {
text-align:center;
color:#090;
margin:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="n1">First</div>
<div class="n2">Second</div>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>
Sortie :
Exemple #3
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 50%;
width: 3;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.6s;
}
.sidenav n {
padding: 5px 8px 7px 22px;
font-size: 23px;
color: #818181;
transition: 0.6s;
}
.sidenav n:hover {
color: #f1f1f1;
}
.sidenav .close{
position: absolute;
top: 0;
right: 20px;
font-size: 18px;
margin-left: 40px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav n {font-size: 18px;}
}
</style>
</head>
<body>
<div id="first" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="cN()">×</a>
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">About US</a>
</div>
<h2>Sample</h2>
<span style="font-size:20px;cursor:pointer" onclick="oN()">☰ click</span>
<script>
function oN() {
document.getElementById("first").style.width = "300px";
}
function cN() {
document.getElementById("first").style.width = "1";
}
</script>
</body>
</html>
Sortie :
Par rapport aux exemples précédents, nous avons utilisé certaines animations pour la navigation afin d'attirer l'utilisateur.
Différents types de menus de navigation
En général, nous avons plusieurs types différents de menus et d'expressions idiomatiques à prendre en compte dans les balises HTML telles que et (ancre), et tous doivent être fermés. La plupart des menus de navigation peuvent être créés avec des listes ; parfois, des restrictions d'interface seront utilisées en fonction des dépendances des utilisateurs.
Les menus de navigation basés sur des listes sont les suivants :
- Menu de navigation sur la page
- Menu de navigation du site
- Menu de navigation contextuelle
- Menu de navigation Stemaps
- Pagination
1. Menu de navigation sur la page
Un tableau ou le contenu des liens d'une seule page pointant vers d'autres sections différentes de la page Web.
Exemple
<nav> <a href="/home/">Home</a> | </nav>
2. Menu de navigation du site
Il s'agit très probablement des types de menus les plus courants dans les pages Web. Il s'agit d'un type de menu personnalisé ou défini par l'utilisateur d'un site ou d'un sous-ensemble qui affiche les options à choisir dans la hiérarchie du site.
Exemple
<nav> <ul> <li><a href="/home/">Home</a> </li> <li><a href="/about us/">About Us</a> </li> <li><a href="/contact us/">Contact Us</a> </li> </nav>
3. Menus de navigation contextuels
C'est un lien qui construit le contenu du document, et il offre des informations supplémentaires liées à la page actuelle du document html. Des exemples de ces menus sont Certains articles d'actualité, des sites bancaires ; tout ce que nous voyons dans l'application de page Web contient un panneau de navigation, nous avons placé le curseur de la souris dans l'onglet ou le menu. Il affichera le contenu d'une info-bulle du menu.
4. Menus de navigation des plans du site
C'est un menu qui ressemble à des blocs pop-up, quel que soit le clic de l'utilisateur sur la page, le menu ou les onglets configurés, ou s'il a besoin de plugins supplémentaires pour configurer la nouvelle fenêtre ou la nouvelle page, tout le contenu sera mappé avec le même site. Le plan du site et les recherches sur site ont un ensemble de fonctionnalités et d'offres différents dans le HTML.
5. Pagination
Dans Pagination, nous avons parfois vu que la page Web sera configurée avec le backend pour un grand ensemble de fichiers à charger sur l'écran frontal après que l'utilisateur a cliqué sur le menu ou les onglets. Utiliser cette option pour diviser en pages distinctes. Par rapport à la navigation, elle est différente car elle renvoie normalement au back-end du même document, ce qui entraîne l'affichage de plus d'options ou d'informations supplémentaires sur la même page Web.
Conclusion
Enfin, nous avons une partie conclue où généralement chaque version du code HTML a un ensemble différent de fonctionnalités. HTML 4 n'est pas pris en charge pour le
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!