HTML5的列表

列表的使用

有序列表 <ol>

属性 type

• type="1" 表示列表项目用数字标号（1,2,3）
• type="a" 表示列表项目用小写字母标号（a,b,c）
• type="A" 表示列表项目用大写字母标号（A,B,C）
• type="i" 表示列表项目用小写罗马数字标号（i,ii,iii,iv）
• type="I" 表示列表项目用大写罗马数字标号（I,II,III,IV）

案例

<ol type="a">
    <li>管理学院</li>
    <li>设计学院</li>
    <li>龙虾学院</li>
    <li>学龄教育学院</li>
    <li>艺术学院</li>
</ol>

有序列表的嵌套

<ol>
    <li>江汉艺术职业学院</li>
    <ol>
        <li>管理学院</li>
        <li>设计学院</li>
        <li>音乐学院</li>
        <li>艺术学院</li>
        <li>龙虾学院</li>
    </ol>
    <li>荆州理工职业学院</li>
    <ol>
        <li>软件学院</li>
        <li>无人机学院</li>
        <li>智能制造学院</li>
        <li>电气自动化学院</li>
    </ol>
    <li>天门职业学院</li>
    <li>武汉职业技术学院</li>
</ol>

无序列表 <ul>

案例

<ul>
    <li>江汉艺术职业学院</li>
    <ul>
        <li>管理学院</li>
        <li>设计学院</li>
        <li>音乐学院</li>
        <li>艺术学院</li>
    </ul>
    <li>龙虾学院</li>
</ul>
<ul>
    <li>荆州理工职业学院</li>
    <ul>
        <li>软件学院</li>
        <li>无人机学院</li>
    </ul>
</ul>

自定义列表 <dl>

属性

• type="disc"  默认实心圆
• type="circle"  空心圆
• type="square"  实心小方块
• type="none"  去掉标记符号

案例

<dl>
    <dt>电影</dt>
    <dd>电冰箱</dd>
    <dd>洗衣机</dd>
    <dd>电视机</dd>
    <dt>书籍</dt>
    <dd>言
    情小说</dd>
    <dd>武侠小说</dd>
    <dd>科幻小说</dd>
</dl>

注意：

1. <dl>, <dt>, <dd> 三个标签之间不允许出现其他标签
2. <dl> 标签必须与 <dt> 标签配合使用