html nav標籤的作用與使用的詳解-html教學-PHP中文網

首頁

web前端

html教學

html nav標籤的作用與使用的詳解

Jun 29, 2017 pm 02:19 PM

html 用的詳解

HTML5中的新元素標籤<nav>用來將具有導航性質的連結劃分在一起，使程式碼結構在語義化方面更加準確，同時對於螢幕閱讀器等設備的支援也更好。
一直以來，我們習慣使用形如<div id="nav">或<ul id="nav">這樣的程式碼來寫頁面的導航；在HTML5中，我們可以直接將導覽連結清單放到<nav>標籤中：

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

登入後複製

根據W3C的定義規格：

一個頁面中可以擁有多個<nav>元素，作為頁面整體或不同部分的導航；以下是W3C給出的一個程式碼範例：

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

登入後複製

在這個範例中，我們可以看到<nav>不僅可以用來作為頁面全域導航，也可以放在<article>標籤內，作為單篇文章內容的相關導航連結到目前頁面的其他位置。

以上是html nav標籤的作用與使用的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn