第九篇 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>

运行结果：