<ol> | HTML有序列表标签的定义与用法

由 hcduguo

定义与用法

  • HTML <ol>标签定义有序列表；
  • HTML排序列表或编号列表以编号格式显示元素；
  • 我们可以使用数字顺序、字母顺序等格式来显示项目。

编号列表有几种不同类型：

  • 数值（1,2,3）
  • 大写罗马数字（I II III）
  • 小罗马数字（i ii iii）
  • 大写字母（ABC）
  • 小写字母（abc）

<ol>标签中有5种属性用来表示不同的有序列表：

类型描述
“ 1”这是默认类型。在这种类型中，列表项用数字编号。
“ I”在这种类型中，列表项以大写罗马数字编号。
“ i”在此类型中，列表项使用小写罗马数字编号。
“ A”在此类型中，列表项用大写字母编号。
“ a”在此类型中，列表项用小写字母编号。

语法格式

<ol type=””>  

 <li>……</li>  

</ol>  

示例代码

type =“ 1”(默认类型)

<ol>  
 <li>HTML教程</li>  
 <li>Java教程</li>  
 <li>JavaScript教程</li>  
 <li>SQL教程</li>  
</ol>

效果展示：

  1. HTML教程
  2. Java教程
  3. JavaScript教程
  4. SQL教程

type =“ I”

<ol type="I">  
 <li>HTML教程</li>  
 <li>Java教程</li>  
 <li>JavaScript教程</li>  
 <li>SQL教程</li>  
</ol>

效果展示：

  1. HTML教程
  2. Java教程
  3. JavaScript教程
  4. SQL教程

type =“ i”

<ol type="i">  
 <li>HTML教程</li>  
 <li>Java教程</li>  
 <li>JavaScript教程</li>  
 <li>SQL教程</li>  
</ol>

效果展示：

  1. HTML教程
  2. Java教程
  3. JavaScript教程
  4. SQL教程

type =“ A”

<ol type="A">  
 <li>HTML教程</li>  
 <li>Java教程</li>  
 <li>JavaScript教程</li>  
 <li>SQL教程</li>  
</ol>

效果展示：

  1. HTML教程
  2. Java教程
  3. JavaScript教程
  4. SQL教程

type =“ a”

<ol type="a">  
 <li>HTML教程</li>  
 <li>Java教程</li>  
 <li>JavaScript教程</li>  
 <li>SQL教程</li>  
</ol>

效果展示：

  1. HTML教程
  2. Java教程
  3. JavaScript教程
  4. SQL教程

start属性

<ol type="a" start="5">  
 <li>HTML教程</li>  
 <li>Java教程</li>  
 <li>JavaScript教程</li>  
 <li>SQL教程</li>  
</ol>

效果展示：

  1. HTML教程
  2. Java教程
  3. JavaScript教程
  4. SQL教程

HTML 与 XHTML差异

  • 在 HTML 4.01 中，ol 元素的 “compact”、”start” 以及 “type” 属性是不被赞成使用的。
  • 在 XHTML 1.0 Strict DTD 中，ol 元素的 “compact”、”start” 以及 “type” 属性是不被支持的。

浏览器支持

所有主流浏览器都支持 <ol> 标签。

标签属性

: HTML5新标签。

属性值描述
compactcompactHTML5 中不支持，不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。
reversedreversed指定列表倒序(9,8,7…)
startnumber一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
typea 表示小写英文字母编号A 表示大写英文字母编号i 表示小写罗马数字编号I 表示大写罗马数字编号1 表示数字编号（默认）规定列表的类型。不赞成使用。请使用样式代替。

全局属性

<ol> 标签支持 HTML 中的全局属性。

事件属性

<ol> 标签支持 HTML 中的事件属性。

相关