HTML
<ul>
element
represents an unordered list of items, typically rendered as a bulleted list.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 内容类别 |
流内容
, and if the
<ul>
element's children include at least one
<li>
element,
palpable content
.
|
|---|---|
| 准许内容 |
Zero or more
<li>
,
<script>
and
<template>
元素。
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content . |
| Implicit ARIA role |
list
|
| Permitted ARIA roles |
directory
,
group
,
listbox
,
menu
,
menubar
,
none
,
presentation
,
radiogroup
,
tablist
,
toolbar
,
tree
|
| DOM Interface |
HTMLUListElement
|
此元素包括 全局属性 .
compact
compact
attribute, the CSS property
line-height
can be used with a value of
80%
.
type
circle
disc
square
A fourth bullet type has been defined in the WebTV interface, but not all browsers support it:
triangle
.
If not present and if no
CSS
list-style-type
property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.
list-style-type
特性代替。
<ul>
element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the
list-style-type
特性。
<ul>
and
<ol>
elements may be nested as deeply as desired. Moreover, the nested lists may alternate between
<ol>
and
<ul>
without restriction.
<ol>
and
<ul>
elements both represent a list of items. They differ in that, with the
<ol>
element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the
<ol>
element should be used, otherwise you can use
<ul>
.
<ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul>
The above HTML will output:
<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>
The above HTML will output:
<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>
The above HTML will output:
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<ul>' in that specification. |
实时标准 | |
|
HTML5
The definition of '<ul>' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ul
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
compact
弃用
非标
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
type
弃用
非标
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
<ol>
,
<li>
,
<menu>
<ul>
元素：
list-style
property, to choose the way the ordinal displays
line-height
property, to simulate the deprecated
compact
属性
margin
property, to control the list indentation