HTML <ol> 标签

发表于2015-05-26 09:51:57| --次阅读| 来源webkfa| 作者小五

摘要：<ol> 标签定义有序列表

实例
有序 HTML 列表：

		html代码
	

运行代码

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

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

定义和用法
<ol> 标签定义有序列表。

HTML 与 XHTML 之间的差异
在 HTML 4.01 中，ol 元素的 "compact"、"start" 以及 "type" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中，ol 元素的 "compact"、"start" 以及 "type" 属性是不被支持的。

提示和注释：
提示：请使用 CSS 来定义列表的类型。

属性
New：HTML5 中的新属性。

		代码
	

//HTML5 中不支持。HTML 4.01 中不赞成使用。
//规定列表呈现的效果比正常情况更小巧。
compact=compact

//规定列表顺序为降序。(9,8,7...)
reversed=reversed

//规定有序列表的起始值。
start=number

//规定在列表中使用的标记类型。
type=1|A|a|I|i

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

不同类型的有序列表
本例演示不同类型的有序列表。

		html代码
	

运行代码

<html>
<body>

<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>
</html>

<html>
<body>

<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>
</html>

HTML <ol> 标签

发表于2015-05-26 09:51:57| --次阅读| 来源webkfa| 作者小五

相关文章

html标题快速浏览101

相关文章