HTML列表
本页内容
HTML 列表允许 Web 开发人员在列表中对一组相关项进行分组。
HTML 无序列表
无序列表以 <ul> 标签开头。每个列表项都以 <li> 标记开头。
默认情况下,列表项将标有项目符号(黑色小圆圈):
示例
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML 有序列表
有序列表以 <ol> 标签开头。每个列表项都以 <li> 标记开头。
默认情况下,列表项将用数字标记:
示例
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
有序列表 - type属性
标签<ol>的type属性,定义了列表项标记的类型:
- type="1" 列表项将用大写数字编号(默认)
- type="A" 项列表项将用大写编号
- type="a" 列表项将用小写编号
- type="I" 列表项将用大写罗马数字字符
- type="i" 列表项将用小写罗马数字编号
当然也可以使用type="10" 直接设置数字编号的开始值。
示例
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="10">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML 描述列表
HTML 还支持描述列表。
描述列表是术语列表,其中包含每个术语的描述。
<dl> 标签定义描述列表,标签 <dt> 定义术语(名称), <dd> 标签描述每个术语:
示例
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd> </dl>
嵌套列表
列表可以嵌套(列表中的列表):
示例
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
注意:列表项 ( <li> ) 可以包含新列表和其他 HTML 元素,如图像和链接等。
水平列表
HTML 列表可以使用 CSS 以多种不同方式设置样式。
一种流行的方法是水平设置列表样式,以创建导航菜单:
示例
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
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>
<h2>导航菜单</h2>
<p>在本例中,我们使用CSS水平设置列表样式,以创建导航菜单:</p>
<ul>
<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>
</ul>
</body>
</html>