国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Nav標(biāo)簽_html/css_WEB-ITnose

php中文網(wǎng)
發(fā)布: 2016-06-24 11:47:47
原創(chuàng)
1879人瀏覽過

nav

nav元素是一個可以用來作為頁面導(dǎo)航的鏈接組;其中的導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。并不是所有的鏈接組都要被放進(jìn)

元素;例如,在頁腳中通常會有一組鏈接,包括服務(wù)條款、首頁、版權(quán)聲明等;這時使用 元素是最恰當(dāng)?shù)?,而不需?元素。

一直以來,我們都習(xí)慣用如下這種方式來定義導(dǎo)航條:

<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>
登錄后復(fù)制

下面是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><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費(fèi)學(xué)習(xí)筆記(深入)</a>”;</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>&copy; copyright 1998 Exampland Emperor</small></p>   </footer>  </body>
登錄后復(fù)制

HTML5學(xué)習(xí)筆記簡明版(3):新元素之hgroup,header,footer,address,nav

nav并不是為了表示所謂導(dǎo)航欄,而是表示"導(dǎo)航性質(zhì)的內(nèi)容"。語義上,導(dǎo)航是跟內(nèi)容無關(guān)的,比如到首頁的鏈接,到下一篇文章的鏈接,到其它欄目的鏈接等等,但是如果是內(nèi)容本身所引述的的其它文章的鏈接,那么就不宜放在導(dǎo)航里面。

HTML5 里 section article 什么區(qū)別?header footer nav 該怎么理解?

HTML5 很多新的元素容易產(chǎn)生誤解,其中有一部分原因是因?yàn)橛行┰乇旧碛衅缌x,所表達(dá)的語義在規(guī)范中也是在不斷修正的。

并不是指視覺上的導(dǎo)航欄,而是表示帶有導(dǎo)航性質(zhì)的內(nèi)容,準(zhǔn)確的說:

元素表示一個包含多個鏈接的區(qū)域,這些鏈接指向其他頁面或本頁面的其他部分。

需要注意以下幾點(diǎn):

并不是所有的鏈接都要放到 nav 元素里面,該元素內(nèi)應(yīng)包含用于構(gòu)成主要導(dǎo)航區(qū)塊的部分。舉個反例,通常頁腳有鏈接列表鏈接到網(wǎng)站的其他頁面,比如:服務(wù)、首頁、版權(quán)頁。這種情況下,僅僅用 footer 元素就夠了,沒必要使用 nav 元素。

如果nav 元素里面的內(nèi)容描述的是一個項目列表,那就應(yīng)該用列表標(biāo)記(ol,ul等)幫助理解(增強(qiáng)語義)和導(dǎo)航。

用戶代理(如屏幕閱讀器)可以通過該元素來確定頁面上哪些內(nèi)容可以直接跳過或者按要求提供選擇。

所以通常一個頁面導(dǎo)航可以這樣寫:

<nav><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></nav>
登錄后復(fù)制

或者:

<div id="nav"><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></div>
登錄后復(fù)制

nav 元素還可以用在以下場景:

  • 目錄
  • 上一頁,下一頁按鈕,或者分頁
  • 面包屑導(dǎo)航
  • html導(dǎo)航菜單為什么都用li+a標(biāo)簽,而不直接用a標(biāo)簽,或者用nav+a標(biāo)簽,html5中導(dǎo)航菜單該怎樣寫?

    @丁小倪 的說法有點(diǎn)偏激了。nav元素是區(qū)塊內(nèi)容(sectioning content),也就是會最終影響文檔大綱(outline)生成的元素。它僅僅反映其內(nèi)容包含導(dǎo)航,但并沒有表達(dá)其內(nèi)容的形式。導(dǎo)航內(nèi)容可以是一個鏈接的列表,也可以是一段自然文本中內(nèi)嵌了導(dǎo)航鏈接。

    按 W3C 對 nav元素的描述(

    the nav element

    )中給出的適用場景例子,我簡化一下,用法可以是:

    <nav><ul><li><a href="/home">Home</li><li><a href="/about">About</a></li><li><a href="/links">Links</a></li></ul></nav>
    登錄后復(fù)制

    也可以是:

    <nav><h1>Navigation</h1><p>Welcome to my website. To see latest blog posts, please go to <a href="/blog">my blog</a>. You can find my books and papers in the <a href="/publications">publication</a> section. If you are interested in my work, please contact    me by fill in the contact form <a href="/contact">here</a>.</p></nav>
    登錄后復(fù)制

    如果內(nèi)容是列表,那用ul>li的方式也是很合適的,并不能說濫用。一個列表并不會因?yàn)樗环旁?nav 中就不是列表了,這是內(nèi)容本質(zhì)的問題。nav相比 ul從語義上來說,抽象層次更高,因?yàn)樗踔烈呀?jīng)與內(nèi)容的組織形式解耦了。

    而對于 dd、dl、dt,你可以把它看成一個名值對的列表,常與 dfn元素一起使用,比較合適的場景是元數(shù)據(jù)的表達(dá)、詞典的詞條等等。@趙望野 的說法也有點(diǎn)問題,dt與 dd并不需要成對出現(xiàn),它們是多對多的映射(
    dl element

    )。可以看下 HTML5 Doctor 上的這篇文章:

    The dl element

    要想對 HTML 元素有更深入的理解,我個人比較推薦結(jié)合 HTML5 Doctor 上的文章和 HTML5 規(guī)范來閱讀。

    做導(dǎo)航欄為什么用ul>li,而不用dd dt dl?

    HTML速學(xué)教程(入門課程)
    HTML速學(xué)教程(入門課程)

    HTML怎么學(xué)習(xí)?HTML怎么入門?HTML在哪學(xué)?HTML怎么學(xué)才快?不用擔(dān)心,這里為大家提供了HTML速學(xué)教程(入門課程),有需要的小伙伴保存下載就能學(xué)習(xí)啦!

    下載
    來源:php中文網(wǎng)
    本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn
    最新問題
    開源免費(fèi)商場系統(tǒng)廣告
    最新下載
    更多>
    網(wǎng)站特效
    網(wǎng)站源碼
    網(wǎng)站素材
    前端模板
    關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
    php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
    關(guān)注服務(wù)號 技術(shù)交流群
    PHP中文網(wǎng)訂閱號
    每天精選資源文章推送
    PHP中文網(wǎng)APP
    隨時隨地碎片化學(xué)習(xí)
    PHP中文網(wǎng)抖音號
    發(fā)現(xiàn)有趣的

    Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號