HTML列表

最新推荐文章于 2024-07-10 10:31:45 发布

Afan_F

最新推荐文章于 2024-07-10 10:31:45 发布

阅读量484

点赞数

本文链接：https://blog.csdn.net/Afan_F/article/details/83038296

版权

无序列表

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>评论</title>

</head>
<body>
        <ul>
             <li>咖啡</li>
             <li>茶</li>
             <li>牛奶</li>
        </ul>
</body>
</html>

效果图：

有序列表

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>评论</title>

</head>
<body>
        <ol>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li> 
        </ol>
</body>
</html>

效果图：

有序列表中的type属性可以更改序号如以下

数字编号，1.2.3........（默认）
a 小写字母
A 大写字母
i 小写的罗马数字
I 大写的罗马数字

例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <div>
        <ol type="a">
            <li>我还年轻</li>
            <li>我们结婚吧</li>
            <li>去年夏天</li>
        </ol>
    </div>
</body>
</html>

效果图：

有序列表中的styat 表示从第几个序号开始编号，如以下例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <div>
        <ol type="a" start="3">
            <li>我还年轻</li>
            <li>我们结婚吧</li>
            <li>去年夏天</li>
        </ol>
    </div>
</body>
</html>

效果图：

有序列表中改变序号中的某一个序号可以用value，例子如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <div>
        <ol>
            <li>我还年轻</li>
            <li value="5">我们结婚吧</li>
            <li>去年夏天</li>
        </ol>
    </div>
</body>
</html>

效果图：

改变排序的顺序，如倒序，可以用reversed（布尔属性），例子如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <div>
        <ol type="A" reversed>
            <li>我还年轻</li>
            <li>我们结婚吧</li>
            <li>去年夏天</li>
        </ol>
    </div>
</body>
</html>

效果图：

自定义列表dl（术语的解释）-dt（声明）-dd（术语的描述）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <div>
        <dl>
            <dt>1.怎么申请退货</dt>
            <dd>在APP的商品页面购买商品后......</dd>
            <dt>2.什么时间收到</dt>
            <dd>根据公司的规定，需要.......</dd>
        </dl>
    </div>
</body>
</html>

效果图：