HTML <ul> 标签

HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。

实例

无序 HTML 列表：

<!DOCTYPE html>
<html>
<body>
<h1>ul 元素</h1>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

运行一下

定义和用法

<ul> 标签定义无序列表。

<ul> 元素用来将没有数字顺序的一组数据进行分组。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形．虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 list-style-type 属性。

在 <ol> 和 <ul> 元素中，嵌套列表没有深度和嵌套顺序的限制。

<ol> 和 <ul> 元素二者都代表一组数据，不过它们彼此是有区别的，ol元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素，你可以试着去改变数据的顺序。如果想表达的语义改变了，你就需要使用ol元素，否则你该使用ul元素。

浏览器支持

元素
<ul>	Yes	Yes	Yes	Yes	Yes

所有主流浏览器都支持 <ul> 标签。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，ul 元素的 "compact" 和 "type" 属性是不建议使用的。

在 XHTML 1.0 Strict DTD 中，不支持 ul 元素的 "compact" 和 "type" 属性。

可选的属性

属性	值	描述
compact	compact	不建议使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
type	disc square circle	不建议使用。请使用样式取代它。规定列表的项目符号的类型。

属性

值

描述

compact

不建议使用。请使用样式取代它。

规定列表呈现的效果比正常情况更小巧。

type

disc
square
circle

不建议使用。请使用样式取代它。

规定列表的项目符号的类型。

全局属性

<ul> 标签支持 HTML 中的全局属性。

事件属性

<ul> 标签支持 HTML 中的事件属性。

更多实例

<!DOCTYPE html>
<html>
<body>
<h1>所有ul的list样式</h1>
<ul style="list-style-type:circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<ul style="list-style-type:disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<ul style="list-style-type:square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

运行一下

<!DOCTYPE html>
<html>
<body>
<h1>用CSS修改列表的行高</h1>
<p>增加列表的行高:</p>
<ul style="line-height:180%">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<p>减少列表的行高:</p>
<ul style="line-height:80%">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

运行一下

ul 标签的默认样式

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

HTML <ul> 标签

实例

定义和用法

浏览器支持

HTML 与 XHTML 之间的差异

可选的属性

全局属性

事件属性

更多实例

ul 标签的默认样式

分类导航