HTML列表标签

菜鸡崛起中...

已于 2023-04-03 17:56:21 修改

阅读量118

点赞数

分类专栏： HTML 文章标签： html javascript 前端

于 2023-04-03 12:00:00 首次发布

本文链接：https://blog.csdn.net/m0_57898822/article/details/129911602

版权

HTML 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了HTML中的三种列表标签：无序列表<ul>，有序列表<ol>和自定义列表<dl>。无序列表以圆点标记项目，有序列表则带有顺序，而自定义列表用于定义描述性内容。每种列表都有不同的样式选项，如无序列表的圆点、空心圆和实心方块，以及有序列表的字母和数字样式。文章通过代码实例展示了如何使用这些标签，并解释了它们的用途。

摘要由CSDN通过智能技术生成

HTML列表标签

前言

表标签的主要作用是页面布局，它相比表格标签，更加整齐、整洁、有序，作为布局更加自由和方便

一、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

1.1代码实例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>第一个列表项</li>
		<li>第二个列表项</li>
		<li>第三个列表项</li>
		<li>第四个列表项</li>
	</ul>
</body>
</html>

1.2运行结果

在这里插入图片描述

1.3无序列表样式

	type="disc"			//默认样式，圆点
	type="circle"		//空心圆样式
	type="square"		//实心正方形

二、有序列表

2.1代码实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol type='A'>
		<li>第一个列表项</li>
		<li>第二个列表项</li>
		<li>第三个列表项</li>
		<li>第四个列表项</li>
	</ol>
</body>
</html>

2.2运行结果

在这里插入图片描述

2.3 有序列表样式

	type="A"		//大写字母样式去数
	type="a"		//小写字母样式去数
	type="1"		//以大写的罗马数字（默认样式）
	type="i"		//以小写的罗马数字

三、自定义列表

3.1代码实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <dl>
        <dt>说明1</dt>
        <dd>列表一</dd>
        <dd>列表二</dd>
        <dt>说明二</dt>
        <dd>列表一</dd>
        <dd>列表二</dd>
    </dl>
</body>
</html>