非常教程

HTML参考手册

标签 | Elements

ul

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

内容类别

Flow content, and if the <ul> element's children include at least one <li> 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,
  • disc,
  • and square.

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

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

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

使用说明

  • <ul>元素用于对一组没有数字排序的项目进行分组,并且它们在列表中的顺序没有意义。通常情况下,无序列表项用一个子弹显示,可以有几种形式,如点,圆形或方形。项目符号样式未在页面的 HTML 描述中定义,而是在其关联的 CSS 中使用list-style-type属性定义。
  • 使用<ol><ul>元素定义的嵌套列表的深度和交替没有限制。
  • <ol><ul>元素都代表项目的列表。它们的不同之处在于,对于<ol>元素而言,顺序是有意义的。作为决定使用哪一个的一个经验法则,尝试改变列表项的顺序; 如果含义发生了变化,<ol>则应使用该元素,否则可以使用<ul>

示例

简单的例子

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

在 HTML 上会输出:

  • first item
  • second item
  • third 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
    • 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

嵌套 <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
  • second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  • third item

规范

规范

状态

解释

HTML Living StandardThe definition of '<ul>' in that specification.

Living Standard

HTML5The definition of '<ul>' in that specification.

Recommendation

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

compact

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

type

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

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

HTML

超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。