2.5 改良HTML 4元素的功能
HTML 5中新增了许多新的、有意义的元素，当然，它还对HTML 4中一些已经存在的元素进行了改进，丰富完善了这些元素的功能。
2.5.1 ul元素
ul元素是在HTML 4中就已经存在的元素，HTML 5中该元素的作用与HTML 4中的相同，都是用来创建一个无序列表。但是，HTML 5废除了HTML 4中ul元素的两个属性，这两个属性是compact和type属性。
【练习17】
读者对ul元素并不陌生，在HTML 4中就已经经常使用了，本次练习再次回顾一下该元素的使用。
（1）添加一个新的页面，设计页面并在页面中的合适位置添加用于显示当前档案分类的ul和ol元素。部分代码如下。
<ul>
<li><a href="#">March 2013</a></li>
<li><a href="#">February 2013</a></li>
<li><a href="#">December 2012</a></li>
<li><a href="#">JanuaryDecember 2012</a></li>
<li><a href="#">November 2011</a></li>
</ul>
（2）为ul和li元素添加样式，为ul元素定义list-style属性，该属性表示li元素不显示默认的项目符号。然后为li元素重新定义显示列表时所要显示的项目符号，这里将其定义为一张图片。样式代码如下。
ul{
padding-left: 5px;
line-height: 1.4em;
list-style:none;
}
li{
margin: 0;
padding-left: 12px;
background: url(work17/images/img07.gif) no-repeat left center;
}
（3）重新运行页面查看效果，如图2-16所示。
图2-16 ul元素的使用
2.5.2 ol元素
ol元素与ul元素的意思相反，它用来指定显示一个有序列表。HTML 5对HTML 4中的ol元素的功能进行了增强，不仅可以显示有序列表，还增加了start属性和reversed属性。其中，start属性表示可以更改列表编号的起始值；reversed属性表示对列表进行反向排序。
【练习18】
本次练习使用ol和li元素显示一个有序列表，设置ol元素的start属性的值为7，并且指定reversed属性。相关代码如下。
<ol start="7" reversed>
<li>仁宗：爱新觉罗颙琰。年号嘉庆</li>
<li>高宗：爱新觉罗弘历。年号乾隆</li>
<li>世宗：爱新觉罗胤禛。年号雍正</li>
<li>圣祖：爱新觉罗玄烨。年号康熙</li>
<li>世祖：爱新觉罗福临。年号顺治</li>
</ol>
运行页面查看ol和li元素的效果，如图2-17所示。
图2-17 ol元素
注意
通过指定list-style属性的值为none，也可以使ol元素中的li元素不显示编号。但是不建议使用有序列表实现类似于无序列表的功能，因为如果这样做，有序列表本身的语义已经不正确了。
另外，在有序列表中，不可能会从一个先前的列表来继续列表编号或者隐藏对一些列表项的编号。这时，可以通过设置value属性（仅适用于li元素）来对列表项的编号复位，这样编号以新的起始值来继续后来的列表项。
【练习19】
本次练习中，通过ol和li元素有序显示图书，然后再指定第4个li元素和最后一个li元素中value属性的值。相关代码如下。
<h3>定义有序列表中的列表项序号</h3>
<p>今年高考刚刚结束，程思洋同学就迫不及待地为自己制定了今年暑假假期两个月中他要看的十本书籍。一晃，两个月已经过去了，除了第4本《穆斯林的葬礼》和第9本《高老头》外，其他的已经读过了，快来看看读过了哪几本吧</p>
<ol>
<li>红楼梦</li>
<li>三国演义</li>
<li>水浒传</li>
<li value="5">巴黎圣母院</li>
<li>我的大学</li>
<li>童年</li>
<li>生命中不能承受之轻</li>
<li value="10">聊斋志异</li>
</ol>
运行页面的代码查看效果，如图2-18所示。
图2-18 定义有序列表中的列表项序号
2.5.3 嵌套列表
列表可以是简单或复杂的，它还可以和其他元素一样进行嵌套，嵌套列表是包含其他列表的列表（列表里包含子列表）。通常用这种嵌套的列表，反映层次较多的内容，如希望编号或者项目列表嵌套在其他编号列表中。
【练习20】
在本次练习中，首先通过ul和li元素显示HTML 5新增的结构元素和块级语义元素，接着再显示这些元素下面的子元素，最后再通过ol和li元素显示操作目录。
（1）添加新的页面并且设计页面，在页面的合适位置添加ul、li和ol等元素。相关代码如下。
<ul>
<li>HTML 5新增的结构元素
<ul>
<li>header元素
<ol>
<li>基本语法</li><li>简单使用</li>
</ol>
</li>
<li>aritcle元素</li>
<li>address元素</li>
<li>footer元素
<ol>
<li>基本语法</li><li>简单使用</li>
</ol>
</li>
</ul>
</li>
<li>
HTML 5新增的块级语义元素
<ul>
<li>aside元素</li><li>figure元素</li><li>dialog元素</li>
</ul>
</li>
</ul>
（2）为ul元素添加样式，指定显示的文字效果。代码如下。
ul{
list-style:none;
font-weight:bold;
color:#78BEF8;
}
（3）运行页面查看列表的嵌套效果，如图2-19所示。
图2-19 嵌套列表
提示
HTML 5中新增的元素有很多，本章只是介绍一些常用的、比较有代表性的元素，感兴趣的读者可以在网上查找相关资料。