• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <ol>

    HTML<ol>表示多个有序列表项,通常渲染为有带编号的列表。

    浏览器支持

    目前大多数浏览器支持<ol>标签。

    示例

    简单示例

    <ol>
      <li>first item</li>
      <li>second item</li>
      <li>third item</li>
    </ol>
    

    以上 HTML 输出如下:

    1. first item
    2. second item
    3. third item

    标签定义及使用说明

    • <ol>标签定义了一个有序列表。列表排序以数字来显示。请使用<ul>标签定义无序列表,使用<li>标签来定义列表选项。使用 CSS 来定义列表样式。
    • 通常,有序列表条目和它前面的编号一起显示,它的编号可以是任何形式,如数字、字母或者罗马数字,甚至可以是小子弹。而这种样式(小子弹)并没有在 HTML 页面内定义,而是在其关联的 CSS 中,使用了list-style-type属性。
    • HTML 并没有对<ol><ul>元素的深度和反复使用次数(overlap)作出限制。
    • <ol><ul>都是列表项。它们的不同点在于<ol>元素里条目的顺序是有意义的。对于该选择哪一个去使用下面有个建议:尝试去更改列表项的顺序,如果其含义改变了,那么应该使用<ol>元素,否则使用<ul>更合适。
    • 内容分类流内容, and if the<ol>element's children include at least one<li>element, 段落内容元素.
    • 允许的内容一个或多个<li>元素。这些<li>元素可以再包含嵌套的<ol><ul>元素。
    • 标签省略不允许,开始标签和结束标签都不能省略。
    • 允许的父元素任何接受流内容的元素流内容.
    • Permitted ARIA rolesdirectory,group,listbox,menu,menubar,radiogroup,tablist,toolbar,tree,presentationDOM 接口HTMLOListElement

    属性

    这个元素包含全局属性.

    • compact这个是布尔属性,规定了列表要用紧凑的方式渲染。这个属性的具体渲染方式由客户端决定,并不能被所有浏览器支持决定。Note:不要使用这个属性,这个属性已经过时:<ol>元素的样式应当使用CSS来控制,想要获得和这个属性相似的效果,使用CSS属性line-height并设置值为80%.
    • reversedHTML5
      这个布尔属性规定了列表的条目采用倒序,即最不重要的条目放在列表第一个位置。
    • startHTML5
      这是整数属性,规定了列表得条目序号的开始的值。尽管列表条目的序号可能是罗马字母顺序,如XXXI,或者字母,这个开始的顺序总是使用数字表示。比如想要元素序号从字母“C”开始,使用<ol start="3">。
      Note:这个属性在 HTML4中弃用,但是在 HTML5 中被重新引入。
    • type编号类型:
      • 'a'表示小写字母编号;
      • 'A'表示大写字母编号;
      • 'i'表示小写罗马数字编号;
      • 'I'表示大写罗马数字编号;
      • '1'表示数字编号(默认值)。

      除非在封闭的<li>元素中使用不同的type属性,否则类型集将用于整个列表。

      Note:这个属性在 HTML4中弃用,但是在 HTML5 中被重新引入。除非列表中序号很重要(比如,在法律或者技术文件中条目通常被需要所引用),否则请使用 CSS list-style-type属性替代。
    属性描述45
    compactcompact_rendering不赞成。使用 CSS 代替。4废弃
    startstart_on_number规定起始数字。45
    type
    • A
    • a
    • I
    • i
    • 1
    规定列表的类型。不赞成。使用 CSS 代替。4废弃

    HTML 4.01 与 HTML 5 之间的差异

    在 HTML 4.01 中,不赞成使用"start"属性,在 HTML 5 中是允许的。

    在 HTML 4.01 中,不赞成使用"compact"和"type"属性,在 HTML 5 中,不再支持这两个属性。

    HTML 4.01 与 HTML5中的差异

    在 HTML 4.01 中"start"和"type"属性已经废弃,HTML5不支持该属性。

    "reversed"属性是 HTML5 中的新属性。

    在HTML 4.01中"compact"属性已经废弃,在 HTML5中不支持该属性。

    全局属性

    <ol>标签支持全局属性,查看完整属性表HTML全局属性。

    事件属性

    <ol>标签支持所有HTML事件属性。

    例子

    <ol>
       <li>coffee</li>
       <li>tea</li>
    </ol>
    <ol>
       <li start="60">coffee</li>
       <li>tea</li>
    </ol>
    

    实例

    2 个不同的有序列表实例:

    <ol>
    <li>coffee</li>
    <li>tea</li>
    <li>milk</li>
    </ol>
    <ol start="50">
    <li>coffee</li>
    <li>tea</li>
    <li>milk</li>
    </ol>

    使用start属性

    <ol start="7">
      <li>first item</li>
      <li>second item</li>
      <li>third item</li>
    </ol>
    

    以上 HTML 输出如下:

    1. first item
    2. second item
    3. third item

    嵌套列表

    <ol>
      <li>first item</li>
      <li>second item      <!-- look, the closing </li> tag is not placed here! -->
        <ol>
          <li>second item first subitem</li>
          <li>second item second subitem</li>
          <li>second item third subitem</li>
        </ol>
      </li>                <!-- here is the closing </li> tag -->
      <li>third item</li>
    </ol>
    

    以上 HTML 输出如下:

    1. first item
    2. second item
      1. second item first subitem
      2. second item second subitem
      3. second item third subitem
    3. third item

    嵌套<ol>和<ul>

    <ol>
      <li>first item</li>
      <li>second item      <!-- look, the closing </li> tag is not placed here! -->
        <ul>
          <li>second item first subitem</li>
          <li>second item second subitem</li>
          <li>second item third subitem</li>
        </ul>
      </li>                <!-- here is the closing </li> tag -->
      <li>third item</li>
    </ol>
    

    以上 HTML 输出如下:

    1. first item
    2. second item
      • second item first subitem
      • second item second subitem
      • second item third subitem
    3. third item

    上篇:<li>

    下篇:<pre>