Web网页设计基础知识--列表_网页列表-CSDN博客

本文链接：https://blog.csdn.net/2301_81571192/article/details/138403896

本文介绍了HTML中的无序列表（ul）、有序列表（ol）和自定义列表（dl）的结构，包括各列表的特点、li标签的使用规则以及如何定制列表样式，如消除无序列表的圆点和自定义缩进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表分为：无序列表，有序列表，自定义列表

1.1无序列表

<!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>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    
</body>
</html>

特点：列表的每一项前都有默认的原点标识。

注意：ul标签中只允许包含li标签，在<ul><ul/>标签中输入其他标签是不被允许的。

补充：无序列表前的圆点是可以消除的，在<style><style/>中list-style-type:

none 无标记符号

disc 实心圆默认类型

circle 空心圆

square 实心方块

decimal 普通阿拉伯数字

1.2有序列表

<!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>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
</body>
</html>

特点：列表的每一项前都会默认显示序号标识。

注意：ol标签中只允许包含li标签，li标签中能包含各种内容。

1.3自定义列表

<!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>名词1</dt>
            <dd>名词1解释1</dd>
            <dd>名词1解释2</dd>
        <dt>名词2</dt>
            <dd>名词2解释1</dd>
            <dd>名词2解释2</dd>
            <dd>名词2解释3</dd>   
    </dl>
    
</body>
</html>

特点：dd前会默认显示缩进效果。

注意：<dl><dl/>标签只能包含<dt><dd>标签。标签内可以包含任何内容，且标签个数没有限制。