二维码
搜索 ×

HTML 无序列表

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

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 标记参考]。

推荐教程