Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Funktion und Verwendung des HTML-Navigations-Tags

Ausführliche Erläuterung der Funktion und Verwendung des HTML-Navigations-Tags

黄舟Original: 2017-06-29 14:19:458528Durchsuche

Das neue Element-Tag c787b9a589a3ece771e842a6176cf8e9 in HTML5 wird verwendet, um Links mit Navigation-Eigenschaften zusammenzufassen, wodurch die Codestruktur im Hinblick auf die Semantik genauer wird und gleichzeitig Für den Bildschirm ist auch die Unterstützung für Geräte wie Lesegeräte besser.
Seit langem sind wir es gewohnt, Codes wie eb545d6e9e25f5c0174408f6286375ad zu verwenden, um die Seitennavigation direkt zu schreiben Die Linkliste wird im c787b9a589a3ece771e842a6176cf8e9-Tag platziert:

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

Gemäß der W3C-Definitionsspezifikation:

nav-Element kann als Seitennavigation Eine Linkgruppe; darin enthaltene Navigationselemente verweisen auf andere Seiten oder andere Teile der aktuellen Seite. Es müssen nicht alle Linkgruppen in das c787b9a589a3ece771e842a6176cf8e9-Element eingefügt werden, in diesem Fall ist es normalerweise eine Gruppe von Links, einschließlich Nutzungsbedingungen, Homepage, Urheberrechtserklärung usw Am besten ist die Verwendung des c37f8231a37e88427e62669260f0074d-Elements, ohne dass das c787b9a589a3ece771e842a6176cf8e9-Element erforderlich ist.

Eine Seite kann mehrere c787b9a589a3ece771e842a6176cf8e9-Elemente als Navigation für die gesamte Seite oder verschiedene Teile haben. Das Folgende ist ein Codebeispiel von W3C:

In diesem Beispiel können wir sehen, dass c787b9a589a3ece771e842a6176cf8e9 nicht nur als globale Navigation der Seite verwendet werden kann, sondern auch innerhalb des 23c3de37f2f9ebcb477c4a90aac6fffd-Tags platziert werden kann, um als Navigation auf andere Teile der aktuellen Seite zu verweisen bezogen auf den Inhalt eines einzelnen Artikels.

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Funktion und Verwendung des HTML-Navigations-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fortschritts- und Meterkontrollen in HTML5Nächster Artikel：Fortschritts- und Meterkontrollen in HTML5

In Verbindung stehende Artikel

Mehr sehen