HTML的列表元素

最新推荐文章于 2025-07-26 12:43:17 发布

原创最新推荐文章于 2025-07-26 12:43:17 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #经验分享

HTML的列表元素

通常人们会将相关信息用列表的形式放在一起，这样会使内容显得更加有条理性。
HTML提供了3种列表模式

无序列表
有序列表
定义列表

无序类别

无序列表的每一项前缀都显示为图形符号。
用<ul>定义无序列表。
用<li>定义列表项。
<ul>的type属性定义图形符号的样式，属性值为disc（点）、square（方块）、none（无）等

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
			<li>重庆</li>
		</ul>
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
			<li>重庆</li>
		</ul>
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
			<li>重庆</li>
		</ul>
		<ul type="none">
			<li>北京</li>
			<li>上海</li>
			<li>重庆</li>
		</ul>
	</body>
</html>

在这里插入图片描述
有序列表

有序列表的前缀通常为数字或者字母。
用<ol>定义有序列表。
用<li>定义列表项。
<ol>的type属性定义图形符号的样式，属性值为1(数字)、A(大写字母)、I(大写罗马数字)、a(小写字母)、i(小写罗马数字)等。
<ol>还可以通过start属性定义序号的开始位置。

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol type="A">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ol>
		<ol type="I">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ol>
		<ol type="1" start="2">
			<li>二</li>
			<li>三</li>
			<li>四</li>
		</ol>
		
	</body>
</html>

在这里插入图片描述
定义列表

定义列表是一种特殊的列表，它的内容不仅仅是一列项目，而且项目及其注释的组合。

<dl>标签定义列表
<dt>定义列表内部可以有多个列表项标题。
<dd>定义列表标题内部又可以有多个列表项描述

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义列表</title>
	</head>
	<body>
		<dl>
			<dt>电影</dt>
			<dd>国产电影</dd>
			<dd>日韩电影</dd>
			<dd>欧美电影</dd>
			<dt>电视剧</dt>
			<dd>国产电视剧</dd>
			<dd>日韩电视剧</dd>
			<dd>欧美电视剧</dd>
			<dt>综艺</dt>
			<dd>国产综艺</dd>
			<dd>日韩综艺</dd>
			<dd>欧美综艺</dd>
		</dl>
	</body>
</html>

在这里插入图片描述