<ul>:无序列表元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <ul> 元素表示无序的项目列表,通常渲染为项目符号列表。

尝试一下

属性

此元素包含全局属性

compact 已弃用

此布尔属性提示列表是否需要被渲染为更紧凑的样式。用户代理决定如何解释这个属性,且并非所有浏览器都支持它。

警告: 请不要使用这个属性,它已经被弃用了:请使用 CSS 来更改样式。如果想达到与 compact 属性相同的效果,将 CSS 属性 line-height 的值设为 80% 即可。

type 已弃用

用于设置列表的着重号样式,定义于 HTML3.2 和过渡版本 HTML 4.0/4.01 中的可用值有:

  • circle
  • disc
  • square

存在第四种定义于 WebTV 接口的着重号样式,但并不是所有浏览器都支持:triangle

如果未设置此 HTML 属性且没有 CSS list-style-type 属性作用于这个元素,用户代理会决定使用哪种着重号样式,一般来说这也和嵌套的层级数有关。

警告: 请不要使用这个属性,它已经被弃用了:请使用 CSS list-style-type 属性作为代替。

使用说明

  • <ul> 元素用来将没有数字顺序的一组数据进行分组,并且它们的数字顺序是没有意义的。举个例子,无序列表的列表项通常通过一个字符进行装饰,这些字符的形式可以是点,圆乃至方形。虽然这个字符没有直接在页面上定义,但是可以用与之相关的 CSS 对其进行操作,例如使用 list-style-type 属性。
  • <ul><ol> 元素可以嵌套任意深度。此外,嵌套列表可以不受限制地在 <ol><ul> 之间交替使用。
  • <ol><ul> 元素二者都代表一组数据,不过它们彼此是有区别的,<ol> 元素中的顺序是有意义的。如果想确定到底需要使用哪一个列表元素,可以试着去改变数据的顺序。如果想表达的语义改变了,就需要使用 <ol> 元素,否则该使用 <ul> 元素。

示例

简单的示例

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

结果

嵌套列表

html
<ul>
  <li>第一项</li>
  <li>
    第二项
    <!-- 注意,关闭的 </li> 标签没有放置在这里!-->
    <ul>
      <li>第二项第一子项</li>
      <li>
        第二项第二子项
        <!-- 第二个嵌套的无序列表也一样!-->
        <ul>
          <li>第二项第二子项第一子子项</li>
          <li>第二项第二子项第二子子项</li>
          <li>第二项第二子项第三子子项</li>
        </ul>
      </li>
      <!-- 为包含第三个无序列表的 li 关闭 </li> 标签 -->
      <li>第二项第三子项</li>
    </ul>
    <!-- 关闭的 </li> 标签在这里! -->
  </li>
  <li>第三项</li>
</ul>

结果

无序列表中的有序列表

html
<ul>
  <li>第一项</li>
  <li>
    第二项
    <!-- 注意,关闭的 </li> 标签没有放置在这里! -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
    <!-- 关闭的 </li> 标签在这里 -->
  </li>
  <li>第三项</li>
</ul>

结果

技术概要

内容分类 流式内容,如果 <ul> 元素的子元素包含至少一个 <li> 元素,则为可感知内容
允许的内容 0 或多个 <li> 元素、<script><template> 元素。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。
隐含的 ARIA 角色 list
允许的 ARIA 角色 directorygrouplistboxmenumenubarnonepresentationradiogrouptablisttoolbartree
DOM 接口 HTMLUListElement

规范

Specification
HTML
# the-ul-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ul
compact
Deprecated
type
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.

参见

  • 其他列表相关的 HTML 元素:<ol><li><menu>

  • 可能对 <ul> 元素的样式特别有用的 CSS 属性: