无序列表
<ul>标签定义无序列表,以<ul>开始,</ul>结束,每一项使用<li></li>标签定义内容。
在Html中,我们通常遇到需要列表来布局的,使用<ul><li>比较多。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >无序列表</ title > </ head > < body > < ul > < li >无序列表</ li > < li >无序列表</ li > < li >无序列表</ li > < li >无序列表</ li > < li >无序列表</ li > </ ul > </ body > </ html > |
运行浏览器后得到的效果如图
type属性
type属性规定列表的项目符号的类型。它的类型有三种,分别是实心圆(默认)、空心圆、实心方块。
属性值
值 | 描述 |
---|---|
disc | 实心圆(默认值)。 |
circle | 空心圆。 |
square | 实心方块。 |
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >无序列表</ title > </ head > < body > <!--默认符号类型为实心圆--> < ul > < li >Coffee</ li > < li >Tea</ li > < li >Milk</ li > </ ul > <!--空心圆--> < ul type = "circle" > < li >Coffee</ li > < li >Tea</ li > < li >Milk</ li > </ ul > <!--实心方块--> < ul type = "square" > < li >Coffee</ li > < li >Tea</ li > < li >Milk</ li > </ ul > </ body > </ html > |
默认符号类型为实心圆,所以第一个<ul>可以不用写type属性。
运行浏览器后得到的效果如图
附加说明:<ul><li>常常使用在文章标题列表、图片列表等有规律列表类内容排版布局。
提示:<ul>标签必须和<li>配合使用,不能单独使用。多个<li>也必须要有<ul>或者<ol>,如果没有,浏览器默认显示无序列表,但W3C会提示错误。<ul>标签下不能直接放内容或其它标签,即使要放都必须放入<li>标签内,而<li>标签内可以再放<ul><ol>等格式各样标签。
你觉得文章内容怎么样