本文概述
HTML无序列表或项目符号列表以项目符号格式显示元素。我们可以使用无序列表, 而无需按任何特定顺序显示项目。 HTML ul标签用于无序列表。项目符号列表可以有4种类型:
- 碟片
- 圈
- 广场
- 没有
为了表示不同的有序列表, <ul>标记中有4种类型的属性。
类型 | 描述 |
---|---|
Type “disc” | 这是默认样式。在这种样式中, 列表项用项目符号标记。 |
Type “circle” | 在这种样式中, 列表项用圆圈标记。 |
Type “square” | 在这种样式中, 列表项用正方形标记。 |
Type “none” | 在这种样式中, 列表项未标记。 |
HTML无序列表示例
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
立即测试
输出:
- 的HTML
- 爪哇
- 的JavaScript
- 的SQL
ul type =“ circle”
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
立即测试
输出:
- 的HTML
- 爪哇
- 的JavaScript
- 的SQL
ul type =“ square”
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
立即测试
输出:
- 的HTML
- 爪哇
- 的JavaScript
- 的SQL
ul type =“ none”
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
立即测试
输出:
- 的HTML
- 爪哇
- 的JavaScript
- 的SQL
注意:HTML5不支持type属性, 可以使用list-style-type的CSS属性代替type。以下是显示ul标签的CSS属性的示例。
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>The type attribute with CSS property</h2>
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>
立即测试
输出:
支持的浏览器
Element | Chrome | IE | Firefox | Opera | Safari |
<ul> | Yes | Yes | Yes | Yes | Yes |
评论前必须登录!
注册