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>
