HTML列表概述

Posted 2021-10-21 橘猫吃不胖～

学习目标：
（1）掌握列表的用法

html列表概述

• 1.1 无序列表
• • 1.1.1 无序列表格式
  • 1.1.2 type属性设置
  • 1.1.3 实例
• 1.2 有序列表
• • 1.2.1 有序列表格式
  • 1.2.2 type属性设置
  • 1.2.3 实例
• 1.3 嵌套列表
• • 1.3.1 实例

1.1 无序列表

1.1.1 无序列表格式

无序列表标签<ul></ul>，用于页面中没有顺序的列举项。格式为：

    <ul type="项目符号的类别">
        <li>列表项</li>
        <li>列表项</li>
    </ul>

1.1.2 type属性设置

type属性设置标号的类型，值可以取：

属性值	含义
disc	实心圆点
circle	空心圆点
square	实心方块

1.1.3 实例

    <p>四大才子</p>
    <ul type="disc"><!--实心圆点-->
        <li>祝允明</li>
        <li>唐寅</li>
        <li>文徵明</li>
        <li>徐祯卿</li>
    </ul>
    <p>四大名著</p>
    <ul type="circle"><!--空心圆点-->
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
        <li>西游记</li>
    </ul>
    <p>四大美女</p>
    <ul type="square"><!--实心方块-->
        <li>西施</li>
        <li>貂蝉</li>
        <li>杨玉环</li>
        <li>王昭君</li>
    </ul>

1.2 有序列表

1.2.1 有序列表格式

有序列表标签<ol></ol>，用于页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。格式为：

    <ol type="标号的类型" start="起始值">
        <li>列表项</li>
        <li>列表项</li>
    </ol>

1.2.2 type属性设置

type属性设置标号的类型，值可以取：

属性值	含义
1	显示数字
A	显示大写字母
a	显示小写字母
Ⅰ	显示大写罗马数字
i	显示小写罗马数字

1.2.3 实例

    <ol type="1" start="3"><!--显示数字序号，从3开始-->
        <li>祝允明</li>
        <li>唐寅</li>
    </ol>
    <ol type="A" start="2"><!--显示大写字母，从B开始-->
        <li>红楼梦</li>
        <li>水浒传</li>
    </ol>
    <ol type="a" start="4"><!--显示小写字母，从d开始-->
        <li>文徵明</li>
        <li>徐祯卿</li>
    </ol>
    <ol type="I" start="5"><!--显示大写罗马数字，从Ⅴ开始-->
        <li>西游记</li>
        <li>三国演义</li>
    </ol>
    <ol type="i" start="3"><!--显示小写罗马数字，从iii开始-->
        <li>西施</li>
        <li>貂蝉</li>
    </ol>

1.3 嵌套列表

一个列表作为另一个列表的一部分，即多层列表。

1.3.1 实例

    <ol>
        <li><p>你更喜欢吃哪种水果（）</p></li>
        <ol type="A">
            <li>草莓</li>
            <li>香蕉</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
        <li><p>你平时休闲经常去的地方时哪里（）</p></li>
        <ol>
            <li>郊外</li>
            <li>商场</li>
            <li>公园</li>
            <li>酒吧</li>
        </ol>
    </ol>