本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.20节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
在传统的HTML标记语言中，可以通过< ul >、< ol >、< dl >元素实现分组效果。在全新的HTML 5中，对原有的分组内容元素< ul >、< ol >、< dl >进行了整体改良，有的元素增加了许多新的属性，有的元素则废除了一些不合理的原有特征。
（1）< ul >元素。
在HTML 5中，< ul >元素用于定义页面中的无序列表，其用法与HTML 4相类似。区别是HTML 5不再支持“type”与“compact”这两个属性。因为< ul >元素通常与< li >元素组合使用，所以HTML 5也不支持< li >元素的“type”属性，而是改用CSS样式来定义列表的类型，例如，如下HTML页面中的代码：
<ul> <li>AA(/li> <li>BB <ul> <li>CC</li> <li>DD</li> </ul> </li> <li>CC</li> </ul>在上述代码中，通过< ul >元素创建了一个带嵌套的列表“AA”，其中又分为“BB”和“CC”两个列表项。在“BB”列表项中，又通过< ul >元素新增加了一个子列表，用于展示上级“BB”列表项的子项信息，这个例子中的子项信息包括“CC”和“DD”。
（2）< ol >元素。
在HTML 5中，< ol >元素用于在页面中有序地创建列表。与HTML 4相比，在HTML 5中新增加了如下两个属性。
start：用于自定义列表项开始的编号。reversed：用于设置列表是否进行反向排序。在本实例中，通过< ol >元素创建一个“MTV排行榜”列表，并分别添加3个选项（大海、小芳、父亲）作为列表的内容。另外，增加一个文本框“设置开始值”与一个“确定”按钮。在文本框中输入一个值并单击“确定”按钮后，将以文本框中的值为列表项开始的编号显示MTV排行。
具体实现
使用Dreamweaver创建一个名为“020.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用列表</title> <link href="Css/css3.css" rel="stylesheet" type="text/css"> <script type="text/javascript" async="true"> function Btn_Click(){ var strNum=document.getElementById("txtOrderNum").value; var strDiv=document.getElementById("olList"); strDiv.setAttribute("start",strNum); } </script> </head> <body> <h5>MTV排行榜</h5> <ol id="olList"> <li>大海</li> <li>小芳</li> <li>父亲</li> </ol> <h5>设置开始值</h5> <input type="text" id="txtOrderNum" class="inputtxt" style="width:60px" /> <input type="button" value="确定" class="inputbtn" onClick="Btn_Click();"> </body> </html>在上述JavaScript代码中，先定义一个函数Btn_Click()，用于在单击“确定”按钮时调用。在该函数中先获取输入文本的值与< ol >列表元素，并分别保存至变量“strNum”与“strDiv”中。然后通过setAttribute方法将列表元素的“start”属性设置为变量“strNum”的值，从而改变了列表项元素编号的开始值。例如，本实例在文本框中输入数字“5”，那么，列表项元素的编号起始值将从5开始。
执行后的效果如图1-37所示，如果在文本框中输入一个数字，如“5”，单击“确定”按钮后将以5开始进行排序，如图1-38所示。
