xinbiancheng.cn

HTML <li> 标签

定义及使用说明

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

HTML 4.01 与 HTML5之间的差异

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

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

提示和注释

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

实例

HTML 两个列表实例： 一个有序列表 (<ol>) 和 一个无序列表 (<ul>) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML li 标签 xinbiancheng.cn</title>
</head>
<body>
<p>有序列表:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>无序列表:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

尝试一下

例：列表内的列表：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML li 标签 xinbiancheng.cn</title>
</head>
<body>
<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</body>
</html>

尝试一下

例：更复杂的嵌套列表：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML li 标签 xinbiancheng.cn</title>
</head>
<body>
<style>
	.myul li{
		list-style-type: circle;
		
	}
	.myul1 li{
		list-style-type: square;
	}
	.myul2 li{
		list-style-type: Disc;
	}
</style>
<h4>嵌套列表：</h4>
<ul class="myul">
  <li>Coffee</li>
  <li>Tea
    <ul class="myul1">
      <li>Black tea</li>
      <li>Green tea
        <ul class="myul2">
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</body>
</html>

尝试一下

可选的属性

属性 值 描述
type A
a
I
i
1
disc
square
circle		 规定使用哪种项目符号。
不推荐使用。请用样式代替。
value number 规定列表项目的数字。
不推荐使用。请用样式代替。

全局属性

<li> 标签支持 HTML 中的全局属性。

事件属性

<li> 标签支持 HTML 中的事件属性。

相关文章

HTML 教程: HTML 列表