小码哥的IT人生

HTML <ul> 标签 详解

HTML基础 2022-06-02 09:44:16小码哥的IT人生shichen

HTML <ul> 标签

实例

无序 HTML 列表:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

完整实例【亲自试一试】:

<html>
<body>
<h4>一个无序列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

(请在页面底部查看更多实例)

定义和用法

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

浏览器支持

元素 Chrome IE Firefox Safari Opera
<ul> Yes Yes Yes Yes Yes

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

HTML 与 XHTML 之间的差异

在 HTML 4.01 中,ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中,ul 元素的 "compact" 和 "type" 属性是不被支持的。

提示和注释:

提示:请使用样式来定义列表的类型。

可选的属性

属性 描述
compact compact

不赞成使用。请使用样式取代它。

规定列表呈现的效果比正常情况更小巧。

type
  1. disc
  2. square
  3. circle

不赞成使用。请使用样式取代它。

规定列表的项目符号的类型。

全局属性

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

事件属性

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

HTML 列表实例

完整实例【一个无序列表】:

<html>
<body>
<h4>一个无序列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例演示一个无序列表。

完整实例【不同类型的无序列表】:

<html>
<body>
<h4>Disc 项目符号列表:</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>
<h4>Circle 项目符号列表:</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>
<h4>Square 项目符号列表:</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例演示不同类型的无序列表。

完整实例【嵌套列表】:

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例演示如何嵌套列表。

完整实例【嵌套列表 2】:

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

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

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024