列表——HTML

企鹅住在南瓜粥

已于 2025-04-13 02:03:29 修改

阅读量853

点赞数 12

分类专栏： HTML 文章标签： windows html 前端程序人生

于 2025-03-21 01:39:18 首次发布

本文链接：https://blog.csdn.net/2401_87662282/article/details/146404125

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

目录

无序列表（unordered list）

定义

格式

前导字符

例题练习

有序列表（ordered list）

定义

格式

符号标识

定义列表

定义

格式

例题

嵌套列表

定义

格式

样例

无序列表（unordered list）

定义

无序列表就是列表中列表项的前导符号没有一定的顺序,而是用黑点,圆圈、方框等些特殊符号标识,类似于Word文档处理软件中的项目符号。

格式

<ul>标签标识一个无序列表的界限

<li>标签标识一个无序列表项

<ul type="符号类型">
<li type="符号类型">列表项</li>
<li type="符号类型">列表项</li>
……
</ul>

前导字符

在ul后指定符号的样式,可设定ul中所有<li>标签的前导符号

<ul type="disc"><li>符号为实心圆</li></ul>
<ul type="circle"><li>符号为空心圆</li></ul>
<ul type="square"><li>符号为方块</li></ul>

在li后指定符号的样式,可以设置该li的项目符号。格式与<ul>标签完全一样，只是将u换成li

若省略type属性，默认显示为disc前导字符

例题练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>来杯小饮料~</title>
</head>
<body >
    <ul type="disc">
        <li>咖啡</li>
        <li>橙汁</li>
        <li>雷碧</li>
        <li>牛奶</li>
        <li>茶</li>
    </ul>
</body>
</html>

有序列表（ordered list）

定义

有序列表有序列表是一个有特定顺序的列表项的集合(用<ol>标识)。在有序列表中,各个列表项有先后顺序，它们之间以编号来标记。表项标签仍为<li>。

格式

<ol type="符号类型">
    <li type="符号类型 1">列表项1</li>
    <li type="符号类型 2">列表项2</li>
    <li type="符号类型 3">列表项3</li>
    <li type="符号类型 4">列表项4</li>
    ……
</ol>

符号标识

    <ol type="1"><li>符号为数字</li></ol>
    <ol type="A"><li>符号为大写英文字母</li></ol>
    <ol type="a"><li>符号为小写英文字母</li></ol>
    <ol type="I"><li>符号为大写罗马字母</li></ol>
    <ol type="i"><li>符号为小写英文字母</li></ol>

定义列表

定义

定义列表又称为释义列表或字典列表。定义列表不是带有前导字符的列项目,而是一列实物,以及与其相关的解释。

格式

当创建一个定义列表时,主要用到3个HTML标签:<dl>标签、<dt>标签和<dd>标签

<dl>

<dt>…第一个标题项…</dt>

<dd>…对第一个标题项的解释文字…</dd>

<dt>…第二个标题项…</dt>

…

<dd>…对第二个标题项的解释文字…</dd>

</dl>

<dt>是标题

<dd>是内容

#尽量使用一个<dt>标签配合一个<dd>标签的方法

#若<dd>标签中内容较多，可嵌套<p>标签使用

例题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表</title>
</head>
<body>
    <h2>美味蟹堡王</h2>
    <dl>
        <dt>电话：</dt>
        <dd>+86-12-4358-7688</dd>
        <dt>地址：</dt>
        <dd>亚特兰蒂斯比奇包海滩痞老板的对面1号</dd>
    </dl>
</body>
</html>

嵌套列表

定义

嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次,给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套,而且彼此可互相嵌套。

格式

嵌套方式可分为:

无序列表中嵌套无序列表

有序列表中嵌套有序列表

有序列表中嵌套无序列表

无序列套有序列表

此外,可以多层嵌套,还可以嵌套定义列表,的嵌套者灵活掌握。

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套</title>
</head>
<body>
    <h2 align="center">美味蟹黄堡</h2>
    <ul type="circle">
        <li>秘制蟹黄堡</li>
        <ul type="square">
            <li>普通蟹黄堡</li>
            <li>双层蟹黄堡</li>
            <li>三层蟹黄堡</li>
        </ul>
    <hr>
        <li>特色搭配</li>
        <ul type="disc">
            <li>普通蟹黄堡+海草酱</li>
            <li>双层蟹黄堡+海草酱</li>
            <li>三层蟹黄堡+气泡海水</li>
        </ul>
    <hr>
        <li>会员信息</li>
        <ol type="a">
            <li>填写顾客信息</li>
            <li>接收电子邮箱</li>
            <li>激活会员信息</li>
            <li>会员注册成功</li>
        </ol>
    <hr>
        <h2>美味蟹堡王</h2>
        <dl>
            <dt>电话：</dt>
            <dd>+86-12-4358-7688</dd>
            <dt>地址：</dt>
            <dd>亚特兰蒂斯比奇包海滩痞老板的对面1号</dd>
        </dl>
    </ul>  
</body>
</html>