?
This document uses PHP Chinese website manual Release
HTML <ul> 元素表示的事物，典型地呈現(xiàn)為項(xiàng)目符號(hào)列表的無序列表。
內(nèi)容類別 | Flow content, and if the <ul> element's children include at least one <li> element, Palpable content. |
|---|---|
允許的內(nèi)容 | zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements. |
標(biāo)記遺漏 | 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這個(gè)布爾屬性暗示列表應(yīng)該以緊湊的風(fēng)格呈現(xiàn)。該屬性的解釋取決于用戶代理，并且不適用于所有瀏覽器。
用法說明：請(qǐng)勿使用此屬性，因?yàn)樗驯粭売茫?code><ul>元素應(yīng)使用 CSS 進(jìn)行樣式設(shè)置。為了提供與compact屬性類似的效果，CSS 屬性 line-height 可以與值80%一起使用。
type用于設(shè)置列表的項(xiàng)目符號(hào)樣式。在 HTML3.2 和 HTML 4.0 / 4.01 的過渡版本中定義的值為：
circle,disc,and
square.
在 WebTV 界面中已經(jīng)定義了第四種項(xiàng)目符號(hào)類型，但并非所有瀏覽器都支持它： triangle.
如果不存在，并且如果沒有 CSS list-style-type 屬性應(yīng)用于元素，則用戶代理根據(jù)列表的嵌套級(jí)別決定使用一種子彈。
用法說明：不要使用此屬性，因?yàn)樗驯粭売? 改用 CSS list-style-type屬性。
使用說明
<ul>元素用于對(duì)一組沒有數(shù)字排序的項(xiàng)目進(jìn)行分組，并且它們?cè)诹斜碇械捻樞驔]有意義。通常情況下，無序列表項(xiàng)用一個(gè)子彈顯示，可以有幾種形式，如點(diǎn)，圓形或方形。項(xiàng)目符號(hào)樣式未在頁面的 HTML 描述中定義，而是在其關(guān)聯(lián)的 CSS 中使用list-style-type屬性定義。使用
<ol>和<ul>元素定義的嵌套列表的深度和交替沒有限制。在
<ol>和<ul>元素都代表項(xiàng)目的列表。它們的不同之處在于，對(duì)于<ol>元素而言，順序是有意義的。作為決定使用哪一個(gè)的一個(gè)經(jīng)驗(yàn)法則，嘗試改變列表項(xiàng)的順序; 如果含義發(fā)生了變化，<ol>則應(yīng)使用該元素，否則可以使用<ul>。
示例
簡(jiǎn)單的例子
<ul> <li>first item</li> <li>second item</li> <li>third item</li></ul>
在 HTML 上會(huì)輸出：
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 上會(huì)輸出：
first item
second item
second item second subitem first sub-subitem
second item second subitem second sub-subitem
second item second subitem third sub-subitem
second item first subitem
second item second 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 上會(huì)輸出：
first item
second item
second item first subitem
second item second subitem
second item third subitem
third item
規(guī)范
規(guī)范 | 狀態(tài) | 解釋 |
|---|---|---|
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) |