ol li 有序列表標(biāo)簽

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

如果在 HTML 當(dāng)中想要呈現(xiàn)有序列表的效果，那么我們就需要 ol 和 li 標(biāo)簽了。

1. ol li 標(biāo)簽的使用

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

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

2. ol li 標(biāo)簽的作用

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

3. ol li 標(biāo)簽的特點

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

2. ol li 標(biāo)簽的程序方式默認(rèn)為豎向排列，如想橫向排列，需要借助 CSS ；

3. ol li 標(biāo)簽列表項前默認(rèn)以阿拉伯?dāng)?shù)字 1、2、3…排列；

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

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

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

   

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

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

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

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

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

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

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

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

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

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

4. 注意事項

1. ol 標(biāo)簽里只能嵌套 li 標(biāo)簽， 而 li 標(biāo)簽里可以嵌套任意標(biāo)簽。
2. ol 和 li 均為雙標(biāo)簽，都有首尾標(biāo)簽。
3. ol 和 li 默認(rèn)為豎向排列。
4. li 標(biāo)簽?zāi)J(rèn)排列方式為阿拉伯?dāng)?shù)字 1、2、3…排列。如內(nèi)層 還有 li 標(biāo)簽，默認(rèn)排列方式不變。
5. 如果想改變排列方式，可以設(shè)置 ol 標(biāo)簽的 type 屬性。
6. 因為 ol 的type屬性比較多，可以根據(jù)實際需求來設(shè)置。

5. 真實案例分享

內(nèi)部通知

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

6. 小結(jié)

1. ol li 標(biāo)簽代表有序列表， ol 代表列表整體，li 代表列表的每一個選項。
2. ol 標(biāo)簽里面只能嵌套 li 標(biāo)簽， li 標(biāo)簽可以嵌套任意標(biāo)簽。
3. ol li 標(biāo)簽?zāi)J(rèn)為豎向排列。
4. ol li 標(biāo)簽?zāi)J(rèn)排列方式為1、2、3…。
5. 可以設(shè)置 ol 的 type 屬性來改變列表項的排列方式。