目录搜索
Attributesaccesskey (attribute)class (attribute)contenteditable (attribute)contextmenu (attribute)data-* (attribute)dir (attribute)draggable (attribute)dropzone (attribute)Global attributeshidden (attribute)id (attribute)itemid (attribute)itemprop (attribute)itemref (attribute)itemscope (attribute)itemtype (attribute)lang (attribute)slot (attribute)spellcheck (attribute)style (attribute)tabindex (attribute)title (attribute)translate (attribute)Elementsaabbraddressareaarticleasideaudiobbasebdibdoblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1headheaderhrhtmliiframeimginputinput type="button"input type="checkbox"input type="color"input type="date"input type="datetime"-localinput type="email"input type="file"input type="hidden"input type="image"input type="month"input type="number"input type="password"input type="radio"input type="range"input type="reset"input type="search"input type="submit"input type="tel"input type="text"input type="time"input type="url"input type="week"inskbdlabellegendlilinkmainmapmarkmenumenuitemmetameternavnoscriptobjectoloptgroupoptionoutputpparampicturepreprogressqrprtrtcrubyssampscriptsectionselectslotsmallsourcespanstrongstylesubsummarysuptabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbrMiscellaneousAttributesBlock-level elementsCORS enabled imageCORS settings attributesElementInline elementsKinds of HTML contentLink typesMicrodataOptimizing your pages for speculative parsingPreloading contentReferenceSupported media formatsUsing the application cacheObsoleteacronymappletbasefontbigblinkcentercommandcontentdirelementfontframeframesethgroupimageinput type="datetime"isindexkeygenlistingmarqueenextidnoframesplaintextstrikettxmp
文字

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 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 上会输出:

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

上一篇:下一篇: