1.无序列表的设置

无序列表使用 <ul>...</ul> 标签设置，其中每一个列表项使用 <li>...</li> 标签设置。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>嵌套无序列表的使用</title>
	</head>
	
	<body>
		<h1>网站建设流程</h1>
		<ul>
			<li>项目需求</li>
			<li>系统分析
				<ul>
					<li>网站的定位</li>
					<li>内容收集</li>
					<li>栏目规划</li>
					<li>网站目录结构设计</li>
					<li>网站标志设计</li>
					<li>网站风格设计</li>
					<li>网站导航系统设计</li>
				</ul>
			</li>
			<li>伪网页草图
				<ul>
					<li>制作网页草图</li>
					<li>将草图转换为网页</li>
				</ul>
			</li>
			<li>站点建设</li>
			<li>网页布局</li>
			<li>网站测试</li>
			<li>站点的发布与站点管理</li>
		</ul>
	</body>
</html>

运行结果如下：

2.建立不同类型的无序列表

通过使用多个 <ul type="...">...</ul> 标签，可以建立不同类型的无序列表。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>建立不同类型的无序列表</title>
	</head>
	
	<body>
		<h4>Disc 项目符号列表：</h4>
		<ul  type="disc">
			<li>苹果</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>桔子</li>
		</ul>
		<hr/>
		<h4>Circle 项目符号列表：</h4>
		<ul type="circle">
			<li>苹果</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>桔子</li>
		</ul>
		<hr/>
		<h4>Square 项目符号列表：</h4>
		<ul type="square">
			<li>苹果</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>桔子</li>
		</ul>
	</body>
</html>

运行结果如下：

3.有序列表的设置

有序列表使用 <ol>...</ol> 标签设置，其中每一个列表项使用 <li>...</li> 标签设置。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>有序列表的使用</title>
	</head>
	
	<body>
		<h1>HTML简单学习</h1>
		<ol>
			<li>网页的相关概念</li>
			<li>网页与HTML</li>
			<li>Web标准（结构、表现、行为）</li>
			<li>网页设计与开发的过程</li>
			<li>与设计相关的技术因素</li>
			<li>HTML简介</li>
		</ol>
	</body>
</html>

运行结果如下：

4.建立不同类型的有序列表

通过使用多个 <ol type="...">...</ol> 标签，可以建立不同类型的有序列表。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>建立不同类型的有序列表</title>
	</head>
	
	<body>
		<h4>数字列表：</h4>
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>桔子</li>
		</ol>
		<hr/>
		<h4>罗马列表：</h4>
		<ol type="I">
			<li>苹果</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>桔子</li>
		</ol>
		<hr/>
		<h4>字母列表：</h4>
		<ol type="A">
			<li>苹果</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>桔子</li>
		</ol>
	</body>
</html>

运行结果如下：

5.嵌套列表的设置

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>嵌套列表的使用</title>
	</head>
	
	<body>
		<h4>一个嵌套列表：</h4>
		<ul>
			<li>咖啡</li>
			<li>茶
				<ul>
					<li>红茶</li>
					<li>绿茶
						<ul>
							<li>中国茶</li>
							<li>非洲茶</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>牛奶</li>
		</ul>
	</body>
</html>

运行结果如下：

6.自定义列表的设置

自定义列表通过使用 <dl>...</dl> 、<dt>...</dt>、 <dd>...</dd> 标签进行设置。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义列表的使用</title>
	</head>
	
	<body>
		<h2>一个自定义列表：</h2>
		<dl>
			<dt>电脑</dt>
			<dd>是一种能够按照程序运行的电子设备！！！</dd>
			<dt>显示器</dt>
			<dd>以视觉方式显示信息的装置！！！</dd>
		</dl>
	</body>
</html>