HTML学习----列表_请简要描述html定义列表的的嵌套形式-CSDN博客

本文链接：https://blog.csdn.net/qq_42937462/article/details/112857649

文章目录

列表
一、列表的标签
二、无序列表
- 1.无序列表的标签
- 2.无序列表的属性
三、有序列表
- 1.有序列表的标签
- 2.有序列表的属性
四、列表的嵌套
- 1.定义列表的嵌套

列表

列表可以使网页信息整齐，直观的显示出来，便于用户阅读，理解。

一、列表的标签

列表分为两种，一种是有序列表，一种是无序列表，有序列表使用编号来记录项目的顺序，无序列表使用项目符号记录无序的项目。
列表的主要标签有以下几种：
|标签|描述 |

项目	Value
<“ul”>	无序列表i
<“ol”>	有序列表
<“dir”>	目录列表
<“dl”>	定义列表
<“menu”>	菜单列表
<“dt”> <“dd”>	定义列表标签
<“li”>	列表项目的标签

二、无序列表

1.无序列表的标签

代码如下（示例）：

<!doctype html>
<html>
 <head>
    <title>创建无序列表</title>
</head>
<body>
<font size="+3" color="#0066FF">我是无序列表：</font><br/><br/>
<ul>
    <li>无序列表一</li>
    <li>无序列表二</li>
    <li>无序列表三</li>
</ul>
</body>
</html>

在这里插入图片描述

2.无序列表的属性

代码如下（示例）：

<!doctype html>
<html>
 <head>
    <title>无序列表的标签</title>
</head>
<body>
<font size="+3" color="#0066FF">符号类型：</font><br/><br/>
<ul>
    <li type="circle">无序列表一</li>
    <li type="disc">无序列表二</li>
    <li type="square">无序列表三</li>
</ul>
</body>
</html>

在这里插入图片描述

三、有序列表

有序列表是使用编号来编排项目的。

1.有序列表的标签

代码如下（示例）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建有序列表</title>
</head>

<body>
<font size="+4" color="#CC6600">江雪</font><br />
<ol>
    <li>千山鸟飞绝</li>
    <li>万径人踪灭</li>
    <li>孤舟蓑笠翁</li>
    <li>独钓寒江雪</li>
</ol>
</body>
</html>

在这里插入图片描述

2.有序列表的属性

代码如下（示例）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>

<body>
<font size="+4" color="#CC6600">有序列表的属性</font><br />
<ol type="1">
    <li>千山鸟飞绝</li>
    <li>万径人踪灭</li>
</ol>
<ol type="A">
    <li>千山鸟飞绝</li>
    <li>万径人踪灭</li>
</ol>
<ol type="a">
    <li>千山鸟飞绝</li>
    <li>万径人踪灭</li>
</ol>
<ol type="i">
    <li>千山鸟飞绝</li>
    <li>万径人踪灭</li>
</ol>
<ol type="I">
    <li>千山鸟飞绝</li>
    <li>万径人踪灭</li>
</ol>
</body>
</html>

在这里插入图片描述

四、列表的嵌套

列表的嵌套是指多于一级层次的列表，在一级项目下面可以存在二级项目等，项目列表间可以进行嵌套

1.定义列表的嵌套

代码如下（示例）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表嵌套</title>
</head>

<body>
<font size="+4" color="#CC6600">列表嵌套</font><br />
<dl>
    <dt>名词一</dt>
    <dd>列表一</dd>
    <dd>列表二</dd>
    <dt>名词二</dt>
    <dd>列表三</dd>
    <dd>列表四</dd>
</dl>
</body>
</html>

在这里插入图片描述