HTML ul 标签 - 绿叶网

HTML ul 语法

在 HTML 中，ul 标签用于创建一个无序列表。无序列表的列表项是没有顺序的。

语法：

<ul type="标记类型">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

说明：

ul 指的是 “unordered list（无序列表）”，而 li 指的是 “list item（列表项）”。

ul 标签有一个 type 属性，它用于定义列表项符号，常用取值如下表所示。

ul 标签的 type 属性取值
属性值	列表项符号
disc（默认值）	实心圆●
circle	空心圆○
square	正方形■

注意: 不推荐使用 type 属性来定义 ul 的列表项符号，而是推荐使用 CSS 的 list-style-type 属性。

HTML ul 摘要

属于	HTML 列表
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML ul 示例

接下来，我们通过几个简单的例子来讲解一下 HTML ul 标签是如何使用的。

示例 1：ul 标签的基本用法

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ul>
</body>
</html>

页面效果如下图所示。

HTML ul标签示例

示例 2：ul 标签的 type 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ul>
</body>
</html>

页面效果如下图所示。

HTML ul标签的type属性

深入了解 ul 标签

在实际的前端项目开发中，无序列表比有序列表更为实用。更准确点说，我们一般都是使用无序列表，几乎用不到有序列表。不说别的，就拿绿叶网来说，主导航、工具栏、动态栏等地方都用到了无序列表。凡是需要显示列表数据的地方都用到了，可谓无处不在！

绿叶网中用到的HTML ul标签

另外，我们可以看看大型网站在哪些地方用到了无序列表，比如下面几个图。

百度中用到的HTML ul标签

淘宝中用到的HTML ul标签

腾讯中用到的HTML ul标签

可能很多小伙伴都会感到疑惑：“这些效果是怎样用无序列表做出来的呢？” 网页外观嘛，当然都是用 CSS 来实现的！现在不懂没关系，为了早日做出这种美观的效果，小伙伴们好好加油把 CSS 学好！

此外，对于 HTML 无序列表来说，还有以下 3 点要注意。

ul 元素的子元素只能是 li，不能是其他元素。
ul 元素内部的文本，只能在 li 元素内部添加，不能在 li 元素外部添加。
ul 元素的 li 子元素可以嵌套其他列表。

示例 3：ul 的子元素只能是 li，不能是其他元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <div>前端三大技术：</div>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

页面效果如下图所示。

ul的子元素只能是li

分析：

上面代码是不规范的，因为 ul 元素的子元素只能是 li 元素，不能是其他元素。正确做法是这样：

<div>前端三大技术：</div>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

示例 4：文本不能直接放在 ul 元素内

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        前端三大技术：
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

页面效果如下图所示。

文本不能直接放在ul元素内

分析：

上面代码是不规范的，因为文本不能直接放在 ul 元素内。

示例 5：ul 标签嵌套列表

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <li>前端：
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>后端：
            <ul>
                <li>Go</li>
                <li>Java</li>
                <li>Node.js</li>
            </ul>
        </li>
    </ul>
</body>
</html>

页面效果如下图所示。

HTML ul标签用于嵌套列表

分析：

虽然 ul 的子元素只能是 li，但 li 本身是可以嵌套其他有序列表或无序列表的。