<ul>: The Unordered List element

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

¥The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.

Try it

属性

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

compact

此布尔属性暗示列表应该以紧凑的样式呈现。该属性的解释取决于 user agent，并且它不适用于所有浏览器。

警告：不要使用此属性，因为它已被弃用：使用 CSS 代替。要提供与 compact 属性类似的效果，可以使用 CSS 属性 line-height 以及值 80%。

¥Warning: Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80%.

type

该属性设置列表的项目符号样式。HTML3.2 和 HTML 4.0/4.01 过渡版本下定义的值是：

  • circle
  • disc
  • square

WebTV 界面中定义了第四种子弹类型，但并非所有浏览器都支持它：triangle。

如果不存在并且没有 CSS list-style-type 属性应用于该元素，则用户代理将根据列表的嵌套级别选择项目符号类型。

警告：不要使用此属性，因为它已被弃用；请改用 CSS list-style-type 属性。

¥Warning: Do not use this attribute, as it has been deprecated; use the CSS list-style-type property instead.

使用说明

¥Usage notes

  • <ul> 元素用于对没有数字排序的项目集合进行分组，它们在列表中的顺序没有意义。通常，无序列表项目用项目符号显示，项目符号可以有多种形式，例如点、圆形或正方形。项目符号样式不是在页面的 HTML 描述中定义的，而是使用 list-style-type 属性在其关联的 CSS 中定义的。
  • <ul> 和 <ol> 元素可以根据需要嵌套任意深度。此外，嵌套列表可以不受限制地在 <ol> 和 <ul> 之间交替。
  • <ol> 和 <ul> 元素均表示项目列表。它们的不同之处在于，对于 <ol> 元素，顺序是有意义的。要确定使用哪一个，请尝试更改列表项的顺序；如果含义改变，则应使用 <ol> 元素，否则可以使用 <ul>。

示例

¥Examples

简单的例子

¥Simple example

html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

结果

¥Result

嵌套列表

¥Nesting a list

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

结果

¥Result

无序列表内的有序列表

¥Ordered list inside unordered list

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

结果

¥Result

技术总结

¥Technical summary

内容类别 流量内容，如果 <ul> 元素的子元素包含至少一个 <li> 元素，则 可触知的内容。
允许的内容 零个或多个 <li>、<script> 和 <template> 元素。
标签遗漏 无，开始和结束标记都是强制性的。
允许的父级 任何接受 流动内容 的元素。
隐式 ARIA 角色 list
允许的 ARIA 角色 directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM 接口 HTMLUListElement

规范

Specification
HTML Standard
# the-ul-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also

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