HTML5的列表

47 阅读1分钟

列表的使用

有序列表 <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> 标签配合使用