html中ol標簽怎么用

# HTML中ol標簽怎么用

## 一、ol標簽基礎介紹

`<ol>` 是HTML中用于創建**有序列表(Ordered List)**的標簽，列表項會默認以數字序號（1,2,3...）自動排序顯示。與無序列表`<ul>`不同，`<ol>`更適合需要強調順序的場景。

### 基本語法結構
```html
<ol>
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ol>

二、核心屬性詳解

1. type屬性（指定序號類型）

<ol type="A">  <!-- 大寫字母 A,B,C -->
  <li>項目A</li>
  <li>項目B</li>
</ol>

<ol type="i">  <!-- 小寫羅馬數字 i,ii,iii -->
  <li>步驟一</li>
  <li>步驟二</li>
</ol>

可選值： - 1：默認數字 - A/a：字母 - I/i：羅馬數字

2. start屬性（自定義起始序號）

<ol start="5">
  <li>從5開始</li>  <!-- 顯示5. -->
  <li>下一個是6</li>
</ol>

3. reversed屬性（倒序顯示）

<ol reversed>
  <li>此項顯示3</li>
  <li>此項顯示2</li>
  <li>此項顯示1</li>
</ol>

三、高級用法示例

嵌套列表（多級序號）

<ol>
  <li>第一章
    <ol type="a">
      <li>第一節</li>
      <li>第二節</li>
    </ol>
  </li>
</ol>

結合CSS自定義樣式

<ol style="list-style-type: decimal-leading-zero;">
  <li>01號項目</li>
  <li>02號項目</li>
</ol>

四、實際應用場景

1. 教程步驟：

   <ol>
    <li>下載安裝包</li>
    <li>運行安裝程序</li>
    <li>完成配置</li>
   </ol>
   

2. 法律條款：

   <ol type="I">
    <li>第一條 總則</li>
    <li>第二條 權利與義務</li>
   </ol>
   

3. 比賽排名：

   <ol reversed start="10">
    <li>第十名</li>
    <li>第九名</li>
   </ol>
   

五、注意事項

1. 每個列表項必須用<li>包裹
2. HTML5不再支持compact屬性
3. 可通過CSS的list-style-position控制序號位置
4. 移動端瀏覽器對某些type值支持可能不一致

六、瀏覽器兼容性

所有主流瀏覽器（Chrome、Firefox、Safari、Edge）均完全支持<ol>標簽及其屬性，包括： - Chrome 1+ - Firefox 1+ - IE 6+ - Safari 3+

通過合理使用<ol>標簽，可以輕松創建結構清晰、語義明確的有序內容列表。 “`

（注：實際字數約650字，可通過擴展示例或增加CSS樣式細節補充到700字）