二维码
搜索 ×

HTML 有序列表

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML 有序列表

HTML 标记定义一个有序列表。一 有序列表可以是数字或字母。<ol>

有序的 HTML 列表

有序列表以标记开头。每个列表项都以标记开头。<ol>``<li>

默认情况下，列表项将用数字标记：

1
2
3
4
5
<ol>  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  
</ol>

有序 HTML 列表 - Type 属性

标记的属性，定义 列表项标记：type``<ol>

Type Description
type=“1” The list items will be numbered with numbers (default)
type=“A” The list items will be numbered with uppercase letters
type=“a” The list items will be numbered with lowercase letters
type=“I” The list items will be numbered with uppercase roman numbers
type=“i” The list items will be numbered with lowercase roman numbers
数字 
1
2
3
4
5
6
<ol type="1">  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  

</ol>

大写字母 
1
2
3
4
5
6
<ol type="A">  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  

</ol>

小写字母 
1
2
3
4
5
6
<ol type="a">  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  

</ol>

大写罗马数字 
1
2
3
4
5
6
<ol type="I">  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  

</ol>

小写罗马数字 
1
2
3
4
5
6
<ol type="i">  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  

</ol>

控制列表计数

默认情况下，有序列表将从 1 开始计数。如果要从指定的数字开始计数，可以使用以下属性：start

1
2
3
4
5
6
<ol start="50">  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  

</ol>

嵌套 HTML 列表

列表可以嵌套（列表内部的列表）：

1
2
3
4
5
6
7
8
9
10
<ol>  
  <li>Coffee</li>  
  <li>Tea  
    <ol>  
      <li>Black tea</li>  
      <li>Green tea</li>  
    </ol>  
  </li>  
  <li>Milk</li>  
</ol>

注意： 列表项 （） 可以包含 一个新列表，以及其他 HTML 元素，如图像和链接等。<li>

本章小结

  • 使用 HTML 元素定义有序列表<ol>
  • 使用 HTML 属性定义编号类型type
  • 使用 HTML 元素定义列表项<li>
  • 列表可以嵌套
  • 列表项可以包含其他 HTML 元素

HTML 列表标签

Tag Description
[<ul>] Defines an unordered list
[<ol>] Defines an ordered list
[<li>] Defines a list item
[<dl>] Defines a description list
[<dt>] Defines a term in a description list
[<dd>] Describes the term in a description list

有关所有可用 HTML 标记的完整列表，请访问我们的 [HTML 标记参考]。

推荐教程