HTML <ul> 标签

HTML `<ul>` 标签

实例

无序 HTML 列表：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

（请在页面底部查看更多实例）

定义和用法

<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	不赞成使用。请使用样式取代它。规定列表的项目符号的类型。

全局属性

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

事件属性

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

HTML 列表实例

一个无序列表

本例演示一个无序列表。

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

不同类型的无序列表

本例演示不同类型的无序列表。

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>

嵌套列表

本例演示如何嵌套列表。

<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

嵌套列表 2

本例演示更复杂的嵌套列表。

<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

ul

HTML <ul> 标签

实例