HTML列表标签的使用记录

前端兵仔

已于 2024-08-17 12:15:00 修改

阅读量182

点赞数 10

分类专栏： HTML 文章标签：前端 html

于 2024-08-17 12:14:43 首次发布

本文链接：https://blog.csdn.net/m0_54093760/article/details/141278612

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>火龙果</li>
        <li>哈密瓜</li>
    </ol>
    
</body>
</html>

运行结果：

有序列表嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>水果
            <ol>
                <li>苹果</li>
                <li>香蕉</li>
                <li>火龙果</li>
                <li>哈密瓜</li>
            </ol>
        </li>
        <li>蔬菜
            <ol>
                <li>白菜</li>
                <li>胡萝卜</li>
                <li>南瓜</li>
                <li>西红柿</li>
            </ol>
        </li>
    </ol>
    
</body>
</html>

运行结果：

ol 的type属性的不同值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    1 表示列表项目用数字标号（1,2,3,...）默认！
   <ol type="1">
    <li>花生</li>
    <li>地瓜</li>
    <li>玉米</li>
    <li>豆角</li>
   </ol>
    a 列表项目用小写字母标号（a,b,c,...）
   <ol type="a">
    <li>花生</li>
    <li>地瓜</li>
    <li>玉米</li>
    <li>豆角</li>
   </ol>
    A 列表项目用大写字母标号（A,B,C,...）
   <ol type="A">
    <li>花生</li>
    <li>地瓜</li>
    <li>玉米</li>
    <li>豆角</li>
   </ol>
   i 列表项目用小写罗马数字标号（i,ii,iii,...）
   <ol type="i">
    <li>花生</li>
    <li>地瓜</li>
    <li>玉米</li>
    <li>豆角</li>
   </ol>
   I 列表项目用大写罗马数字标号（I,II,III,...）
   <ol type="I">
    <li>花生</li>
    <li>地瓜</li>
    <li>玉米</li>
    <li>豆角</li>
   </ol>
</body>
</html>

运行结果：

无序列表

无序列表常用场景大多数是无序的列表效果和导航效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    无序列表
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>火龙果</li>
        <li>哈密瓜</li>
    </ul>
</body>
</html>

运行结果：

ul 的type属性的不同值

自定义列表

dt：列表名称

dd：列表内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <dl>
        <dt>水果</dt><!-- dt:定义列表的标题 -->
        <dd>苹果</dd><!-- dd:定义列表中的项目 -->
        <dd>香蕉</dd>
        <dd>橘子</dd>
        <dd>菠萝</dd>
    </dl>
</body>
</html>

运行结果：