第九篇 HTML 列表

一、列表

1.1、无序列表 ul 和 li

  先回忆一下之前学过的列表基本使用：

 <ul>
     <li>第一项Coffee</li>
     <li>第二项Tea</li>
     <li>第三项Milk</li>
 </ul>

         ul 表示这个是一个无序列表，li 表示 ul 里的每一个项，由于这是个无序列表，所以在显示时没有在每一项内容前添加对应项序号，而是用实心圆点表示。

1.2 无序列表 type 属性

        type 属性可以修改列表前的实心圆点，type 赋不同的值，显示不同符号，当 type = "none" 时表示去掉序号图形,当 type = "disc" 时表示实心圆，type = "square" 时表示实心正方体，type = "circle" 时表示空心圆，示例如下：

<ul type = "none">
        <li>type = none，表示去掉序号图形</li>
        <li>type = none，表示去掉序号图形</li>
        <li>type = none，表示去掉序号图形</li>
    </ul>
    <ul type="disc">
        <li>type = disc，表示列表序号图形用 实心圆形 表示</li>
        <li>type = disc，表示列表序号图形用 实心圆形 表示</li>
        <li>type = disc，表示列表序号图形用 实心圆形 表示</li>
    </ul>
    <ul type="circle">
        <li>type = circle，表示列表序号图形用 圆环 表示</li>
        <li>type = circle，表示列表序号图形用 圆环 表示</li>
        <li>type = circle，表示列表序号图形用 圆环 表示</li>
    </ul>
    <ul type="square">
        <li>type = square，表示列表序号图形用 实心正方圆形 表示</li>
        <li>type = square，表示列表序号图形用 实心正方圆形 表示</li>
        <li>type = square，表示列表序号图形用 实心正方圆形 表示</li>
    </ul>

运行结果：

2.1、有序列表 ol 和 li

        有序列表顾名思义就是有序号的列表，这个序体现在每一项内容前有对应项序号，ol 表示这是一个有序列表，li 同样表示列表里的每一项，示例如下：

<h4>有序列表</h4>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

运行结果：

2.2、属性

2.2.1、开始属性 start

        start 属性设置列表的开始序号

<ol start="50">
        <li>第50项</li>
        <li>第51项</li>
        <li>第52项</li>
      </ol>

运行结果：

2.1.2、类型属性 type

         我们可以看到在每一项内容前都有个阿拉伯数字用来标序号，这个序号也可以改成其他表示方式，如中文的，罗马数字或者大小写字母等，这个时候需要用到 type 属性示例如下：

        <ol type="1">
            <li>type = 1，表示用阿拉伯数字做序号</li>
            <li>type = 1，表示用阿拉伯数字做序号</li>
            <li>type = 1，表示用阿拉伯数字做序号</li>
        </ol>
        <ol type="i">
            <li>type = i，表示用小写罗马数字做序号</li>
            <li>type = i，表示用小写罗马数字做序号</li>
            <li>type = i，表示用小写罗马数字做序号</li>
        </ol>
        <ol type="I">
            <li>type = I，表示用大写罗马数字做序号</li>
            <li>type = I，表示用大写罗马数字做序号</li>
            <li>type = I，表示用大写罗马数字做序号</li>
        </ol>
        <ol type="a">
            <li>type = a，表示用小写英文字母做序号</li>
            <li>type = a，表示用小写英文字母做序号</li>
            <li>type = a，表示用小写英文字母做序号</li>
        </ol>
        <ol type="A">
            <li>type = A，表示用大写英文字母做序号</li>
            <li>type = A，表示用大写英文字母做序号</li>
            <li>type = A，表示用大写英文字母做序号</li>
        </ol>

运行结果：

2.1.3、降序（倒叙）reserve

有一些序号是倒序的，使用 reserve 属性使得列表降序

<ol reversed = "reserved">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        </ol>
    <ol>

运行结果：

3.1、自定义列表 dl 和 dt

        自定义列表 <dl> 标签表示，一对 dl 标签就是一个自定义列表，每个自定义列表项用 <dt> 标签表示。每个自定义列表项的定义 用 <dd> 表示 。自定义列表表示一列项目以及项目的注释，可用来解释阐明一些名词，例如：

<h4>自定义列表</h4>
      <dl>
        <dt>这是一个名词1</dt>
        <dd>这是这个名词1的解释</dd>

        <dt>这是一个名词2</dt>
        <dd>这是这个名词2的解释</dd>

        <dt>中国国家女子足球队</dt>
        <dd>中国国家女子足球队建立于1984年，由中国足球协会管理。首任主教练为丛者余，现任主教练水庆霞 [71]  ，现任队长王珊珊。 [85] 
            女足于1986年首次参加亚洲杯就获得冠军，自此开创1986、1989、1991、1993、1995、1997、1999年女足亚洲杯七连冠，15次参与亚洲杯共获得冠军9次，亚军2次，季军3次。参加亚运会8次获得冠军3次、亚军2次、季军1次，1990、1994和1998年亚运会女足获三连冠。参赛女足世界杯8次，获得亚军1次，进入四强1次（不含前述亚军）。闯入奥运会5次，其中在1996年美国亚特兰大奥运会上1-2惜败美国获得亚军，为中国女足迄今为止在奥运会上取得的最好成绩。
            2022年2月6日，中国女足在2022印度女足亚洲杯决赛中3-2击败韩国队，时隔16年再夺女足亚洲杯冠军。</dd>
        <dt>卡布奇诺原料</dt>
        <dd>意大利特浓咖啡</dd>
        <dd>蒸汽泡沫牛奶</dd>
        <dd>水</dd>
        </dl>

运行结果：

二、菜单列表 menu

        <menu> 标签定义了一个命令列表或菜单，<menu> 标签通常用于文本菜单，工具条和命令列表选项。等到后面学习 css 可以把文本菜单转换成正真菜单的样子。先简单示例如下：

<menu>

        <li>菜单第1项</li>

        <li>菜单第2项</li>

        <li>菜单第3项</li>

     </menu>

运行结果：

三、列表嵌套

        嵌套，就像前面学习的标签嵌套一样，在不同列表里可以互相嵌套，示例如下：

 <ul>
         <li>有序列表第一项
             <ul><li>
                 有序列表可以嵌套有序列表
             </li></ul>
         </li>
         <li>有序列表第二项
             <ol>
                 <li>有序列表可以嵌套无序列表</li>
             </ol>
         </li>
         <li>有序列表第三项
             <meun>
                有序列表可以嵌套菜单列表
             </meun>
         </li>
         <li>有序列表第四项
             <dt>有序列表可以嵌套自定义列表</dt>
             <dd>有序列表可以嵌套自定义列表</dd>
         </li>
         <li>
             <ol>
                 <li>
                     <meun>
                         <dt></dt>
                         <dd>
                             <ul>
                                 <li>
                                     四种列表可以互相嵌套
                                 </li>
                             </ul>
                         </dd>
                     </meun>
                 </li>
             </ol>
         </li>
     </ul>

运行结果：

参考：菜鸟教程&【前端就业课 第一阶段】HTML5 零基础到实战（九）列表_1_bit 的博客-优快云博客