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 |
|
不赞成使用。请使用样式取代它。 规定列表的项目符号的类型。 |
全局属性
<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
本例演示更复杂的嵌套列表。
