MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

<ul>

这篇翻译不完整。请帮忙从英语翻译这篇文章

The HTML <ul> 元素 ( 或 HTML 无序列表元素 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性。

There is no limitation to the depth and imbrication of lists defined with the <ol> and <ul> elements.

Usage note: The <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>.

Usage context

Content categories Flow content
Permitted content zero or more <li> elements, eventually mixed with <ol> and <ul> elements.
Tag omission none, both the start tag and the end tag are mandatory
Permitted parent elements any element that accept flowing content
DOM Interface HTMLUListElement

Attributes

This element includes the global attributes.

compact
This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.
Usage note: Do not use this attribute, as it has been deprecated: the <ul> element should be styled using CSS. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80%.
type
Used to set the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:
  • circle,
  • disc,
  • and 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 does apply to the element, the user agent decide to use a kind of bullets depending on the nesting level of the list.

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

Examples

Simple example

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

Above HTML will output:

  • first item
  • second item
  • third item

Nesting list

<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>
  </li>               <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

Above HTML will output:

  • first item
  • second item
    • second item first subitem
    • second item second subitem
      • second item second subitem first sub-subitem
      • second item second subitem second sub-subitem
      • second item second subitem third sub-subitem
    • second item third subitem
  • third item

Nested <ul> and <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>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

Above HTML will output:

  • first item
  • second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  • third item

See also

  • Other list-related HTML Elements: <ol>, <li>, <menu> and the obsolete <dir>;
  • CSS properties that may be specially useful to style the <ul> element:
    • the list-style property, useful to choose the way the ordinal is displayed,
    • CSS counters, useful to handle complex nested lists,
    • the line-height property, useful to simulate the deprecated compact attribute,
    • the margin property, useful to control the indent of the list.

文档标签和贡献者

 此页面的贡献者: Invar, Ende93
 最后编辑者: Invar,