W3C HTML5标准阅读笔记 – ol、ul、li

标准原文:http://www.w3.org/TR/html5/grouping-content.html#the-ol-element

列表元素ol、ul和列表内的项目元素li在HTML早期就已出现,并被Web开发人员所大量使用。这三个元素的语义为:

  • ol (ordered list)。有序列表,包含一系列有顺序的子项目(li元素)。
  • ul (unordered list)。无序列表,包含一系列没有顺序的子项目(li元素)。
  • li (list item)。列表内的项目元素,只能在ol或者ul元素内使用。

除了li元素,ol和ul元素内部也可以包含脚本元素script或者template。

ol

ol元素用于表示有序列表,除了通用的全局属性,ol元素还有三个很有用的特有属性:

  • reversed。作为与checked一样的布尔属性,reversed属性用于表示有序列表中各个子项目前序号的排列顺序。当没有reversed属性时,排列为升序(1,2,3,…);当出现reversed属性时,排列为降序(…,3,2,1)。值得注意的是,是否为降序仅取决于reversed属性出现与否,与reversed属性的值无关;也即,即使定义reversed="false",子项目的排列顺序依旧为降序。
  • start。第一个li子项目的序数。当给start属性赋值后,浏览器会将该值解析为整数,因此start=3和start=”3″的效果是一样的。如果start值为3,当排列为升序时(reversed属性缺失),子项目的序数呈现为:3, 4, 5, 6,…;当排列为降序时(有reversed属性),子项目的序数呈现为3, 2, 1, 0, -1, -2, …。如果start属性缺失或者start属性的值无法解析为整数,则当排列为升序时其默认值为1,而当排列为降序时其默认值为子项目元素的个数。除了阿拉伯数字,li子项目的序数也可以使用a,b,c等其它形式来表示,因此li元素存在一个叫做value的属性,用来定义其序数值。

    当第一个li子项目有value属性,并且该value属性值可以解析为十进制整数时,第一个li子项目的序数值以该value值为准。之后的其它li子项目也一样,会优先取其value属性值作为序数值;如果value属性缺失,则其序数值为其邻近的上一个li子项目的序数值加1(升序情况)或者减1(降序情况)。

    li子项目的序数值会直接影响页面上该元素前的序数显示。

    经过测试,发现当ol的start属性值与li子项目的value属性值发生冲突时,以li子项目的value属性值为准。

  • type。子项目序数所使用的符号,默认为十进制阿拉伯整数,但可以通过改变type属性的值来使用别的符号。可选的符号有:十进制整数、大小写英文字母以及大小写罗马数字。

    type属性值 描述 示例
    1 十进制阿拉伯整数 1.2.3.4…
    a 小写英文字母 a.b.c.d…
    A 大写英文字母 A.B.C.D…
    i 小写罗马数字 i.ii.iii.iv…
    I 大写罗马数字 I.II.III.IV…

    值得注意的是,无论type属性值为何,用value属性定义子项目的序数值时,value值均为整数。同时,不管使用何种type,当子项目的序数值小于等于0时,子项目前序数所使用的符号均为十进制整数。如以下例子及其相应的显示结果:

<ol type="a" reversed>  
    <li value="2">X1</li>
    <li>X2</li>
    <li>X3</li>
    <li>X4</li>
    <li>X5</li>
</ol>  
将显示为
b. X1  
a. X2  
0. X3  
-1. X4
-2. X5

ul

ul元素用于表示无序列表。与ol元素相比,ul元素的使用更为简单,它只有通用的全局属性,没有任何特有属性。

li

li元素用于表示列表中的子项目,该元素只能在ol或者ul元素内使用。如果li元素在ul无序列表中使用,则其只能拥有通用全局属性;如果li元素在ol有序列表中使用,则其除了通用全局属性,还可以拥有value属性,用于表示自己的序数值。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!