在做目錄、目次等列表清單的時候如果是手動一行一行標上編碼,不僅耗時,且不利於瀏覽器解析清單,並且最重要的是,當你需要在某一行插入新的行列時,會需要重新變更所有的編碼,因此較好的做法是利用 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條目。
本文是否對您有幫助?