有序列表的各個列表項是有順序的。有序列表從<ol>開始,到</ol>結束,中間的列表項是<li>標簽內容。有序列表的列表項是有先後順序的,一般采用數字或字母作為順序,默認是采用數字順序。
語法:
<ol> <li>有序列表項</li> <li>有序列表項</li> <li>有序列表項</li> </ol>
說明:
<ol>,即“ordered list(有序列表)”。<li>,即“list(列表項)”。理解標簽語義更有利於你記憶,而記憶HTML標簽的語義是HTML的基礎。更多標簽語義請查看HTML標簽的含義。
在該語法中,<ol>和</ol>標志著有序列表的開始和結束,而<li>和</li>標簽表示這是一個列表項。在有序列表中可以包含多個列表項。
注意,<ol>標簽和<li>標簽是配合使用,沒有單獨使用,而且<ol>標簽內部不能存在任何其他標簽,一般情況下只能存在<li>標簽(對於初學者,我們忽略嵌套列表)。這個概念要非常清楚,在網站開發中很容易犯錯。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>有序列表</title> </head> <body> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Ajax</li> <li>SEO</li> <li>ASP.NET</li> </ol> </body> </html>
在浏覽器預覽效果如下:
看到上面的例子,初學者會問,我們只能用數字來表示列表項的順序碼?默認情況下,有序列表使用數字作為列表項符號,不過我們可以通過有序列表type屬性來改變列表項符號。
type屬性實現的效果可以用CSS的list-style-type實現,作為初學者我們可以先用一下type屬性,到時候學了CSS入門教程之後,我們直接摒棄type屬性,而全部改用CSS控制樣式。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>有序列表</title> </head> <body> <ol type="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Ajax</li> <li>SEO</li> <li>ASP.NET</li> </ol> </body> </html>
在浏覽器預覽效果如下:
疑問
1、有序列表語法格式:
<ol> <li>有序列表項</li> <li>有序列表項</li> <li>有序列表項</li> </ol>
學習了CSS之後,有序列表列表項符號由list-style-type屬性定義,到時候應該摒棄type屬性。