HTML列表详解-优快云博客

本文详细介绍了HTML中的三种列表类型：无序列表、有序列表和自定义列表。包括它们的基本语法、属性及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.无序列表

无序列表是一个项目的列表
无序列表始于 <ul> 标签。每个列表项始于 <li>。、
无序列表的type有三个属性值：disc（默认值，圆实心点）、circle（圆空心点）、square（方实心点）。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

基本格式：

<ul type="">

<li></li>

</ul>

代码示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>无序列表</title>
</head>
<body>
	<h1>无序列表</h1>
	<ul type="circle">
		<li>无序列表项1</li>
		<li>无序列表项2</li>
		<li>无序列表项3</li>
		<li>无序列表项4</li>
	</ul>
</body>
</html>

效果图：

2. 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
type属性：（1）整数(默认)。（2）大（小）写英文。[a/z/、A/Z]（3）大小写罗马字母.[i/I]
start属性：定义列表的开始序号。
value属性：定义某个单个列表的符号。

基本格式：

<ol>

<li></li>

</ol>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有序列表</title>
</head>
<body>
	<ol>
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
		<li>有序列表4</li>
	</ol>
	<ol type="A">
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
		<li>有序列表4</li>
	</ol>
	<ol type="i"> <!-- 罗马字母 -->
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
		<li>有序列表4</li>
	</ol>
	<ol start="8">
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
		<li>有序列表4</li>
	</ol>
	<ol start="">
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li value="6">有序列表3</li>
		<li>有序列表4</li>
	</ol>
</body>
</html>

效果图：

3自定义列表

自定义列表不仅仅是一列项目，而且是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

基本格式：

<dl>

<dt>项目列表</dt>

<dd>项目列表说明</dd>

</dl>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义列表</title>
</head>
<body>
	<dl>
		<dt>列表项目1</dt>
		<dd>
			列表项目一的内容****************************************************************************************************************************************
		</dd>
			<dt>列表项目2< /dt>
		<dd>
			列表项目2的内容****************************************************************************************************************************************
		</dd>
			<dt>列表项目3</dt>
		<dd>
			列表项目3的内容****************************************************************************************************************************************
		</dd>
	</dl>
</body>
</html>

效果图：