HTML <ul> 标签

实例

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

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

运行实例 »

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


浏览器支持

1000.png

所有主流浏览器都支持 <ul> 标签。


标签定义及使用说明

<ul> 标签定义无序列表。

将 <ul> 标签与 <li> 标签一起使用,创建无序列表。


提示和注释

提示:使用 CSS 为列表定义样式。

提示:使用<ol> 标签创建有序列表。


HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,"compact" 和 "type" 属性 已废弃。HTML5 则不支持着两个属性。


属性

属性描述
compactcompactHTML5 不支持。HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧。
typedisc
   square
   circle
HTML5 不支持。HTML 4.01 已废弃。 规定列表的项目符号的类型。


全局属性

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


事件属性

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

尝试一下 - 实例

嵌套列表
本例演示如何嵌套列表。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.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>

运行实例 »

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

嵌套列表 2
本例演示更复杂的嵌套列表。

实例

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

<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

运行实例 »

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


相关文章

HTML 教程:HTML 列表