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

---
title: <li>
slug: Web/HTML/Element/li
translation_of: Web/HTML/Element/li
---
<p>{{HTMLRef}}</p>

<p><strong>HTML <code>&lt;li&gt;</code> 元素</strong> （或称 <em>HTML 列表条目元素）</em> 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表({{HTMLElement("ol")}})，一个无序列表({{HTMLElement("ul")}})，或者一个菜单 ({{HTMLElement("menu")}})。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">内容类别</th>
   <td>无</td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a></td>
  </tr>
  <tr>
   <th scope="row">标签省略</th>
   <td>如果列表元素的后面紧随另一个 {{HTMLElement("li")}} 元素，或者它的父元素中没有更多内容，结束标签可以省略。</td>
  </tr>
  <tr>
   <th scope="row">允许的父元素</th>
   <td>{{HTMLElement("ul")}}、 {{HTMLElement("ol")}}、 或者 {{HTMLElement("menu")}} 元素。过时的 {{HTMLElement("dir")}} 也可以作为父元素，但是并不提倡。</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLLIElement")}}</td>
  </tr>
  <tr>
   <th scope="row">元素类型</th>
   <td>块级</td>
  </tr>
 </tbody>
</table>

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

<p>这个元素拥有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>这个整数型属性表明了本 {{HTMLElement("li")}} 元素在有序列表 （由 {{HTMLElement("ol")}} 元素定义）中的序号。本属性值只能用数字，即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。<strong>value</strong> 属性对于无序列表 ({{HTMLElement("ul")}}) 或者菜单 ({{HTMLElement("menu")}}) 无效。
 <div class="note"><strong>注：</strong> 这个属性在 HTML 4 中废弃，但是在 HTML 5 中重新引入。</div>

 <div class="note">
 <p><strong>注：</strong> 在 {{Gecko("9.0")}} 之前，负值会错误地转换为 0。{{Gecko("9.0")}} 开始，所有整数值都可以正确解析。</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
 <dd>这个字符型属性表明了数字的类型：
 <ul>
  <li><code>a</code>: 小写字母</li>
  <li><code>A</code>: 大写字母</li>
  <li><code>i</code>: 小写罗马数字</li>
  <li><code>I</code>: 大写罗马数字</li>
  <li><code>1</code>: 数字</li>
 </ul>
 本属性值将覆盖 {{HTMLElement("ol")}} 元素中的同名属性值（若存在）。

 <div class="note"><strong>使用注解：</strong> 本属性已废弃：使用 CSS {{cssxref("list-style-type")}} 属性来代替。</div>
 </dd>
</dl>

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

<pre class="brush: html">&lt;ol&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;/ol&gt;
</pre>

<p>上面的 HTML 会输出：</p>

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

<pre class="brush: html">&lt;ol type="I"&gt;
    &lt;li value="3"&gt;third item&lt;/li&gt;
    &lt;li&gt;fourth item&lt;/li&gt;
    &lt;li&gt;fifth item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>上面的 HTML 会输出：</p>

<ol start="3" style="list-style-type: upper-roman;">
 <li>third item</li>
 <li>fourth item</li>
 <li>fifth item</li>
</ol>

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

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

<p>更多具体示例请见 <a href="/en-US/docs/Web/HTML/Element/ol#Examples">&lt;ol&gt;</a> 和 <a href="/en-US/docs/Web/HTML/Element/ul#Examples">&lt;ul&gt;</a> 页面。</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>The <code>type</code> attribute has been deprecated.</td>
  </tr>
 </tbody>
</table>

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

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li>其它列表相关的 HTML 元素： {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, 和过时的 {{HTMLElement("dir")}}；</li>
 <li>可能特定用于排版 <code>&lt;li&gt;</code> 元素的 CSS 属性：
  <ul>
   <li>{{cssxref("list-style")}} 属性，用于选择序号的展示方式，</li>
   <li><a href="/Web/Guide/CSS/Counters">CSS 计数器</a>，用于处理复杂的嵌套列表，</li>
   <li>{{cssxref("margin")}} 属性，用于控制列表条目的缩进。</li>
  </ul>
 </li>
</ul>

<div> </div>