HTML教程-HTML 无序列表 | HTML 项目符号列表.md
HTML 无序列表或项目符号列表以项目符号格式显示元素。我们可以使用无序列表,不需要以任何特定顺序显示项目。HTML ul 标签用于无序列表。可以有 4 种类型的项目符号列表:
- disc
- circle
- square
- none
为了表示不同的有序列表,<ul> 标签中有 4 种类型的属性。
类型 | 描述 |
---|---|
输入“disc” | 这是默认样式。在这种风格中,列表项用项目符号标记。 |
输入“circle” | 在这种风格中,列表项用圆圈标记。 |
输入“square” | 在这种风格中,列表项用方块标记。 |
输入“none” | 在这种风格中,列表项没有标记。 |
HTML 无序列表示例
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
输出:
- HTML
- Java
- JavaScript
- SQL
ul 类型=“circle"
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
输出:
- HTML
- Java
- JavaScript
- SQL
ul 类型 =“square”
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
输出:
- HTML
- Java
- JavaScript
- SQL
ul 类型 =“none”
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
输出:
- HTML
- Java
- 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>
输出: