【HTML5】->列表元素讲解

Ⅰ 前言

列表元素主要有三个,分别是<ol>,<ul>,和<li>。分别为有序列表,无序列表和列表中的项。其中有序列表有两个属性,一个是type,意为设置样式,一个是reversed,意为降序。现在我来逐一讲解。需要注意的一点,reversed的属性只有两个浏览器能支持,Chrome和Safari 6。

Ⅱ 无序列表

分别以<ul></ul>作为开始和结束的标志。会显示这样的内容:
在这里插入图片描述
这就是一个无序列表。<li></li>可以将每一条列表的内容写入。

<!DOCTYPE html>
<html>
<head>
	<title>列表元素</title>
</head>
<body>
<ul>
	<li>Y</li>
	<li>Z</li>
	<li>H</li>
</ul>
</body>
</html>

结果如下👇
在这里插入图片描述

Ⅲ 有序列表

有序列表以<ol></ol>为开始和结束标志。在其中会显示一个带有编号的列表。

<!DOCTYPE html>
<html>
<head>
	<title>列表元素</title>
</head>
<body>
<ol>
	<li>Y</li>
	<li>Z</li>
	<li>H</li>
</ol>
</body>
</html>

结果如下👇
在这里插入图片描述
我们着重看一下type属性。
type可以使得用户自定义序号,可以是ABC……,可以是罗马数字。
比如我们要做一个下面这样的多重嵌套的列表👇
在这里插入图片描述
我们只需要在那个列表的循环内部增加一个有序列表,并用type定义我们需要的序号就可以了。

<!DOCTYPE html>
<html>
<head>
	<title>列表元素</title>
</head>
<body>
<ol type="A">
	<li>YZH</li>
	<ol type="a">
		<li>YZH</li>
		<ol type="i">
			<li>YZH</li>
		</ol>
		<li>YZH</li>
		<li>YZH</li>
	</ol>
	<li>YZH</li>
	<li>YZH</li>
</ol>
</body>
</html>

结果如下👇
在这里插入图片描述

列表的内容比较简单,我的讲解就到这里。

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值