ul标志是什么意思

2026/04/06 ul标签支持哪些属性 6

题图来自Unsplash，基于CC0协议

导读

ul标签在HTML中的作用和用法

ul标签与ol标签的区别

如何在HTML中使用ul标签创建列表

ul标签支持哪些属性

浏览器对ul标签的默认样式

UL是一种在HTML中用于创建项目列表的标签，它代表的是"无序列表"。列表中的每个项目通常由li（列表项）标签表示。与在于OL标签用于创建编号列表不同，UL标签主要用于那些不需要数字编号，而是通过符号、圆点或其他方式来标记项目的场景。

使用UL标签的主要目的之一是为了构建语义化的网页结构。当一个列表具有共同的主题或起到类似作用时，将其用UL包裹明确地告知了浏览器和搜索引擎读者，某些内容构成一个独立的项目列表。

此外，UL标签提供了一个简洁的基础结构，便于通过CSS来统一设计列表符号（如样式、颜色）以及整个列表的视觉外观，使得网页的整体风格得以一致地应用。

以下是UL和OL的区别：

UL (无序列表): 用来表示列表项没有特定顺序的项目。默认情况下，列表项符号通常是实心圆点，但可以通过CSS轻松改变为其他符号（如方块、圆圈、加号、减号等，甚至可以使用图片）。它适用于如列表菜单、相关文章链接、特性说明等场景。
OL (有序列表): 用来表示列表项有明确顺序且顺序重要的项目。它会自动给每个li添加一个递增的数字编号，也可以生成字母（A, B, C...）或罗马数字（I, II, III...）的编号，同样可以通过CSS自定义或移除编号。它适用于如步骤指导、排名列表、多步骤表单等顺序性很重要的场合。

如何在HTML中使用ul标签创建列表非常简单：

基本列表：只包含一个层级的项目列表。
```
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
```
渲染结果会是一个项目前面加有默认圆点的列表。

嵌套列表：在一个li内部使用另一个ul或ol来表示层级结构或从属关系。这是构建多级菜单、文档大纲等常用方法。

<ul>
    <li>前端开发
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端开发
        <ul>
            <li>Python</li>
            <li>Java</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

UL标签本身就支持一些通用的HTML属性，特别是为了布局和标识目的：

class: 用于定义样式或通过JavaScript操作，例如<ul class="menu horizontal">。
id: 为元素分配唯一标识符，便于JavaScript或CSS定位，例如<ul id="shopping-list">。
style: 直接在标签内嵌入CSS样式规则，例如<ul style="list-style-type: square;">（用于改变列表符号为方形）。
title: 提供关于元素的额外提示信息，当用户将鼠标悬停在元素上时会显示，例如<ul title="热门链接">。
lang: 指定列表所属的语言，有助于某些辅助技术（如屏幕阅读器），例如<ul lang="en">。

请注意，由于历史原因，UL标签曾经支持type属性，用于改变列表的编号类型（在OL标签中）或有时控制符号类型（在UL中）。但是，HTML5标准中已经不推荐使用type属性来改变列表符号风格，现代化的实践是建议使用CSS（如list-style-type、list-style-image、list-style-position以及伪元素）来完全控制列表的外观。

浏览器（如Chrome、Firefox、Edge等）对于未使用CSS修改的<ul>和其<li>标签会有各自的默认样式，最常见的区别就是默认为空心圆点或者通过其他边框样式来表示列表项符号，并会设置列表项的左填充(padding-left)或左外边距(margin-left)以容纳列表符号。如果不希望采用浏览器的默认样式，或者想要统一不同的浏览器表现，通常需要编写专门的CSS规则来完全自定义ul和li的外观，包括列表符号的类型、位置、颜色，以及列表项的间距等。

Have a Question?

ul标志是什么意思

导读