三种列表形式：无序列表、有序列表、自定义列表

最新推荐文章于 2025-03-20 19:20:23 发布

高申航

最新推荐文章于 2025-03-20 19:20:23 发布

阅读量4k

点赞数 2

文章标签： html5 html javascript

本文链接：https://blog.youkuaiyun.com/qq_46058838/article/details/120839537

版权

一、无序列表：（ul）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

浏览器显示情况

二、有序列表（ol）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

浏览器显示情况

三、自定表（dl）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>小米手机</dt>
        <dd>1999元</dd>
        <dt>华为手机</dt>
        <dd>2999元</dd>
    </dl>
</body>
</html>

浏览器显示情况