HTML ul 與 ol 差異

HTML 中常用到的項目標籤有 <ul></ul> 與 <ol></ol> 這兩種,兩者都是與 <li></li> 標籤做搭配,用起來幾乎一樣的寫法規則,差別在於是否有自動排序項目的功能,<ul></ul> 標籤預設僅有一個黑點的項目符號,類似「●」這樣,在不同的瀏覽器下可能呈現不同的效果,而 <ol></ol> 標籤則具有數字排序的功能,也就是預設在每個項目前會有數字顯示,從 1 開始依序排列。

HTML ul 與 ol 基本寫法
<ul>
 <li>...項目內容 ...</li>
</ul>
<ol>
 <li>...項目內容 ...</li>
</ul>
詳細語法請參閱:HTML ul li 項目標籤HTML ol li 項目標籤

無論是 <ul></ul> 還是 <ol></ol> 標籤,撰寫的規則都是一樣的,把每個項目用 <li></li> 標籤包起來,整組的 <ul></ul> 或 <ol></ol> 標籤組,都可以有無限個 <li></li> 項目標籤,但請注意過多的項目會導致處理過慢,例如 2000 個項目就有點過多,一般情況也用不到這麼多。

HTML ul 與 ol 範例參考
<ul>
 <li>星期一</li>
 <li>星期二</li>
</ul>
<ol>
 <li>星期一</li>
 <li>星期二</li>
</ul>
以上範例輸出結果如
  • 星期一
  • 星期二
  1. 星期一
  2. 星期二
從範例中可以看到 HTML 的 <ul></ul> 與 <ol></ol> 這兩種項目標籤,寫法規則完全一樣,但最後呈現出來的結果卻有很大的差異,若當時本文需要呈現有排序項目的效果,就使用 <ol></ol> 標籤,如果不需要排序,直接使用 <ul></ul> 標籤即可。

相關主題延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C