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

韩曙亮

发布于 2023-03-30 19:11:38

3K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、HTML 列表

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

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

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

HTML 列表包括如下类型 :

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

二、无序列表

无序列表

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

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

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

无序列表标签注意事项 :

<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>

三、有序列表

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

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

代码示例 :

<!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>

四、自定义列表

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

<!-- 自定义列表 -->
<dl>
	<dt>河北</dt>
	<dd>衡水</dd>
	<dd>邢台</dd>
	<dd>石家庄</dd>
	
	<dt>山东</dt>
	<dd>菏泽</dd>
	<dd>枣庄</dd>
	<dd>德州</dd>
</dl>

代码示例 :

<!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>