html5編寫導覽列用什麼元素
- 青灯夜游原創
- 2022-12-12 18:38:573506瀏覽
html5寫導覽列用nav元素。 nav元素是導航元素，用於定義導航鏈接，可以將具有導航性質的連結歸納在一個區域中，使頁面元素的語義更加明確。 nav元素可用於的場合：1、傳統導航條，其作用是跳轉到網站的其他主頁面；2、側邊欄導航，目的是將當前文章或當前商品頁面跳到其他文章或其他商品頁面；3、頁內導航，作用是在本頁面幾個主要的組成部分之間進行跳轉；4、翻頁操作。
本教學操作環境：windows7系統、HTML5版、Dell G3電腦。
HTML5 nav元素（導航元素）
nav元素用於定義導航鏈接，是HTML5新增的元素，該元素可以將具有導航性質的連結歸納在一個區域中，使頁面元素的語義更加明確。其中的導航元素可以連結到網站的其他頁面，或當前頁的其他部分。例如下面這段範例程式碼：
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>在上面這段程式碼中，透過在nav元素內部嵌套無序列表ul來建立導覽結構。通常，一個HTML頁面中可以包含多個nav元素，作為頁面整體或不同部分的導覽。 （學習影片分享：web前端）
具體來說，nav元素可以用於以下幾種場合。
傳統導航條：目前主流網站上都有不同層級的導航條，其作用是跳到網站的其他主頁。
側邊欄導航：目前主流部落格網站及電商網站都有側邊欄導航，目的是將當前文章或當前商品頁面跳到其他文章或其他商品頁面。
頁內導覽：它的作用是在本頁面幾個主要的組成部分之間進行跳躍。
翻頁動作：翻頁動作切換的是網頁的內容部分，可以透過點選「上一頁」或「下一頁」切換，也可以透過點選實際的頁數跳到某一頁。
除了以上幾點以外，nav元素也可以用於其他重要的、基本的導覽連結群組。
要注意的是，並不是所有的連結群組都要被放進 nav元素，只需要將主要的、基本的連結放進nav元素即可。
比如說頁腳底部如果有個版權申明，我們就不建議使用nav元素，而是使用footer元素是最適合的。一個頁面中我們可用多個nav元素作為整體或不同部分的導航
nav元素的用法
<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元素效果示範圖如下：
如果想實現多層嵌套，我們可以在下面新建一個獨立的區塊，我們使用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>//这就实现了一层的嵌套 <article> <header> <h2>NAV-1</h2> <nav> <li> <a href=”section元素.html”>section</a> </li> <li> <a href=”新增的主体结构元素.html”>s新增的主体结构元素</a> </li> </header> </article>
Nav多層嵌套效果示範圖：
#如果在底部有一些版權資訊的話，我們最好加在footer裡面。
<footer> <p> <a href=”/”>版权信息</a> <a href=”/”>站点帮助</a> <a href=”/”>联系我们</a> </p> </foooter>
Footer效果圖如下：
#總結nav元素的方法
1、傳統的導航條
以騰訊為例：
2、側邊欄導覽
3、內頁面導航
（學習影片分享：web前端）
以上是html5編寫導覽列用什麼元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！