在线文档教程

ul

<ul>

HTML <ul> 元素表示的事物,典型地呈现为项目符号列表的无序列表。

内容类别Flow content, and if the
    element's children include at least one
  • element, Palpable content.
允许的内容zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements.
标记遗漏None, both the starting and ending tag are mandatory.
允许的双亲Any element that accepts flow content.
允许的 ARIA 角色directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM 接口HTMLUListElement

属性

该元素包含全局属性。

compact这个布尔属性暗示列表应该以紧凑的风格呈现。该属性的解释取决于用户代理,并且不适用于所有浏览器。

用法说明:请勿使用此属性,因为它已被弃用:<ul>元素应使用 CSS 进行样式设置。为了提供与compact属性类似的效果,CSS 属性 line-height 可以与值80%一起使用。

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

  • circle,

在 WebTV 界面中已经定义了第四种项目符号类型,但并非所有浏览器都支持它: triangle.

如果不存在,并且如果没有 CSS list-style-type 属性应用于元素,则用户代理根据列表的嵌套级别决定使用一种子弹。

用法说明:不要使用此属性,因为它已被弃用; 改用 CSS list-style-type属性。

使用说明

  • <ul>元素用于对一组没有数字排序的项目进行分组,并且它们在列表中的顺序没有意义。通常情况下,无序列表项用一个子弹显示,可以有几种形式,如点,圆形或方形。项目符号样式未在页面的 HTML 描述中定义,而是在其关联的 CSS 中使用list-style-type属性定义。

示例

简单的例子

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

在 HTML 上会输出:

  • first item

嵌套列表

<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>

在 HTML 上会输出:

  • first item

- second item third subitem

  • third item

嵌套 <ul> 和 <ol>

<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>

在 HTML 上会输出:

  • first item

规范

规范状态解释
HTML Living StandardThe definition of '<ul>' in that specification.Living Standard
HTML5The definition of '<ul>' in that specification.Recommendation

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support(Yes)(Yes)1(Yes)(Yes)(Yes)
compact(Yes)(Yes)1(Yes)(Yes)(Yes)
type(Yes)(Yes)1(Yes)(Yes)(Yes)

FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support(Yes)(Yes)(Yes)1(Yes)(Yes)(Yes)
compact(Yes)(Yes)(Yes)1(Yes)(Yes)(Yes)
type(Yes)(Yes)(Yes)1(Yes)(Yes)(Yes)