Html5+CSS3学习记录（3）—

本文链接：https://blog.csdn.net/weixin_44582958/article/details/131142894

简单的未加CSS的列表，和之前一样，效果很丑，只是为了验证功能

一、列表

分为两种类型：有序列表和无序列表。顾名思义，有序列表按照数字或字母等顺序排序内容；无序列表以符号如⚪开头，无特定顺序。

1.无序列表

无序列表中各个项之间无顺序，内容前常用符号作为前缀，当不需要符号时，只需要将type的值设为none。

如下的一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <div>
    <fieldset>
        <legend>无序列表</legend>

        <ul>
            <li type="circle">hallo</li>
            <li type="disc">world</li>
            <li type="square">!</li>
        </ul>
    </fieldset>
    </div>
</body>
</html>

实现的效果如下：

其中，

<ul></ul>为无序列表符，<li></li>为一个列表项，一个列表中可以有多个列表项。

type属性的不同值表示的符号不同，当他为<ul>标签中的属性时，代表设置整个列表的符号，为<li>标签中的属性时，只设置当前列表项的符号。

2.有序列表

各列表项按顺序排列，初始设置时，可以设置表项的初始编号和类型。

<ol></ol>支持的格式类型如下，其中，1代表数字排序，A代表大写英文字母排序，a代表小写字母排序，Ⅰ代表大写罗马数字排序，i代表小写罗马数字排序：

同时，<ol>中的type属性也可以规定起始排序数值，在start属性设置相应的值即可。

比如如下代码实现的效果：

    <div>
        <fieldset>
            <legend>有序列表</legend>

            <ol type="1" start="3">
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
            </ol>
        </fieldset>
    </div>

实现效果：

3.定义列表

定义列表是一种具有两种层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。<dl>为定义列表的标签，<dt>为名次，<dd>为名词的解释和说明，一个<dt>下可以有多个<dd>

语法：

    <div>
        <fieldset>
            <legend>定义列表</legend>

            <dl>
                <dt>名词1</dt>
                <dd>解释1</dd>
                <dd>解释2</dd>
                <dd>解释3</dd>

                <dt>名词2</dt>
                <dd>解释4</dd>
                <dd>解释5</dd>
                <dd>解释6</dd>
            </dl>
        </fieldset>
    </div>

显示效果：