Ausführliche Erläuterung der Funktion und Verwendung des HTML-Navigations-Tags-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

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

Jun 29, 2017 pm 02:19 PM

html Gebraucht 详解

Das neue Element-Tag <nav> 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 <div id="nav"> zu verwenden, um die Seitennavigation direkt zu schreiben Die Linkliste wird im <nav>-Tag platziert:

&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;

Nach dem Login kopieren

Gemäß der W3C-Definitionsspezifikation:

nav-Element kann als Seitennavigation< verwendet werden 🎜> Eine Linkgruppe; darin enthaltene Navigationselemente verweisen auf andere Seiten oder andere Teile der aktuellen Seite. Es müssen nicht alle Linkgruppen in das <nav>-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 <footer>-Elements, ohne dass das <nav>-Element erforderlich ist.

Eine Seite kann mehrere <nav>-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 <nav> nicht nur als globale Navigation der Seite verwendet werden kann, sondern auch innerhalb des <article>-Tags platziert werden kann, um als Navigation auf andere Teile der aktuellen Seite zu verweisen bezogen auf den Inhalt eines einzelnen Artikels.

&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;

Nach dem Login kopieren

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!

Erklärung dieser Website

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