<ul>:無序清單元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<ul> HTML 元素表示項目的無序清單,通常呈現為項目符號清單。

嘗試一下

屬性

此元素包含全域屬性

compact 已棄用

此布林屬性提示應以緊湊樣式呈現清單。此屬性的解釋取決於user agent,並且並非所有瀏覽器都支援。

警告: 請勿使用此屬性,因為它已被棄用:請改用 CSS。要達到與 compact 屬性類似的效果,可以使用具有值 80% 的 CSS 屬性line-height

type 已棄用

此屬性設置清單的項目符號樣式。在HTML3.2和HTML 4.0/4.01的過渡版本中定義的值有:

  • circle
  • disc
  • square

WebTV界面中定義了第四種項目符號類型,但並非所有瀏覽器都支援:triangle

如果未出現,且如果元素未應用 CSS list-style-type 屬性,則使用者代理程式將根據清單的巢狀層級選擇項目符號類型。

警告: 請勿使用此屬性,因為它已被棄用;請改用 CSS list-style-type 屬性。

使用注意事項

  • <ul> 元素用於將無意義的項目集合分組,它們在清單中的順序毫無意義。通常,無序清單項目顯示為項目符號,可以是點、圓圈或正方形等多種形式。項目符號樣式未在頁面的HTML描述中定義,而是在其相關的CSS中使用 list-style-type 屬性。
  • <ul><ol> 元素可以嵌套得深入。此外,巢狀清單可以在 <ol><ul> 之間自由交替,沒有限制。
  • <ol><ul> 元素都表示項目的清單。它們之間的區別在於對 <ol> 元素而言,順序是有意義的。要確定使用哪一個,請嘗試更改清單項目的順序;如果含義更改,則應使用 <ol> 元素,否則可以使用 <ul>

範例

簡單範例

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

結果

嵌套清單

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>

結果

無序清單內的有序清單

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>

結果

技術摘要

內容類別 流內容,如果 <ul> 元素的子元素包含至少一個 <li> 元素,則包括 捫及內容
允許的內容 零個或多個 <li><script><template> 元素。
標籤省略 不允許,開始標籤和結束標籤均為必需。
允許的父元素 任何接受流內容的元素。
隱含的 ARIA 角色 list
允許的 ARIA 角色 directorygrouplistboxmenumenubarnonepresentationradiogrouptablisttoolbartree
DOM 介面 HTMLUListElement

規範

Specification
HTML
# the-ul-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ul
compact
Deprecated
type
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.

參見

  • 其他與清單相關的HTML元素:<ol><li><menu>

  • 可能對樣式化 <ul> 元素特別有用的 CSS 屬性: