【HTML5】->列表元素讲解

最新推荐文章于 2022-06-08 17:57:16 发布

_为光

最新推荐文章于 2022-06-08 17:57:16 发布

阅读量1.5k

点赞数 6

分类专栏： HTML5 文章标签： html 列表

本文链接：https://blog.csdn.net/qq_45627684/article/details/104431689

版权

HTML5 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

列表元素

Ⅰ 前言

列表元素主要有三个，分别是<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
评论
【HTML5】->列表元素讲解

列表元素Ⅰ 前言Ⅱ 无序列表Ⅲ 有序列表Ⅰ 前言列表元素主要有三个，分别是<ol>,<ul>,和<li>。分别为有序列表，无序列表和列表中的项。其中有序列表有两个属性，一个是type,意为设置样式，一个是reversed，意为降序。现在我来逐一讲解。Ⅱ 无序列表分别以<ul>和</ul>作为开始和结束的标志。会显示这样的内容：...
复制链接

扫一扫