Heim > Artikel > Web-Frontend > Welche Elemente werden zum Schreiben der Navigationsleiste in HTML5 verwendet?
Welche Elemente werden zum Schreiben der Navigationsleiste in HTML5 verwendet?
- 青灯夜游Original
- 2022-12-12 18:38:573550Durchsuche
Html5 verwendet Navigationselemente, um Navigationsleisten zu schreiben. Das Navigationselement ist ein Navigationselement, das zum Definieren von Navigationslinks verwendet wird. Links mit Navigationseigenschaften können in einem Bereich zusammengefasst werden, um die Semantik von Seitenelementen klarer zu machen. Das Navigationselement kann verwendet werden in: 1. Traditioneller Navigationsleiste, deren Funktion darin besteht, zu anderen Hauptseiten der Website zu springen; 2. Seitenleistennavigation, deren Zweck darin besteht, vom aktuellen Artikel oder der aktuellen Produktseite zu anderen Artikeln oder anderen Produkten zu springen; . Seite; 3. In-Page-Navigation, die zum Springen zwischen den Hauptkomponenten dieser Seite verwendet wird;
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
HTML5-Navigationselement (Navigationselement)
Nav-Element wird zum Definieren von Navigationslinks verwendet. Es handelt sich um ein neues Element in HTML5, das Links mit Navigationseigenschaften in einem Bereich zusammenfassen kann, wodurch die Semantik von Seitenelementen erstellt wird Deutlicher. Navigationselemente können auf andere Seiten der Website oder auf andere Teile der aktuellen Seite verweisen. Zum Beispiel der folgende Beispielcode:
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>Im obigen Code wird die Navigationsstruktur durch Verschachteln der ungeordneten Liste ul im Navigationselement erstellt. Normalerweise kann eine HTML-Seite mehrere Navigationselemente als Navigation für die gesamte Seite oder verschiedene Teile enthalten. (Lernvideo-Sharing: Web-Frontend)
Konkret kann das Navigationselement in den folgenden Situationen verwendet werden.
Traditionelle Navigationsleiste: Derzeit gibt es auf Mainstream-Websites verschiedene Ebenen von Navigationsleisten, deren Funktion darin besteht, zu anderen Hauptseiten der Website zu springen.
Sidebar-Navigation: Derzeit verfügen Mainstream-Blog-Websites und E-Commerce-Websites über eine Sidebar-Navigation mit dem Zweck, vom aktuellen Artikel oder der aktuellen Produktseite zu anderen Artikeln oder anderen Produktseiten zu springen.
In-Page-Navigation: Ihre Funktion besteht darin, zwischen den Hauptkomponenten dieser Seite zu springen.
Umblättervorgang: Der Umblättervorgang wechselt den Inhalt der Webseite. Sie können wechseln, indem Sie auf „Vorherige Seite“ oder „Nächste Seite“ klicken, oder Sie können zu einer bestimmten Seite springen, indem Sie auf die tatsächliche Seitennummer klicken . Seite.
Zusätzlich zu den oben genannten Punkten können Navigationselemente auch in anderen wichtigen und grundlegenden Navigationslinkgruppen verwendet werden.
Es ist zu beachten, dass nicht alle Linkgruppen in Navigationselemente eingefügt werden müssen, sondern nur die Haupt- und Basislinks müssen in Navigationselemente eingefügt werden.
Wenn sich beispielsweise unten in der Fußzeile ein Copyright-Hinweis befindet, empfehlen wir nicht, das Navigationselement zu verwenden. Stattdessen ist es am besten, das Fußzeilenelement zu verwenden. Auf einer Seite können wir mehrere Navigationselemente als Ganzes oder in verschiedenen Teilen verwenden. Die Verwendung von Navigationselementen ist wie folgt:
Wenn Sie eine mehrstufige Verschachtelung erreichen möchten Als nächstes können wir einen neuen unabhängigen Block erstellen und den Artikel verwenden.
<body> <h1>nav的使用方法</h1> <nav> <ul> <li> <a href=”nav元素.html”>首页</a> </li> <li> <a href=”aside元素.html”>aside</a> </li> <li> <a href=”section元素.html”>section</a> </li> </ul> </nav> </body>Nav-Demonstrationsbild für mehrschichtigen Verschachtelungseffekt:
<article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>//这就实现了一层的嵌套 <article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>Fußzeilen-Renderings sind wie folgt:
Die Methode zum Zusammenfassen von Navigationselementen
1. Traditionelle Navigationsleiste
Nehmen Sie Tencent als Beispiel:
2 
(Lernvideo-Sharing:
)
Das obige ist der detaillierte Inhalt vonWelche Elemente werden zum Schreiben der Navigationsleiste in HTML5 verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!