HTML 初学者 - 第 3 课 - 列表标签 ul、ol。HTML 标签属性。

11/10/2025, by Ivan

在网站上经常会使用到列表：比如菜单、正文中的条目列表等。我们先从最常用的一种——无序列表 <UL></UL>（unordered list - 无序列表）开始学习。

UL 列表

UL 列表用于菜单和带有项目符号的列表，并且可以通过 HTML 设置项目符号的样式。

我们先来修改一下我们的 HTML 代码：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ul>
	</ul>
  </body>
</html>

当前文档只会显示标题，因为我们的列表是空的。我们给它添加一些项目吧。项目使用标签 <LI></LI>（list item - 列表项）。

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ul>
	  <li>第一项</li>
	  <li>第二项</li>
	  <li>第三项</li>
	</ul>
  </body>
</html>

现在我们会看到一个带项目符号的列表。通过 <UL> 标签的属性可以更改项目符号的样式。

HTML 标签属性

正如前面提到的，UL 标签有属性。实际上，所有 HTML 标签都有属性。我们稍后会学习所有的属性，但现在先来了解什么是属性。属性用于控制 HTML 标签的显示方式，比如颜色、大小、形状等。对于 UL 标签，我们可以指定项目符号的类型：圆点、空心圆或方块。

属性的写法如下：

<标签 属性="属性值">

这样我们就可以直接在标签中定义显示方式。对于 UL 标签，该属性名为 type：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ul type="square">
	  <li>第一项</li>
	  <li>第二项</li>
	  <li>第三项</li>
	</ul>
  </body>
</html>

刷新浏览器后你会看到列表的项目符号变成了方块（square - 方形）。我们也可以使用空心圆：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ul type="circle">
	  <li>第一项</li>
	  <li>第二项</li>
	  <li>第三项</li>
	</ul>
  </body>
</html>

你还可以在一个列表中使用不同的项目符号，只需要给 <li> 标签单独设置 type 属性：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ul type="circle">
	  <li>第一项</li>
	  <li type="square">第二项</li>
	  <li>第三项</li>
	</ul>
  </body>
</html>

默认情况下，UL 和 LI 标签的项目符号类型为圆点（disc）：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>  
    <h1>我的第一个 HTML 文档</h1>
    <ul type="disc">
      <li>第一项</li>
      <li type="square">第二项</li>
      <li>第三项</li>
    </ul>
  </body>
</html>

现在我们去掉 UL 标签的 type 属性，看会发生什么：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ul>
	  <li>第一项</li>
	  <li type="square">第二项</li>
	  <li>第三项</li>
	</ul>
  </body>
</html>

现在让我们把三个项目分别设置为不同的项目符号：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ul>
	  <li type="disc">第一项</li>
	  <li type="square">第二项</li>
	  <li type="circle">第三项</li>
	</ul>
  </body>
</html>

现在你应该已经了解了标签属性的写法，接下来我们会学习更多的属性。

OL 列表

OL 标签（ordered list - 有序列表）虽然没有 UL 那么常见，但也经常被用来展示操作步骤、事件时间线、对象编号等。凡是需要编号的地方，都可以使用 OL 标签。

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ol>
	  <li>第一项</li>
	  <li>第二项</li>
	  <li>第三项</li>
	</ol>
  </body>
</html>

与 UL 标签类似，OL 也有 type 属性，不过属性值不同：

type="A" - 大写拉丁字母（A、B、C...）；
type="a" - 小写拉丁字母（a、b、c...）；
type="I" - 大写罗马数字（I、II、III...）；
type="i" - 小写罗马数字（i、ii、iii...）；
type="1" - 阿拉伯数字（默认值）。

你可以尝试为 OL 标签设置不同的 type 属性。以下是一个示例：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
	<ol type="i">
	  <li>第一项</li>
	  <li>第二项</li>
	  <li>第三项</li>
	  <li>第四项</li>	  
	</ol>
  </body>
</html>

额外区块类型 (EBT) - 全新的布局构建器体验❗

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

HTML 初学者 - 第 3 课 - 列表标签 ul、ol。HTML 标签属性。

UL 列表

HTML 标签属性

OL 列表