本节课，我们学习HTML 列表。
HTML 支持有序、无序和定义列表：
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul> 看下DEMO演示：
HTML
x
31
31
1
2
<html>3
<head>4
<title>HTML 列表 | Web176教程网web176.com</title>5
<meta charset="utf-8">6
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>7
<style>8
.box ol li {9
list-style-type: disc;10
margin: 0 0 1em 2.5em;11
padding: 0;12
}13
.box ol li, .box ul li {14
font-size: 13px;15
word-break: break-all;16
}17
li, ol, p, ul {18
line-height: 1.5em;19
}20
</style>21
</head>22
<body>23
<div class="box">24
<ul>25
<li>Coffee</li>26
<li>Milk</li>27
</ul> 28
</div>29
30
</body>31
</html>HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol> 看下DEMO演示：
HTML
xxxxxxxxxx1
31
31
1
2
<html>3
<head>4
<title>HTML 列表 | Web176教程网web176.com</title>5
<meta charset="utf-8">6
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>7
<style>8
.box ol li {9
list-style-type: decimal;10
margin: 0 0 1em 2.5em;11
padding: 0;12
}13
.box ol li, .box ul li {14
font-size: 13px;15
word-break: break-all;16
}17
li, ol, p, ul {18
line-height: 1.5em;19
}20
</style>21
</head>22
<body>23
<div class="box">24
<ul>25
<li>Coffee</li>26
<li>Milk</li>27
</ul> 28
</div>29
30
</body>31
</html>HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> DEMO演示：
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<title>HTML 列表 | Web176教程网web176.com</title>5
<meta charset="utf-8">6
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>7
<style>8
.box ol li {9
list-style-type: decimal;10
margin: 0 0 1em 2.5em;11
padding: 0;12
}13
.box ol li, .box ul li {14
font-size: 13px;15
word-break: break-all;16
}17
li, ol, p, ul {18
line-height: 1.5em;19
}20
</style>21
</head>22
<body>23
<div class="box">24
<dl>25
<dt>Coffee</dt>26
<dd>- black hot drink</dd>27
<dt>Milk</dt>28
<dd>- white cold drink</dd>29
</dl> 30
</div>31
32
</body>33
</html>注意事项 – 有用提示
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
HTML 列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定列表项的描述 |
更多实例
1、不同类型的有序列表
HTML
xxxxxxxxxx1
50
50
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<h4>编号列表：</h4>10
<ol>11
<li>Apples</li>12
<li>Bananas</li>13
<li>Lemons</li>14
<li>Oranges</li>15
</ol> 16
17
<h4>大写字母列表：</h4>18
<ol type="A">19
<li>Apples</li>20
<li>Bananas</li>21
<li>Lemons</li>22
<li>Oranges</li>23
</ol> 24
25
<h4>小写字母列表：</h4>26
<ol type="a">27
<li>Apples</li>28
<li>Bananas</li>29
<li>Lemons</li>30
<li>Oranges</li>31
</ol> 32
33
<h4>罗马数字列表：</h4>34
<ol type="I">35
<li>Apples</li>36
<li>Bananas</li>37
<li>Lemons</li>38
<li>Oranges</li>39
</ol> 40
41
<h4>小写罗马数字列表：</h4>42
<ol type="i">43
<li>Apples</li>44
<li>Bananas</li>45
<li>Lemons</li>46
<li>Oranges</li>47
</ol> 48
49
</body>50
</html>2、不同类型的无序列表
HTML
xxxxxxxxxx1
36
36
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>10
11
<h4>圆点列表：</h4>12
<ul style="list-style-type:disc">13
<li>Apples</li>14
<li>Bananas</li>15
<li>Lemons</li>16
<li>Oranges</li>17
</ul> 18
19
<h4>圆圈列表：</h4>20
<ul style="list-style-type:circle">21
<li>Apples</li>22
<li>Bananas</li>23
<li>Lemons</li>24
<li>Oranges</li>25
</ul> 26
27
<h4>正方形列表：</h4>28
<ul style="list-style-type:square">29
<li>Apples</li>30
<li>Bananas</li>31
<li>Lemons</li>32
<li>Oranges</li>33
</ul>34
35
</body>36
</html>3、如何嵌套列表
HTML
xxxxxxxxxx1
22
22
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<h4>嵌套列表：</h4>10
<ul>11
<li>Coffee</li>12
<li>Tea13
<ul>14
<li>Black tea</li>15
<li>Green tea</li>16
</ul>17
</li>18
<li>Milk</li>19
</ul>20
21
</body>22
</html>4、自定义列表
HTML
xxxxxxxxxx1
18
18
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<h4>一个自定义列表：</h4>10
<dl>11
<dt>Coffee</dt>12
<dd>- black hot drink</dd>13
<dt>Milk</dt>14
<dd>- white cold drink</dd>15
</dl>16
17
</body>18
</html>阅读剩余 90%
作者：terry，如若转载，请注明出处：https://www.web176.com/html4/7023.html
支付宝 
微信 