詳解HTML5中ol標(biāo)簽的用法
我要評(píng)論定義和用法
<ol> 標(biāo)簽定義有序列表。
HTML 4.01 與 HTML 5 之間的差異
在 HTML 4.01 中，不贊成使用 "start" 屬性，在 HTML 5 中是允許的。
在 HTML 4.01 中，不贊成使用 "compact" 和 "type" 屬性，在 HTML 5 中，不再支持這兩個(gè)屬性。
提示和注釋
提示：請(qǐng)使用 CSS 來(lái)定義列表的類型。
例子
- <ol>
- <li>Coffee</li>
- <li>Tea</li>
- </ol>
- <ol>
- <li start="60">Coffee</li>
- <li>Tea</li>
- </ol>
HTML5提供的OL標(biāo)簽序號(hào)控制
OL這標(biāo)簽是以有序列表的形式來(lái)顯示數(shù)據(jù)的，它會(huì)自動(dòng)為數(shù)據(jù)加上編號(hào)。但是有時(shí)候數(shù)據(jù)并不是從1開始編號(hào)的，或者編號(hào)是倒序排列的，又或者編號(hào)是完全雜亂的，這時(shí)就需要用到HTML5中對(duì)OL標(biāo)簽提供的一些參數(shù)來(lái)設(shè)置。不過遺憾的是，目前它還不兼容IE。
現(xiàn)在，我們有一個(gè)這樣的HTML文檔
- <ol>
- <li>土豆</li>
- <li>洋蔥</li>
- <li>胡蘿卜</li>
- <li>里脊肉</li>
- </ol>
它會(huì)顯示成這樣
這些序號(hào)默認(rèn)是從1開始遞增的。如果需要讓OL標(biāo)簽中的序號(hào)倒序排列呢？這只要對(duì)OL加個(gè)reserved屬性即可。
- <ol reversed="reversed">
- 這個(gè)是繼承自XHTML的寫法，其實(shí)可以直接寫
- <ol reversed>
這就已經(jīng)符合HTML5的標(biāo)準(zhǔn)了，加上這個(gè)后就可以得到這樣的結(jié)果
Chrome和Firefox中都是沒問題的，但是IE不兼容它（至少我測(cè)試了IE10是不兼容的）。嘛，咱現(xiàn)在只是了解一下這個(gè)功能，至于IE實(shí)不實(shí)現(xiàn)暫時(shí)就不再討論了。
接著，如果不想讓它從1開始呢？比如要讓它從3開始，我們就可以給OL標(biāo)簽添加start屬性，并設(shè)置為3。
- <ol start="3">
最后，對(duì)于完全無(wú)規(guī)律卻又是有序的東西怎么做呢？比如我要2、1、3、4，這樣的排列怎么辦？其實(shí)，只要給LI加上value屬性就可以控制這個(gè)序號(hào)。
- <ol>
- <li value="2">土豆</li>
- <li value="1">洋蔥</li>
- <li value="3">胡蘿卜</li>
- <li value="4">里脊肉</li>
- </ol>
相關(guān)文章
HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別簡(jiǎn)介
這篇文章主要介紹了HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別,是網(wǎng)頁(yè)前端編程入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-11-07簡(jiǎn)單介紹HTML5中audio標(biāo)簽的使用
這篇文章主要介紹了HTML5中audio標(biāo)簽的使用,在各瀏覽器中添加音頻播放控件,需要的朋友可以參考下2015-09-24- 這篇文章主要介紹了HTML5中的template標(biāo)簽,是HTML5入門中的重要知識(shí),需要的朋友可以參考下2015-06-19
HTML5 video標(biāo)簽（播放器）學(xué)習(xí)筆記（二）:播放控制
這篇文章主要介紹了HTML5 video標(biāo)簽（播放器）學(xué)習(xí)筆記（二）:播放控制,本文講解了獲取影片總時(shí)長(zhǎng)、播放、暫停、獲取影片的播放時(shí)間和設(shè)置播放點(diǎn)、音量的獲取和設(shè)置等內(nèi)容,2015-04-24HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹
這篇文章主要介紹了HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹,本文講解了2015-04-24- 做移動(dòng)端有一段時(shí)間，今天有同事問了我 article 和 section 標(biāo)簽的使用，模模糊糊的解釋了下，他似懂非懂，有點(diǎn)小尷尬。忽然間覺得自己有必要再翻翻書籍，重溫下 html5 的2014-03-07
HTML5語(yǔ)音識(shí)別標(biāo)簽寫法附圖
HTML5中有個(gè)語(yǔ)音識(shí)別的標(biāo)簽，利用它可以實(shí)現(xiàn)語(yǔ)音輸入，個(gè)人感覺還是不錯(cuò)的，下面有個(gè)示例及截圖，喜歡的朋友可以參考下2013-11-18html5 video標(biāo)簽屏蔽右鍵視頻另存為的js代碼
html5 video標(biāo)簽本身有下載功能但是在video區(qū)域內(nèi)，點(diǎn)擊右鍵可以將“視頻另存為”下面是屏蔽右鍵視頻另存為的js代碼，有此需求的朋友不要錯(cuò)過2013-11-12- HTML 5 是一個(gè)新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，目標(biāo)在于取代現(xiàn)有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 標(biāo)準(zhǔn)，本文給大家介紹HTML5標(biāo)簽使用方法詳解，對(duì)html5標(biāo)簽使用相關(guān)內(nèi)容感興趣2015-11-27