<ul>:无序列表元素

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

尝试一下

内容分类 流式内容,如果 <ul> 元素的子元素包含至少一个 <li> 元素,则为 可感知内容
允许的内容 0 或多个 <li> 元素、<script><template> 元素。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。
隐式 ARIA 角色 list
允许的 ARIA 角色 directory (en-US)group (en-US)listboxmenu (en-US)menubar (en-US)none (en-US)presentation (en-US)radiogroup (en-US)tablist (en-US)toolbar (en-US)tree (en-US)
DOM 接口 HTMLUListElement (en-US)

属性

此元素包含全局属性

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 将输出:

嵌套列表

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 输出:

无序列表中的有序列表

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

以上 HTML 将输出:

规范

Specification
HTML Standard
# the-ul-element

浏览器兼容性

BCD tables only load in the browser

参见

  • 其他列表相关的 HTML 元素:<ol><li><menu>
  • 可能对 <ul> 元素的样式特别有用的 CSS 属性: