列表就相当于去超市购物时的那个购物清单,
在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>
View Code