html nav標籤的作用與使用的詳解
- 黄舟原創
- 2017-06-29 14:19:458601瀏覽
HTML5中的新元素標籤c787b9a589a3ece771e842a6176cf8e9用來將具有導航性質的連結劃分在一起，使程式碼結構在語義化方面更加準確，同時對於螢幕閱讀器等設備的支援也更好。
一直以來，我們習慣使用形如eb545d6e9e25f5c0174408f6286375ad或9e490bea09a82f3ff6663081fb0e947b這樣的程式碼來寫頁面的導航；在HTML5中，我們可以直接將導覽連結清單放到c787b9a589a3ece771e842a6176cf8e9標籤中：
<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>
根據W3C的定義規格：
nav元素是一個可以用來作為頁面導覽#的連結組；其中的導航元素連結到其他頁面或目前頁面的其他部分。並不是所有的鏈接組都要被放進c787b9a589a3ece771e842a6176cf8e9元素；例如，在頁腳中通常會有一組鏈接，包括服務條款、首頁、版權聲明等；這時使用c37f8231a37e88427e62669260f0074d元素是最恰當的，而不需要c787b9a589a3ece771e842a6176cf8e9元素。
一個頁面中可以擁有多個c787b9a589a3ece771e842a6176cf8e9元素，作為頁面整體或不同部分的導航；以下是W3C給出的一個程式碼範例：
<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>
在這個範例中，我們可以看到c787b9a589a3ece771e842a6176cf8e9不僅可以用來作為頁面全域導航，也可以放在23c3de37f2f9ebcb477c4a90aac6fffd標籤內，作為單篇文章內容的相關導航連結到目前頁面的其他位置。
以上是html nav標籤的作用與使用的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn