19、有序列表 <ol> <li>

<ol> 定义有序列表。
<li> 定义列表的项目。
例:

<ol>
    <li>《平凡的世界》 作者:路遥</li>
    <li>《穆斯林的葬礼》 作者:***</li>
    <li>《挪威的森林》 作者:村上春树</li>
    <li>《***山伯爵》 作者:大仲马</li>
    <li>《教父》 作者:马里奥·普佐</li>
    <li>《白鹿原》 作者:***实</li>
 </ol>

按照阿拉伯数字的顺序陈列列表:

对ol元素,HTML5还有一些新增的属性

  • reversed,表示序号反转,即按降序显示序号。
    写法:其他不变,将<ol>替换为<ol reversed>:
    图片说明
  • 序号按字母从小到大表示,可按大写字母或小写字母排序。
    写法:<ol>替换为<ol type = "A"><ol type = "a">,符号将变为ABC……或abc……
    图片说明
    图片说明
  • 序号为罗马字符
    写法:<ol>替换为<ol type = "I">
    图片说明

20、无序列表 <ul> <li>

<ul> 定义无序列表。
<li> 定义列表的项目。
例:

<ul>
    <li>《平凡的世界》 作者:路遥</li>
    <li>《穆斯林的葬礼》 作者:***</li>
    <li>《挪威的森林》 作者:村上春树</li>
    <li>《***山伯爵》 作者:大仲马</li>
    <li>《教父》 作者:马里奥·普佐</li>
    <li>《白鹿原》 作者:***实</li>
 <ul>

图片说明

21、定义列表 <dl> <dt> <dd>

<dl> 标签定义一个定义列表。
<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

例:

 <dl>
     <dt>计算机</dt>
         <dd>用来计算的仪器 ... ...</dd>
     <dt>显示器</dt>
         <dd>以视觉方式显示信息的装置 ... ...</dd>
 </dl>

图片说明

22、嵌套列表

在日常的使用中,我们还常会将一些列表进行细致的分类,这个时候就可以用到无序列表和有序列表结合或是相同列表组合的情况,我们称之为嵌套列表。

下面的代码中,最外层(第一层)的无序列表有两个项目:书和电影;书的<li></li>之间又嵌套一个无序列表,两个项目为:小说和教材;在小说内又嵌套最内层的一个有序列表:科幻小说和言情小说。

<ul>
        <li>书
          <ul>
            <li>小说</li>
                <ol>
                  <li>科幻小说</li>
                  <li>言情小说</li>
                </ol>
            <li>教材</li>
              <ol>
                <li>算法书</li>
                <li>语文书</li>
              </ol>
          </ul>
        </li>
        <li>电影
          <ul>
            <li>美国电影</li>
            <li>中国电影</li>
          </ul>
        </li>
</ul>

图片说明
tip:据图可知,两个无序列表嵌套后,符号会有区别,图中外层为实心圆,而内层则是空心圆。