HTML5基础之无序列表和有序列表

一、无序列表

使用场景:在网页中表示一组无顺序之分的列表,如新闻等。

标签组成:

标签名 说明 ul 表示无序列表的整体,用于包裹li标签 li 表示无序列表的每一项,用于包含每一行的内容

注:ul标签只能包含li标签, li标签可以包含任意内容。

代码示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>web-study</title>
</head>
<body>
<ul>
	<li>香蕉</li>
	<li>苹果</li>
	<li>梨子</li>
</ul>
</body>
</html>

执行结果:

二、有序列表

使用场景:在网页中表示一组有顺序之分的列表,如排行榜等。

标签组成:

标签名 说明 ol 表示有序列表的整体,用于包裹li标签 li 表示有序列表的每一项,用于包含每一行的内容

代码示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>web-study</title>
</head>
<body>
<ol>
	<li>香蕉</li>
	<li>苹果</li>
	<li>梨子</li>
</ol>
</body>
</html>

执行结果:

经验分享 程序员 微信小程序 职场和发展