HTML <ol> 有序列表

admin發表於2018-11-06
HTML

ol的英文全稱是ordered lists，翻譯成漢語就是有序列表的意思。

顧名思義，使用<ol>標籤可以建立有序列表，列表前端具有能夠標明順序的標識。

利用<ol>的type屬性就可以實現有序排序功能。

type屬性值：

（1）.1表示以1,2,3,4方式排序。

（2）.a表示以a,b,c,d方式排序。

（3）.A表示以A,B,C,D方式排序。

（4）.i表示以i,ii ,iii方式排序。

（5）.I表示以 I,II,III方式排序。

<ol>是具體列表的父元素，<li>元素用於定義真正的列表內容。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>   
</head> 
<body> 
<ol type="1" start="5">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ol>
<ol type="a">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ol><ol type="A">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ol><ol type="i">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ol>
<ol type="I">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ol>
</body> 
</html>


程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/101823lsje4loqlgss0os1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼演示了各種排序效果。

但是在實際應用中通常不會使用列表自帶的屬性，而是使用CSS控制。

相關內容可以參閱HTML <ul> 無序列表一章節。

相關文章