阅读(2122)

HTML5 <li> 标签

最后一次修改 2017年08月02日

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head>
<body>

<p>有序列表:</p>
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<p>无序列表:</p>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


浏览器支持

目前多数主流浏览器支持 <li>标签。


标签定义及使用说明

<li> 标签定义列表项目。

<li> 标签可用在有序列表(<ol>)、无序列表(<ul>)和菜单列表(<menu>)中。


HTML 4.01 与 HTML5之间的差异

"type" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。

"value" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。


提示和注释

提示: 请使用 CSS 来定义列表和列表项目的类型。


属性

属性 描述
type 1
A
   a
   I
   i
   disc
   square
   circle
HTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。规定使用哪种项目符号。
value number 不赞成使用。请使用样式取代它。规定列表项目的数字。


全局属性

<li> 标签支持全局属性,查看完整属性表 HTML 全局属性。


事件属性

<li> 标签支持所有 HTML 事件属性。


Examples

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

列表内的列表。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶
        <ul>
          <li>中国</li>
          <li>非洲</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

更复杂的嵌套列表。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head>
<body>

<p>有序列表:</p>
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<p>无序列表:</p>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


浏览器支持

目前多数主流浏览器支持 <li>标签。


标签定义及使用说明

<li> 标签定义列表项目。

<li> 标签可用在有序列表(<ol>)、无序列表(<ul>)和菜单列表(<menu>)中。


HTML 4.01 与 HTML5之间的差异

"type" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。

"value" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。


提示和注释

提示: 请使用 CSS 来定义列表和列表项目的类型。


属性

属性 描述
type 1
A
   a
   I
   i
   disc
   square
   circle
HTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。规定使用哪种项目符号。
value number 不赞成使用。请使用样式取代它。规定列表项目的数字。


全局属性

<li> 标签支持全局属性,查看完整属性表 HTML 全局属性。


事件属性

<li> 标签支持所有 HTML 事件属性。


Examples

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

列表内的列表。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶
        <ul>
          <li>中国</li>
          <li>非洲</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

更复杂的嵌套列表。