二维码

HTML 无序列表

HTML 无序列表

HTML 标记定义了一个无序的 (项目符号)列表。<ul>

无序列 HTML 列表

无序列表以标记开头。每个列表项都以标记开头。<ul>``<li>

默认情况下,列表项将用项目符号(黑色小圆圈)标记:

1
2
3
4
5
<ul>  
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

无序 HTML 列表 - 选择列表项标记

CSS 属性用于定义 列表项标记。它可以具有以下值之一:list-style-type

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
示例 - 光盘
1
2
3
4
5
<ul style="list-style-type:disc;">  
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

示例 - 圆形
1
2
3
4
5
6
<ul style="list-style-type:circle;">  
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

</ul>

示例 - 正方形
1
2
3
4
5
6
<ul style="list-style-type:square;">  
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

</ul>

示例 - 无
1
2
3
4
5
6
<ul style="list-style-type:none;">  
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

</ul>

嵌套 HTML 列表

列表可以嵌套(列表内部的列表):

1
2
3
4
5
6
7
8
9
10
<ul>  
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

注意: 列表项 () 可以包含 一个新列表,以及其他 HTML 元素,如图像和链接等。<li>


使用 CSS 的水平列表

HTML 列表可以通过 CSS 以多种不同的方式设置样式。

一种流行的方法是水平设置列表样式,以创建导航菜单:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

提示: 您可以在我们的 [CSS 教程中了解有关 CSS] 的更多信息。


本章小结

  • 使用 HTML 元素定义无序列表<ul>
  • 使用 CSS 属性定义列表项标记list-style-type
  • 使用 HTML 元素定义列表项<li>
  • 列表可以嵌套
  • 列表项可以包含其他 HTML 元素
  • 使用 CSS 属性水平显示列表float:left

HTML 列表标签

Tag Description
[<ul>] Defines an unordered list
[<ol>] Defines an ordered list
[<li>] Defines a list item
[<dl>] Defines a description list
[<dt>] Defines a term in a description list
[<dd>] Describes the term in a description list

有关所有可用 HTML 标记的完整列表,请访问我们的 [HTML 标记参考]。