列表就相当于去超市购物时的那个购物清单,
在HTML也可以创建列表,在网页中一共有三种列表:
1.无序列表
2.有序列表
3.定义列表
无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项,
一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值:
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆
注意:默认的项目符号我们一般都不使用!!
如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
有序列表
有序列表和无序列表类似,只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性,可以指定序号的类型
可选值:1,默认值,使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素
列表之间都是可以互相嵌套,可以在无序列表中放个有序列表,也可以在有序列表中放一个无序列表
定义列表
义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt : 被定义的内容
dd : 对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 /* 9 去掉项目符号 10 * */ 11 /*ul{ 12 list-style: none; 13 }*/ 14 15 </style> 16 </head> 17 <body> 18 19 <!-- 20 列表就相当于去超市购物时的那个购物清单, 21 在HTML也可以创建列表,在网页中一共有三种列表: 22 1.无序列表 23 2.有序列表 24 3.定义列表 25 --> 26 27 <!-- 28 无序列表 29 - 使用ul标签来创建一个无序列表 30 - 使用li在ul中创建一个一个的列表项, 31 一个li就是一个列表项 32 33 通过type属性可以修改无序列表的项目符号 34 可选值: 35 disc,默认值,实心的圆点 36 square,实心的方块 37 circle,空心的圆 38 39 注意:默认的项目符号我们一般都不使用!! 40 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置 41 42 ul和li都是块元素 43 --> 44 <ul> 45 <li>西门大官人</li> 46 <li>柴大官人</li> 47 <li>许大官人</li> 48 <li>唐僧大官人</li> 49 </ul> 50 51 <!-- 52 有序列表和无序列表类似,只不过它使用ol来代替ul 53 有序列表使用有序的序号作为项目符号 54 type属性,可以指定序号的类型 55 可选值:1,默认值,使用阿拉伯数字 56 a/A 采用小写或大写字母作为序号 57 i/I 采用小写或大写的罗马数字作为序号 58 59 ol也是块元素 60 --> 61 <ol type="I"> 62 <li>结构</li> 63 <li>表现</li> 64 <li>行为</li> 65 </ol> 66 67 <!-- 68 列表之间都是可以互相嵌套,可以在无序列表中放个有序列表 69 也可以在有序列表中放一个无序列表 70 --> 71 72 <p>菜谱</p> 73 <ul> 74 <li> 75 鱼香肉丝 76 <ol> 77 <li>鱼</li> 78 <li>香</li> 79 <li>肉丝</li> 80 </ol> 81 </li> 82 <li> 83 宫保鸡丁 84 <ul> 85 <li>宫保</li> 86 <li>鸡丁</li> 87 </ul> 88 </li> 89 <li>青椒肉丝</li> 90 </ul> 91 92 </body> 93 </html>
原文地址:https://www.cnblogs.com/Wll-Fss/p/9221985.html