1. 无序列表的设置

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

示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</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">
	</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>

disc列表：

苹果
香蕉
柠檬
桔子

circle列表：

苹果
香蕉
柠檬
桔子

square列表：

苹果
香蕉
柠檬
桔子

3.有序列表的设置

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

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

示例：

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

HTML5列表学习

网页的相关概念
网页与HTML
Web标准（结构、表现、行为）
网页设计与开发的过程
与设计相关的技术因素
HTML简介

4. 自定义列表的设置

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

示例：

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

自定义列表