在做目錄、目次等列表清單的時候如果是手動一行一行標上編碼，不僅耗時，且不利於瀏覽器解析清單，並且最重要的是，當你需要在某一行插入新的行列時，會需要重新變更所有的編碼，因此較好的做法是利用 HTML 既有的列表清單：<ol>或<ul>，而它們有何差異？又該如何使用？以下來看看說明。
ol 有序列表
<ol>是有序列表，也就是會自動編上編號，不需要手動加上數字，而根據不同的需求，可以有不同的編號方式，如 1、2、3 或一、二、三等。每一行都用<li>包夾，它代表的是列表中的條目。
<ol>
<li>這是第一條目。</li>
<li>這是第二條目。</li>
</li>
</ol>
呈現結果：
- 這是第一條目。
- 這是第二條目。
ul 無序列表
<ul>是無序列表，也就是以圓點或其他符號來標示，條目彼此之間沒有順序關係，而根據不同的需求，可以有不同的符號，如實心方塊、空心圓點等。每一行一樣是用<li>包夾，它代表的是列表中的條目。
<ul>
<li>這是第一條目。</li>
<li>這是第二條目。</li>
</li>
</ul>
呈現結果：
- 這是第一條目。
- 這是第二條目。
如何變更編號類型
可以利用 CSS 變更編號類型，CSS 屬性為list-style，值有很多種，比方說想要呈現中文的一、二、三形式，其值為cjk-ideographic。
<ol style="list-style:cjk-ideographic">
<li>這是第一條目。</li>
<li>這是第二條目。</li>
</li>
</ol>
呈現結果：
- 這是第一條目。
- 這是第二條目。
如何包子條目（嵌套列表）
只要在li中再做一次ol或ul清單列表即可，另外，他們是可以交叉使用的，例如ol中可以包ul，ul中也可以包ol。
<ol>
<li>這是第1條目。</li>
<li>這是第2條目。
<ol>
<li>這是第2條目中的第1條目</li>
<li>這是第2條目中的第2條目</li>
</li>
</ol>
</li>
<li>這是第3條目。</li>
</ol>
- 這是第1條目。
- 這是第2條目。
- 這是第2條目中的第1條目
- 這是第2條目中的第2條目
- 這是第3條目。