【HTML】HTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )_html无序列表

作者：知新_RL | 2024-03-22 05:51:25

踩

html无序列表

文章目录

一、HTML 列表
二、无序列表
三、有序列表
四、自定义列表

一、HTML 列表

列表是装载结构 , 样式一致的文字或图表的容器 ;

列表由于其整齐 , 整洁 , 有序的特征 , 类似于表格 , 但是其组合的自由程度高于表格 , 经常用来进行布局 ;

列表中没有行的概念 , 在每一列中 , 自由摆放 ;

HTML 列表包括如下类型 :

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

二、无序列表

无序列表

外层标签是 <ul> 标签 ,
内层的列表项是 <li> 标签 ,

内部的列表项是没有顺序的 , 都是并列关系 ;

<!-- 无序列表 -->
<ul>
	<li>无序列表项1</li>
	<li>无序列表项2</li>
	<li>无序列表项3</li>
</ul>
1
2
3
4
5
6

无序列表标签注意事项 :

<ul></ul> 标签中只能使用 <li></li> 标签 , 不允许使用其它标签 ;
<li></li> 标签相当于一个容器 , 不只是能放文字 , 还可以放复杂的布局 , 容纳几十上百个元素 ;
<li></li> 标签中的容器的具体样式 , 一般由 CSS 设置 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 无序列表 -->
		<ul>
			<li>无序列表项1</li>
			<li>无序列表项2</li>
			<li>无序列表项3</li>
		</ul>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

三、有序列表

有序列表中的列表项会按照一定的顺序进行排列 , 其与无序列表的区别是外层使用的是 <ol></ol> 标签 ;

<!-- 有序列表 -->
<ol>
	<li>有序列表项1</li>
	<li>有序列表项2</li>
	<li>有序列表项3</li>
</ol>

1
2
3
4
5
6
7

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 无序列表 -->
		<ul>
			<li>无序列表项1</li>
			<li>无序列表项2</li>
			<li>无序列表项3</li>
		</ul>
		<br/>
		<!-- 有序列表 -->
		<ol>
			<li>有序列表项1</li>
			<li>有序列表项2</li>
			<li>有序列表项3</li>
		</ol>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

四、自定义列表

自定义列表 , 最外层的标签为 <dl></dl> , 一级标签为 <dt></dt> , 二级标签为 <dd></dd> ;

<!-- 自定义列表 -->
<dl>
	<dt>河北</dt>
	<dd>衡水</dd>
	<dd>邢台</dd>
	<dd>石家庄</dd>
	
	<dt>山东</dt>
	<dd>菏泽</dd>
	<dd>枣庄</dd>
	<dd>德州</dd>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 无序列表 -->
		<ul>
			<li>无序列表项1</li>
			<li>无序列表项2</li>
			<li>无序列表项3</li>
		</ul>
		<br/>
		<!-- 有序列表 -->
		<ol>
			<li>有序列表项1</li>
			<li>有序列表项2</li>
			<li>有序列表项3</li>
		</ol>
		<br/>
		<!-- 自定义列表 -->
		<dl>
			<dt>河北</dt>
			<dd>衡水</dd>
			<dd>邢台</dd>
			<dd>石家庄</dd>
			
			<dt>山东</dt>
			<dd>菏泽</dd>
			<dd>枣庄</dd>
			<dd>德州</dd>
		</dl>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/285692