html---4.使用列表_sls 在列表里挑选-优快云博客

本文介绍了HTML中各种类型的列表，包括无序列表<ul>、有序列表<ol>、定义列表<dl>、菜单列表<menu>和目录列表<dir>。详细讲解了它们的使用方法和属性，如type、start等，并展示了如何进行嵌套列表的创建，以实现更复杂的列表结构。

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

4.1列表的标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>无序列表</ul>
    <ol>有序列表</ol>
    <dir>目录列表</dir>
    <dl>定义列表</dl>
    <menu>菜单列表</menu>
    <dt>定义列表的标记</dt>
    <dd>定义列表的标记</dd>
    <li>列表项目的标记</li>

</body>
</html>

4.2使用无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
4.2.1无序列表标记---ul<br>
<ul>
    <li>入门模式</li>
    <li>初级模式</li>
    <li>中继模式</li>
</ul>

4.2.2无序列表的符号类型---type<br>
<ul type="circle">
    <li>图书</li>
    <li>软件</li>
    <li>代码</li>
    <li>APP</li>
</ul>
<ul type="disc">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<ul type="square">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

</body>
</html>

4.3使用有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
4.3.1有序列表标记---ol<br>
    <ol>
        <li>千山鸟飞绝</li>
        <li>万径人踪灭</li>
        <li>孤舟蓑笠翁</li>
        <li>独钓寒江雪</li>
    </ol>

4.3.2有序列表的属性---type<br>
<!--1,a,A,i,I-->
    <ol type="a">
        <li>千山鸟飞绝</li>
        <li>万径人踪灭</li>
        <li>孤舟蓑笠翁</li>
        <li>独钓寒江雪</li>
    </ol>

4.3.3有序列表的起始数值<br>
<ol type="a" start="5">
    <li>千山鸟飞绝</li>
    <li>万径人踪灭</li>
    <li>孤舟蓑笠翁</li>
    <li>独钓寒江雪</li>
</ol>

</body>
</html>

4.4定义列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
<dt>穿越时空</dt><br><dd>穿梭的时空</dd><br>
<dt>穿越星空</dt><br><dd>星空的时空</dd><br>
<dt>穿越曹县</dt><br><dd>曹县的时空</dd><br>
</dl>
</body>
</html>

4.5菜单列表标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
4.5菜单列表标记---menu(与无序列表相同)<br>
<menu>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</menu>
</body>
</html>

4.6目录列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
4.6目录列表---dir<br>
<font size="25" color="aqua">文学世界</font>
<dir>
    <li>散文精选</li>
    <li>小说天地</li>
    <li>诗词歌赋</li>
</dir>
</body>
</html>

4.7使用嵌套的列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
4.7使用嵌套的列表<br>
4.7.1定义列表的嵌套<br>
<dl>
    <dt>曹县</dt><br>
    <dd>宇宙中心</dd><br>
    <dd>中国的耶路撒冷</dd><br>
    <dt>新乡</dt><br>
    <dd>new york</dd><br>
    <dd>中国纽约</dd><br>
</dl>

4.7.2无序和有序列表的嵌套<br>
<ul><li>无序列表</li></ul>
<ol><li>有序列表</li></ol>
</body>
</html>