Html第9集:有序列表、无序列表、定义列表

转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/126558113
本文出自【赵彦军的博客】

无序列表 ul

<body>

<ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
</ul>

</body>

效果如下:

在这里插入图片描述

有序列表 ol

<body>
<ol>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
</ol>
</body>

效果如下:

在这里插入图片描述

定义列表 dl

  • <dl> 标签定义了定义列表(definition list)。

  • <dt> 定义列表中的项目

  • <dd> 描述列表中的项目

示例1

<body>
<dl>
    <dt>星期一</dt>
    <dt>星期二</dt>
    <dt>星期三</dt>
</dl>
</body>

效果如下:
在这里插入图片描述

示例2

<body>
<dl>
    <dt>星期一</dt>
    <dd>星期一选项定义</dd>
    <dt>星期二</dt>
    <dd>星期二选项定义</dd>
    <dt>星期三</dt>
    <dd>星期三选项定义</dd>
</dl>
</body>

在这里插入图片描述

列表嵌套

<body>
<ul>
    <li>
        星期一
        <ul>
            <li>3点钟</li>
            <li>6点钟</li>
        </ul>
    </li>

    <li>
        星期二
        <ul>
            <li>3点钟</li>
            <li>6点钟</li>
        </ul>
    </li>
</ul>
</body>

效果如下:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/zhaoyanjun6/article/details/126558113