ol li 有序列表標簽

我們在上一章節學習了無序列表，這一章節我來學習列表的另一種分類：有序列表。有序列表，顧名思義就是有順序的列表，每一個列表項有前后順序之分，呈先后排列關系。例如以下效果：

如果在 HTML 當中想要呈現有序列表的效果，那么我們就需要 ol 和 li 標簽了。

1. ol li 標簽的使用

我們在之前的章節中介紹過，理論上標簽與標簽之間是可以任意嵌套的。但是 ol 和 li 標簽比較特殊，ol 標簽里只能嵌套 li 標簽。ol 代表整個列表，li 標簽代表有序列表的每一個選項。我們可以把 ol 標簽 理解為一個殼，里面嵌套著 li 代表的選項。如下圖所示：

<ol>
    <li>吃飯</li>
    <li>睡覺</li>
    <li>打豆豆</li>
</oL>

2. ol li 標簽的作用

ol li 標簽用來定義有序列表，但 ol li 標簽會有默認樣式，所有的列表選項默認以阿拉伯數字 1，2，3 開始排列，如想修改列表的排列的樣式，可以設置 ol 的 type 屬性。通常有序列表代表每個列表選項之間都順序排列。適應于排行，通知等實際場景。

3. ol li 標簽的特點

1. ol 標簽代表整個列表，里面只能 li 標簽，li 標簽代表列表的每一項；

2. ol li 標簽的程序方式默認為豎向排列，如想橫向排列，需要借助 CSS ；

3. ol li 標簽列表項前默認以阿拉伯數字 1、2、3…排列；

4. 每一個列表項有順序；

5. li 標簽里可以再嵌套 ol 標簽，如 li 標簽嵌套了 ol 標簽，內層列表的默認排列方式不會改變，具體如下圖所示：

   <ol>
       <li>
         <ol>
           <li>紅蘋果</li>
           <li>青蘋果</li>
         </ol>
       </li>
       <li>香蕉</li>
       <li>橘子</li>
     </ol>
   

   

   這樣代表外層的列表的第一個選項又是一個列表。

6. 如果想改變 LI 列表選項的排列方式，可以設置 ol 的 type 屬性， type 屬性的可選值為 1、A、a、I、i，默認為1。

   如果設置 ol type 屬性為 A，則列表排列方式為 A、B、C…的英文大寫字母排列，如下圖：

    <ol type="A">
       <li>蘋果</li>
       <li>香蕉</li>
       <li>橘子</li>
       <li>西瓜</li>
       <li>葡萄</li>
    </ol>
   

如果如果設置 ol type 屬性為 a，則列表排列方式為 a、b、c…的英文大寫字母排列，如下圖：

<ol type="a">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>葡萄</li>
 </ol>

如果如果設置 ol type 屬性為 i，則列表排列方式為 i、ii、iii、iv…的小寫羅馬數字排列，如下圖：

<ol type="i">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>葡萄</li>
</ol>

如果如果設置 ol type 屬性為 I，則列表排列方式為 I、II、III、IV…的大寫羅馬數字排列，如下圖：

<ol type="I">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>葡萄</li>
</ol>

4. 注意事項

1. ol 標簽里只能嵌套 li 標簽， 而 li 標簽里可以嵌套任意標簽。
2. ol 和 li 均為雙標簽，都有首尾標簽。
3. ol 和 li 默認為豎向排列。
4. li 標簽默認排列方式為阿拉伯數字 1、2、3…排列。如內層 還有 li 標簽，默認排列方式不變。
5. 如果想改變排列方式，可以設置 ol 標簽的 type 屬性。
6. 因為 ol 的type屬性比較多，可以根據實際需求來設置。

5. 真實案例分享

內部通知

<h1>普通話考試通知</h1>
	<p>我院今年3月份的普通話水平測試開始接受報名，具體事項通知如下：</p>
	<ol>
	<li>報名</li>
		<ol type="A">
		<li>報名時間：3月16-21日，逾期不予受理。</li>
		<li>報名地點：所在院系辦公室。</li>
		<li>報名費用：按物價局規定85元/人/次(含培訓費用)，報名時交齊。</li>
		<li>提交資料及注意事項：</li>
			<ol type="a">
			<li>參加測試的學生須填寫《河南省普通話水平測試報名表》一份(準考證號碼 不用填寫)；</li>
			<li>填寫準考證一份(編號不用填寫)，所填姓名和出生年月須與身份證一致；</li>
			<li>提交小一寸彩色證件照3張(照片不能是打印版、不能是生活照，3張照片必須統一底片)，其中兩張照片貼在報名表和準考證上，另一張用鋼筆在背面寫上校名、系名和姓名，與表格一起上交。</li>
			</ol>
		</ol>
	<li>測試</li>
	<li>培訓</li>
	<p>(注：具體時間和地點按河南財經學院測試站發回的準考證上所列)</p>
	</ol>

6. 小結

1. ol li 標簽代表有序列表， ol 代表列表整體，li 代表列表的每一個選項。
2. ol 標簽里面只能嵌套 li 標簽， li 標簽可以嵌套任意標簽。
3. ol li 標簽默認為豎向排列。
4. ol li 標簽默認排列方式為1、2、3…。
5. 可以設置 ol 的 type 屬性來改變列表項的排列方式。