HTML verfügt über viele Funktionen zur Hervorhebung der Frontend-Technologie, da das Navigations-Tag eine der Funktionen für die HTML5-Version ist. In der Vorgängerversion verfügte HTML über andere Funktionen, aber in HTML 5 unterstützt die Navigation globale Attribute und Ereignisattribute. Das
Syntax:
Each and Every HTML-Tags haben eine separate Syntax wie den folgenden Code: die grundlegende Syntax für Navigations-Tags. Wir haben die Funktion
HTML
<nav> < a href="/" /> ------------------- </nav>
CSS
nav{
--some codes—
}Der Benutzer sendet die Anfrage, nachdem er auf die Registerkarte oder das Menü auf der Webseite geklickt hat. Es wird auf eine andere Seite verschoben, sodass die Antwort des Servers dem Benutzer die Ergebnis-Webseite anzeigt. Wie in HTML werden die Menüs oder Registerkarten in der Benutzeroberfläche mithilfe einiger HTML-Elemente wie
Ein HTML-Seitendokument kann mehrere Links enthalten, die auf den Menüs/Registerkarten der Webseite basieren. In HTML umfasst die Navigation im Allgemeinen zwei Arten, nämlich horizontale Navigation und vertikale Navigation. Standardmäßig wird die horizontale Navigation basierend auf der Benutzeranforderung geladen, die in eine vertikale oder andere Benutzeranforderungstypen umgewandelt wird.
Das obige Diagramm stellt das grundlegende Verständnis des Benutzerbildschirms anhand von Navigationslinks dar. Der Benutzer klickt auf den Home-Link über Browser-Webseiten-Links, die nichts anderes als HTML-Tags sind, d. h.) Es durchläuft die jeweilige Webseite. Es handelt sich entweder um eine clientseitige oder serverseitige Seite. Abhängig vom Projekt wird die Startseite im Browserbildschirm des Benutzers angezeigt.
Im Folgenden finden Sie Beispiele für HTML-Navigations-Tags:
<html> <body> <nav> <a href="/home/">Home</a> | <a href="/contactus/">Contact Us</a> | <a href="/about us/">About US</a> </nav> </body> </html>
Ausgabe:
<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>Ausgabe:
<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>Ausgabe:
Im Vergleich zu früheren Beispielen haben wir einige Animationen für die Navigation verwendet, um den Benutzer anzulocken.
Im Allgemeinen müssen wir in HTML-Tags wie verschiedene Arten von Menüs und Redewendungen berücksichtigen. und (Anker)-Elemente, und alle sollten geschlossen sein. Die meisten Navigationsmenüs können mit Listen erstellt werden; Manchmal werden Schnittstellenbeschränkungen basierend auf Benutzerabhängigkeiten verwendet.
Die listenbasierten Navigationsmenüs lauten wie folgt:
Eine Tabelle oder der Inhalt für Einzelseiten-Links, die auf andere Abschnitte auf der Webseite verweisen.
Beispiel
<nav> <a href="/home/">Home</a> | </nav>
Es handelt sich höchstwahrscheinlich um die häufigsten Menütypen auf Webseiten. Es handelt sich um einen benutzerdefinierten oder benutzerdefinierten Menütyp einer Site oder einer Teilmenge, der die Optionen zur Auswahl aus der Hierarchie der Site anzeigt.
Beispiel
<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>
Es handelt sich um einen Link, der den Inhalt des Dokuments aufbaut und weitere Informationen zur aktuellen Seite des HTML-Dokuments bietet. Beispiele für diese Menüs sind einige Nachrichtenartikel, Bankseiten; Was auch immer wir in der Webseitenanwendung sehen, enthält ein Navigationsfeld. Wir haben den Mauszeiger in die Registerkarte oder das Menü platziert. Es wird wie ein Tooltip-Inhalt des Menüs angezeigt.
Es handelt sich um ein Menü, das wie Popup-Blocker aussieht, unabhängig davon, ob der Benutzer auf die Seite klickt, das Menü oder die konfigurierten Registerkarten, oder er benötigt einige zusätzliche Plugins, um das neue Fenster oder die neue Seite zu konfigurieren. Alle Inhalte werden derselben Site zugeordnet. Sowohl Sitemap- als auch Site-Suchen verfügen über unterschiedliche Funktionen und Angebote im HTML.
Bei der Paginierung haben wir manchmal gesehen, dass die Webseite mit einem Backend konfiguriert wird, sodass eine große Menge an Dateien auf dem Frontend-Bildschirm geladen wird, nachdem der Benutzer auf das Menü oder die Registerkarten geklickt hat. Mit dieser Option können Sie die Seiten in separate Seiten aufteilen. Im Vergleich zur Navigation unterscheidet es sich, da es normalerweise mit dem Back-End desselben Dokuments verknüpft ist, was dazu führt, dass mehr Optionen oder weitere Informationen auf derselben Webseite angezeigt werden.
Schließlich haben wir einen abschließenden Teil, in dem normalerweise jede HTML-Version über andere Funktionen verfügt. HTML 4 wird für das
Das obige ist der detaillierte Inhalt vonHTML-Navigations-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
