path: root/files/zh-cn/web/html/element/ul/index.html

---
title: <ul>
slug: Web/HTML/Element/ul
tags:
  - HTML
  - 元素
  - 列表
translation_of: Web/HTML/Element/ul
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;ul&gt;</code> 元素</strong>（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。</p>

<table class="properties">
 <tbody>
  <tr>
   <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">内容</a>分类</td>
   <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#Flow content">流式内容</a>，如果 <code>&lt;ul&gt;</code> 包含至少一个 <code>&lt;li&gt;</code> 元素，那么它就是显性内容 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">Palpable content</a>。</td>
  </tr>
  <tr>
   <td>允许的内容</td>
   <td>零个或更多个 {{HTMLElement("li")}} 元素，可以混合使用 {{HTMLElement("ol")}} 与{{HTMLElement("ul")}} 元素。</td>
  </tr>
  <tr>
   <td>标签省略</td>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <td>允许的父元素</td>
   <td>
    <p>接受流文本的任何内容</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <td>DOM 接口</td>
   <td>{{domxref("HTMLUListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<dl>
</dl>

<p>此元素仅含有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{ htmlattrdef("compact") }}{{ Deprecated_inline() }}</dt>
 <dd>此布尔属性提示列表是否需要被渲染为更紧凑的样式。用户代理决定如何解释这个属性，且并非所有浏览器都支持它。
 <div class="note"><strong>使用说明：</strong>不要使用这个属性，因为它已经被废弃了：{{ HTMLElement("ul") }} 元素应当使用 <a href="/zh-CN/docs/CSS">CSS</a> 来更改样式。（CSS）可以提供与<code> compact</code> 属性相同的效果，将  <a href="/zh-CN/docs/CSS">CSS</a> 属性 <a href="/zh-CN/docs/CSS/line-height">line-height</a> 的值设为 <code>80%</code> 即可。</div>
 </dd>
</dl>

<dl>
 <dt>{{ htmlattrdef("type") }}{{ Deprecated_inline() }}</dt>
 <dd>用于设置列表的着重号样式 ，被定义在 <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> 和过渡版本  <a href="/en/HTML4.01" title="en/HTML4.01">HTML 4.0/4.01</a> 中的可用值有<span style="font-family: monospace;">:</span>
 <ul>
  <li><code>circle</code></li>
  <li><code>disc</code></li>
  <li><code>square</code></li>
 </ul>

 <p>第四种着重号样式被定义在 WebTV 接口中，但并不是所有浏览器都支持: <code>triangle</code></p>

 <p>如果未设置此 HTML 属性且没有 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作用于这个元素，用户代理会决定使用哪种着重号样式，一般来说这也和嵌套的层级数有关。</p>

 <div class="note"><strong>使用说明:</strong> 不要使用这个属性，它已经被废弃了：使用 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作为代替。</div>
 </dd>
</dl>

<h2 id="使用说明">使用说明</h2>

<ul>
 <li><code>&lt;ul&gt;</code> 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形．虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 {{cssxref("list-style-type")}} 属性。</li>
 <li>在 {{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素中，嵌套列表没有深度和嵌套顺序的限制。</li>
 <li>{{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素二者都代表一组数据，不过它们彼此是有区别的，ol元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素，你可以试着去改变数据的顺序。如果想表达的语义改变了，你就需要使用ol元素，否则你该使用ul元素。</li>
</ul>

<h2 id="实例">实例</h2>

<h3 id="简单的例子">简单的例子</h3>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item&lt;/li&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ul&gt;
</pre>

<p>以上HTML输出:</p>

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

<h3 id="嵌套列表">嵌套列表</h3>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
    &lt;ul&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem      &lt;!-- Same for the second nested unordered list! --&gt;
        &lt;ul&gt;
          &lt;li&gt;second item second subitem first sub-subitem&lt;/li&gt;
          &lt;li&gt;second item second subitem second sub-subitem&lt;/li&gt;
          &lt;li&gt;second item second subitem third sub-subitem&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;           &lt;!-- Closing &lt;/li&gt; tag for the li that contains the third unordered list --&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;               &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>以上HTML输出:</p>

<ul>
 <li>first item</li>
 <li>second item
  <ul>
   <li>second item first subitem</li>
   <li>second item second subitem
    <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>
   <li>second item third subitem</li>
  </ul>
 </li>
 <li>third item</li>
</ul>

<h3 id="嵌套_&lt;ul>_和_&lt;ol>">嵌套 &lt;ul&gt; 和 &lt;ol&gt;</h3>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
    &lt;ol&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;                &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ul&gt;
</pre>

<p>以上HTML输出:</p>

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

<h2 id="规范">规范</h2>

<table>
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">评论</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("html.elements.ul")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>其他列表相关的HTML元素: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} 和绝对元素 {{ HTMLElement("dir") }};</li>
 <li>特别作用于 <span style="font-family: courier new;">&lt;ul&gt;</span>元素的CSS属性:
  <ul>
   <li> <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> 属性, 作用于选择哪种序数的样式来显示,</li>
   <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, 作用于操作复杂的嵌套列表,</li>
   <li> <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> 属性, 作用于模拟过时的 {{ htmlattrxref("compact", "ul") }} 属性,</li>
   <li> <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> 属性, 作用于控制列表的缩进.</li>
  </ul>
 </li>
</ul>

<p>{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</p>