HTML - <ul> 标签

HTML <ul> 标签用于创建无序列表。无序列表项显示为项目符号，可以有多种形式，例如点、圆圈或正方形。

无序列表 (ul) 用于对没有数字顺序的项目集合进行分组。无序列表包含多个<li> 标签，这些标签用于创建列表项。

语法

<ul>
  .....
</ul>

属性

HTML ul 标签支持 HTML 的全局和事件属性。还接受一些特定的属性，如下所示。

属性	值	描述
compact	compact	指定应以紧凑样式呈现无序列表（已弃用）。
type	disc circle square	指定列表项的不同项目符号样式（已弃用）。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML ul 标签示例

下面的示例将说明 ul 标签的使用。在哪里、何时以及如何使用 ul 标签。如何创建嵌套的无序列表。

创建无序列表

在下面的示例中，我们正在 HTML 中创建无序列表以以默认项目符号格式显示列表的相关项目。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML ul Tag</title>
</head>
<body>
    <!-- Creating an Unordered list-->
    <h3>
       List of technologies for Basic Web Development
    </h3>
    <ul>
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
</body>
</html>

创建无序列表的不同项目符号

以下是另一个无序列表的示例。在这里，我们使用 type 属性以不同的项目符号格式显示项目列表。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML ul Tag</title>
</head>
<body>
    <!-- Creating an Unordered list-->
    <h3>Default or Disc Unordered List</h3>
    <ul type="disc">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
    
    <h3>Cicle Unordered List</h3>
    <ul type="circle">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
    
    <h3>Square Unordered List</h3>
    <ul type="square">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
</body>
</html>

嵌套无序列表

在下面的示例中，我们正在创建嵌套的无序列表以显示列表的相关项目。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML ul Tag</title>
</head>

<body>
    <!-- Creating an Unordered Nested list-->
    <h3>List of Tools and Technologies for Web Development</h3>
    <ul type="disc">
        <li>HTML</li>
        <li>CSS
            <ul>
                <li>Bootstrap / Tailwind CSS</li>
                <li>SASS / LESS</li>
            </ul>
        </li>
        <li>JavaScript
            <ul>
                <li>ReactJS</li>
                <li>NodeJS</li>
            </ul>
        </li>
    </ul>
</body>

</html>

支持的浏览器

标签
ul	是	是	是	是	是

html_tags_reference.htm

打印页面