HTML <ul> 元素

HTML <ul> 元素表示一个项目的无序列表，通常呈现为项目符号列表。

显示一个无序 HTML 列表：

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

尝试一下 »

特性

内容类别	流式内容，同时如果 <ul> 元素的后代包含至少一个 <li> 元素，则为可触知内容。
允许的内容	零到多个 <li> 元素，它们通常包含嵌套的 <ol> 或 <ul> 元素。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受流式内容的元素。
允许的 ARIA 角色	directory，group，listbox，menu，menubar，radiogroup，tablist，toolbar，tree，presentation
DOM 接口	HTMLUListElement

属性

该元素包含了全局属性。

compact

已废弃 HTML4.01

该布尔属性表示列表应该显示得更正常情况更加紧凑。该属性的解析结果取决于用户代理，并且不适用于所有浏览器。

注意： 请勿使用该属性，因为它已废弃：<ol> 元素应使用 CSS 来设置样式。为了实现类似 compact 属性的效果，可以使用 CSS 属性的 line-height，设置其值为 80％ 。

type

已废弃 HTML4.01

用于设置列表的项目符号样式。在 HTML3.2 和 HTML 4.0/4.01 的过渡版本中定义的值为：

• circle，
• disc，
• 和 square。

在 WebTV 界面中已经定义了第四种符号类型，但并非所有的浏览器都支持它：triangle。

如果未设置该值，并且没有设置 CSS list-style-type 属性，则由用户代理会根据列表的嵌套级别来决定使用哪种符号样式。

使用注意： 请勿使用该属性，因为它已废弃；使用 CSS list-style-type 来替代。

事件属性

<ul> 元素支持所有 HTML事件属性。

使用注意

• <ul> 元素用于对一组没有数字序号的项目进行分组，并且它们在列表中的顺序没有意义。通常情况下，无序列表项前面会显示为一个象子弹的点，可以有几种形式，如点，圆形或方形。该点的样式未在页面的 HTML 描述中定义，而是在其关联的 CSS 中使用 list-style-type 属性定义。
• 使用 <ol> 和 <ul> 元素定义的嵌套列表的深度和反复次数没有限制。
• <ol> 和 <ul> 都表示项目列表。它们的不同点是在 <ol> 元素里，顺序是有意义的。对于决定使用哪一个有一个经验法则：尝试改变列表项的顺序; 如果意义改变了，应该使用 <ol> 元素，否则使用 <ul> 就足够了。

更多实例

默认列表

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

尝试一下 »

嵌套列表

<ul>
  <li>第一项</li>
  <li>第二项 <!-- 关闭 </li> 标签不在这里！ -->
    <ul>
      <li>第二项的第一子项</li>
      <li>第二项的第二子项 <!-- 和第二个嵌套的的无序列表一样！ -->
        <ul>
          <li>第二项的第二子项的第一子子项</li>
          <li>第二项的第二子项的第二子子项</li>
          <li>第二项的第二子项的第三子子项</li>
        </ul>
      </li> <!-- 第三个无序列表的 </li> 关闭标签 -->
      <li>第二项的第三子项</li>
    </ul> 
  </li> <!-- 关闭 </li> 标签在这里 -->
  <li>第三项</li>
</ul>

尝试一下 »

嵌套 <ul> 和 <ol>

<ul>
  <li>第一项</li>
  <li>第二项  <!-- 关闭 </li> 标签不在这里！ -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
  </li>  <!-- 关闭 </li> 标签在这里 -->
  <li>第三项</li>
</ul>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <ul> 的定义	现行的标准	-
HTML5 <ul> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 其他列表相关的 HTML 元素：<ol>，<li>，<menu> 和已过时的 <dir>；
• 有助于设置 <ul> 元素的样式的 CSS 属性：
  • list-style 属性，有助于选择显示序号的方式，
  • CSS counters，有助于处理复杂的嵌套列表，
  • line-height 属性，有助于模拟已经废弃的 compact 属性，
  • margin 属性，有助于控制列表的缩进。
• HTML 教程：HTML 列表