一、无序列表ul
ul：unordered list，“无序列表”的意思。
li：list item，“列表项”的意思。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 7 </head> 8 <body> 9 10 <ul> 11 <li>张三</li> 12 <li>李四</li> 13 <li>王五</li> 14 </ul> 15 16 </body> 17 </html>
li不能单独存在，必须包裹在ul里面。
属性：type='属性值'，属性值可以是：disc（实心圆点）、square（实心方点）、circle（空心圆）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 7 </head> 8 <body> 9 10 <ul> 11 <li>张三 默认</li> 12 <li>李四 默认</li> 13 <li>王五 默认</li> 14 </ul> 15 16 <ul type="square"> 17 <li>张三 实心方点</li> 18 <li>李四 实心方点</li> 19 <li>王五 实心方点</li> 20 </ul> 21 22 <ul type="circle"> 23 <li>张三 空心圆</li> 24 <li>李四 空心圆</li> 25 <li>王五 空心圆</li> 26 </ul> 27 28 </body> 29 </html>
列表的嵌套：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 7 </head> 8 <body> 9 10 <ul> 11 <li>北京 12 <ul> 13 <li>海淀区 14 <ul> 15 <li>狗头包子</li> 16 <li>麻将馆</li> 17 <li>KTV</li> 18 </ul> 19 </li> 20 <li>天河区</li> 21 <li>朝阳区</li> 22 </ul> 23 </li> 24 <li>上海 25 <ul> 26 <li>东城区</li> 27 <li>越秀区</li> 28 <li>吴中区</li> 29 </ul> 30 </li> 31 </ul> 32 33 </body> 34 </html>
声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。
二、有序列表ol
英文单词：Ordered List。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 7 </head> 8 <body> 9 10 <ol> 11 <li>第一 默认</li> 12 <li>第二 默认</li> 13 <li>第三 默认</li> 14 </ol> 15 16 </body> 17 </html>
属性：type="属性值"，属性值可以是1、a、A、i、I
start=“3” ， 表示从几开始。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 7 </head> 8 <body> 9 10 <ol> 11 <li>哈哈</li> 12 <li>嘿嘿</li> 13 <li>呵呵</li> 14 </ol> 15 16 <ol type="a"> 17 <li>哈哈</li> 18 <li>嘿嘿</li> 19 <li>呵呵</li> 20 </ol> 21 22 <ol type="I"> 23 <li>哈哈</li> 24 <li>嘿嘿</li> 25 <li>呵呵</li> 26 </ol> 27 28 <ol type="i" start="3"> 29 <li>哈哈</li> 30 <li>嘿嘿</li> 31 <li>呵呵</li> 32 </ol> 33 34 </body> 35 </html>
有序列表一般不常用
三、定义列表dl
定义列表的作用非常大
<dl>英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
<dt>：definition title 列表的标题，这个标签是必须的<dd>：definition description 列表的列表项，如果不需要它，可以不加
备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 7 </head> 8 <body> 9 10 <dl> 11 <dt>第一条规则</dt> 12 <dd>不准睡觉</dd> 13 <dd>不准交头接耳</dd> 14 <dd>不准下神</dd> 15 16 <dt>第二条规则</dt> 17 <dd>可以泡妞</dd> 18 <dd>可以找妹子</dd> 19 <dd>可以看mv</dd> 20 </dl> 21 22 </body> 23 </html>
京东案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 7 </head> 8 <body> 9 10 <dl style="float: left; margin-left: 30px;"> 11 <dt><b>购物指南</b></dt> 12 <dd>购物流程</dd> 13 <dd>会员介绍</dd> 14 <dd>购物旅行</dd> 15 <dd>常见问题</dd> 16 <dd>大家电</dd> 17 <dd>联系客服</dd> 18 </dl> 19 <dl style="float: left; margin-left: 30px;"> 20 <dt><b>配送方式</b></dt> 21 <dd>上门自提</dd> 22 <dd>211限时达</dd> 23 <dd>配送服务查询</dd> 24 <dd>配送费收取标准</dd> 25 <dd>海外配送</dd> 26 </dl> 27 <dl style="float: left; margin-left: 30px;"> 28 <dt><b>支付方式</b></dt> 29 <dd>货到付款</dd> 30 <dd>在线支付</dd> 31 <dd>分期付款</dd> 32 <dd>邮局汇款</dd> 33 <dd>公司转账</dd> 34 </dl> 35 <dl style="float: left; margin-left: 30px;"> 36 <dt><b>售后服务</b></dt> 37 <dd>售后政策</dd> 38 <dd>价格保护</dd> 39 <dd>退款说明</dd> 40 <dd>返修/退换货</dd> 41 <dd>取消订单</dd> 42 </dl> 43 <dl style="float: left; margin-left: 30px;"> 44 <dt><b>特色服务</b></dt> 45 <dd>夺宝岛</dd> 46 <dd>DIY装机</dd> 47 <dd>延保服务</dd> 48 <dd>京东E卡</dd> 49 <dd>京东通信</dd> 50 <dd>京东+</dd> 51 </dl> 52 53 </body> 54 </html>
作者：流浪者
日期：2019-08-30