HTML教程-HTML<ul>标签
HTML 无序列表或项目符号列表以项目符号的形式显示元素。我们可以在不需要按特定顺序显示项目的情况下使用无序列表。HTML 中使用 <ul> 标签来表示无序列表。有四种类型的项目符号列表:
- disc(圆点)
- circle(空心圆)
- square(方块)
- none(无项目符号)
为了表示不同的无序列表,<ul> 标签有四种类型的属性。
| 类型 | 描述 |
|---|---|
| 类型 "disc" | 这是默认样式。列表项以圆点标记。 |
| 类型 "circle" | 这种样式中,列表项以圆圈标记。 |
| 类型 "square" | 这种样式中,列表项以方块标记。 |
| 类型 "none" | 这种样式中,列表项没有标记。 |
HTML 无序列表示例
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>输出:
- HTML
- Java
- JavaScript
- SQL
<ul> type="circle"
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>输出:
- HTML
- Java
- JavaScript
- SQL
<ul> type="square"
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>输出:
- HTML
- Java
- JavaScript
- SQL
<ul> type="none"
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>输出:
- HTML
- Java
- JavaScript
- SQL
注意:在 HTML5 中不支持 type 属性,可以使用 <ul> 标签的 CSS 属性 list-style-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>支持的浏览器
| 元素 | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<ul> | 是 | 是 | 是 | 是 | 是 |
Chrome
IE
Firefox
Opera
Safari