HTML 列表

无序列表以ul>标签开头。 每个列表项都以 li>标签开头 。

默认情况下，列表项将标有项目符号(小黑圈)：

示例：

ul>

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ul>

亲自试一试

无序HTML列表 选择列表项标记

list-style-type 属性用于定义列表项标记的样式：

/ul>

亲自试一试

示例 Circle

ul >

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ul>

亲自试一试

p>示例 - Square/p>

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ul>

亲自试一试

示例 None

ul >

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ul>

亲自试一试

有序的HTML列表

有序列表以ol>标记开头.每个列表项都以li> 标标签开头。

默认情况下，列表项将标有数字：

示例

ol>

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ol>

亲自试一试

有序HTML列表 类型属性

标签的type属性ol> tag, 定义了列表项标记的类型：

/ol>

亲自试一试

大写字母：

ol type="A">

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ol>

亲自试一试

小写字母：

ol type="a">

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ol>

亲自试一试

大写罗马数字：

ol type="I">

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ol>

亲自试一试

小写罗马数字：

ol type="i">

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ol>

亲自试一试

HTML描述列表

HTML还支持描述列表。

描述列表是术语列表，其中包含每个术语的描述。

dl>标记定义了描述列表，所述dt>标签定义了术语(名称)，和dd>标签描述各术语：

示例：

dl>

 dt>咖啡/dt>

 dd>- black hot drink/dd>

 dt>牛奶/dt>

 dd>- white cold drink/dd>

/dl>

亲自试一试

嵌套的HTML列表

列表可以嵌套(列表中的列表)：

示例

ul>

 li>咖啡/li>

 li>茶

 li>黑茶/li>

 li>绿茶/li>

 /ul>

 /li>

 li>牛奶/li>

/ul>

亲自试一试

注意:列表项可以包含新列表和其他HTML元素，如图像和链接等。

控制列表计数

默认情况下，有序列表将从1开始计数。如果要从指定的数字开始计数，可以使用以下start属性：

示例：

ol start="50">

 li>咖啡/li>

 li>茶/li>

 li>牛奶/li>

/ol>

亲自试一试

CSS的水平列表

可以使用CSS以多种不同方式设置HTML列表的样式。

一种流行的方法是水平设置列表，以创建导航菜单：

示例：

!DOCTYPE html>

html>

head>

style>

 list-style-type: none;

 margin: 0;

 padding: 0;

 overflow: hidden;

 background-color: #333333;

 float: left;

li a {

 display: block;

 color: white;

 text-align: center;

 padding: 16px;

 text-decoration: none;

li a:hover {

 background-color: #111111;

/style>

/head>

body>

 li>a href="#home">Home/a>/li>

 li>a href="#news">News/a>/li>

 li>a href="#contact">Contact/a>/li>

 li>a href="#about">About/a>/li>

/body>

/html>

亲自试一试

提示: 您可以在我们的 CSS 教程中学习更多关于CSS的知识。

使用HTMLul>元素定义无序列表 使用CSS list-style-type属性定义列表项标签 使用HTMLol>元素定义有序列表 使用HTMLtype属性定义编号类型 使用HTMLli>元素定义列表项 使用HTMLdl>元素定义描述列表 使用HTMLdt>元素定义描述术语 使用HTMLdd>元素在描述列表中描述术语 列表可以嵌套在列表中 列表项可以包含其他HTML元素 使用CSS属性float:left或display:inline水平显示列表